如何使用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属性，因为在控制台中它向我返回了正确的字体大小。在我更改字体大小之后，它返回了正确的大小。但是出于某种原因，实际的图表没有更新。 chart.update命令只用于更新数据吗？

注：此问题与现有的关于使用JS动态更新图表的其他问题不重复，因为我使用的ChartJS版本是2.7。

- shurup

---

你使用的是哪个版本的chart.js？这个人使用的是版本1并且遇到了你的问题，但是似乎在更新到版本2之后，他们可以更新图表选项：https://dev59.com/KVkT5IYBdhLWcg3wa-xz - earthling

@earthling 我正在使用2.7.0版本。 - shurup

试试这个：https://dev59.com/tFkS5IYBdhLWcg3woIFR#48580585 - Billu

Answer 1

在 ChartJS 版本2.7.0或更高版本中，仅通过设置 ticks 对象的 fontSize 属性来动态更改图表轴线刻度的字体大小是不会生效的，它只会为新设置的字体大小添加空格。

要正确地更改图表轴线刻度的字体大小（以应用于图表），您需要设置小刻度对象（位于 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();
}

工作示例 ⧩

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>

- ɢʀᴜɴᴛ