如何使用JavaScript更改ChartJS字体大小？

Question

我在页面上有一系列的图表，称为charts 。 这是我尝试运行以更改字体的代码：

for(var x in charts){
    charts[x].options.scales.yAxes[0].ticks.fontSize = 20;
    charts[x].options.scales.xAxes[0].ticks.fontSize = 20;
    charts[x].update();
}

我知道我正确地到达了fontSize属性，因为在控制台中它向我返回了正确的字体大小。 更改fontSize后，它会返回正确的字体大小。 但是由于某种原因，实际的图表没有更新。 chart.update命令是否仅用于更新数据？

注意：此问题不是与使用JS动态更新图表有关的另一个问题的重复，因为我使用的ChartJS版本是2.7。

Answer 1

在ChartJS版本2.7.0或更新的，改变（动态地）通过仅设置图表轴刻度线的字体大小fontSize财产ticks实际上不会适用于图表。 它将仅为新设置的字体大小在轴上添加空白。

为了正确更改图表轴的刻度的字体大小（这将适用于图表） ，您需要为minor对象（在ticks下）设置fontSize属性，如下所示：

for (var x in charts) {
   // set/change the actual font-size
   charts[x].options.scales.xAxes[0].ticks.minor.fontSize = 20;
   charts[x].options.scales.yAxes[0].ticks.minor.fontSize = 20;

   // set proper spacing for resized font
   charts[x].options.scales.xAxes[0].ticks.fontSize = 20;
   charts[x].options.scales.yAxes[0].ticks.fontSize = 20;

   // update chart to apply new font-size
   charts[x].update();
}

ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇ

 var myChart1 = new Chart(ctx1, { type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [{ label: 'Profit', data: [30, 10, 40, 20, 50], backgroundColor: 'rgba(61, 208, 239, 0.2)', borderColor: 'rgba(61, 208, 239, 0.6)' }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); var myChart2 = new Chart(ctx2, { type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [{ label: 'Loss', data: [50, 20, 40, 10, 30], backgroundColor: 'rgba(239, 92, 61, 0.2)', borderColor: 'rgba(239, 92, 61, 0.6)' }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); var charts = [myChart1, myChart2]; function changeFontSize() { for (var x in charts) { // set/change the font-size charts[x].options.scales.xAxes[0].ticks.minor.fontSize = 20; charts[x].options.scales.yAxes[0].ticks.minor.fontSize = 20; // set proper spacing for resized font charts[x].options.scales.xAxes[0].ticks.fontSize = 20; charts[x].options.scales.yAxes[0].ticks.fontSize = 20; // update chart to apply new font-size charts[x].update(); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script> <button onclick="changeFontSize();">Change Font Size</button> <canvas id="ctx1"></canvas> <canvas id="ctx2"></canvas>