chart.js 标签文本字体大小和数字文本字体大小太小

Question

我想增加以下元素的大小。您能否编辑下面的代码，使这些元素更大：

标签文本大小（NaCl 和 SalinityDrift 框上方图表）
x,y,y2 轴中的数字本身

脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.1.1/chartjs-plugin-zoom.min.js"></script>

<canvas id="myChart"></canvas>

<script type="text/javascript">
    $("#myChart").width( $(window).width() *0.97 );
    $("#myChart").height( $(window).height() * 0.8 );

    var ctx = document.getElementById('myChart').getContext('2d');

    const options = {
        type: 'line',
        data: {
            datasets: [
                {
                    label: 'NaCl',
                    data: natriumChrolideData,
                    borderColor: 'blue',
                    yAxisID: 'y',
                },
                {
                    label: 'Salinity drift',
                    data: salinityDriftData,
                    borderColor: 'red',
                    yAxisID: 'y2',
                },                
            ]
        },
        options: {
            parsing: false,
            normalized: true,
            animation: false,
            responsive: false,
            scales: {
                x: {
                    type: 'time',
                    title: {
                        display: true,
                        text: 'Time (client time zone)',
                        font: {
                            size: 24
                        }
                    },
                },
                y: {
                    title: {
                        display: true,
                        text: 'NaCl storage, kg',
                        font: {
                            size: 24
                        }
                    }
                },
                y2: {
                    title: {
                        display: true,
                        text: 'Salinity drift, %',
                        font: {
                            size: 24
                        },
                        ticks: {
                            min: 0,
                        },
                    }
                },
            },
            plugins: {
                zoom: {
                    pan: {
                        enabled: true,
                        onPanStart({chart, point}) {
                            // alert("pan works!");
                        },
                        mode: 'x',
                    },
                    zoom: {
                        wheel: {
                            enabled: true,
                        },
                        pinch: {
                            enabled: true
                        },
                        mode: 'x',
                    }
                }
            },
        }
    }

    new Chart(ctx, options);
</script>

生成的情节示例：

注意：我找到了一些使用 fontSize 或 tick.font 或 tick.fontSize 的解决方案，但要么我错误地实施了它们，要么由于某种原因它们不起作用。

Answer 1

您将 ticks 配置放在标尺标题中，而它应该位于标尺本身的根目录中。此外，对于顶部的框字体大小，您需要在 options.plugins.legend.labels 命名空间中进行配置。

实例：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          font: {
            size: 20
          }
        }
      }
    },
    scales: {
      x: {
        ticks: {
          font: {
            size: 20
          }
        }
      },
      y: {
        ticks: {
          font: {
            size: 20
          }
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

chart.js 标签文本字体大小和数字文本字体大小太小

chart.js labels text font size and digits text font size too small

chart.js