Chart.js折线图图例标签字号设置无效，寻求解决方法

在Chart.js 2.7.x版本中，图例标签的字体大小配置并非直接挂载在legend根节点下，而是需要嵌套在legend.labels子配置项内。你当前代码里直接写legend.fontSize，框架无法识别这个层级的配置，所以字号设置不生效。

修改后的配置重点调整legend部分的结构，具体如下：

var options = {
  scales: {
    yAxes: [{
      ticks: {
        suggestedMin: 0,
        suggestedMax: 400
      }
    }]
  },
  legend: {
    position: 'right',
    labels: {
      fontSize: 100 // 字号配置移到labels子项内
    }
  }
};

完整的修改后代码：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>My Chart</title>
</head>
<body>
  <canvas id="my_chart">
    Canvas not supported...
  </canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
  <script>
    (function() {
      'use strict';

      var type = 'line';

      var data = {
        labels: [2019, 2020, 2021, 2022],
        datasets: [{
          label: 'Tom',
          data: [120, 350, 250, 210],
          borderColor: 'red',
          borderWidth: 5,
          fill: false,
          lineTension: 0,
          pointStyle: 'rect'
        }, {
          label: 'Jim',
          data: [180, 200, 300, 500],
          borderColor: 'blue',
          borderWidth: 5,
          fill: false,
          backgroundColor: 'rgba(0, 0, 255, 0.3)',
          lineTension: 0,
          pointStyle: 'triangle'
        }]
      };

      var options = {
        scales: {
          yAxes: [{
            ticks: {
              suggestedMin: 0,
              suggestedMax: 400
            }
          }]
        },
        legend: {
          position: 'right',
          labels: {
            fontSize: 100
          }
        }
      };

      var ctx = document.getElementById('my_chart').getContext('2d');
      var myChart = new Chart(ctx, {
        type: type,
        data: data,
        options: options
      });
    })();
  </script>
</body>
</html>

除了字号，你还可以在legend.labels里配置其他字体相关属性，比如fontStyle（设置字体样式，如italic）、fontColor（设置字体颜色）等，满足更多样式需求。

内容的提问来源于stack exchange，提问作者TOM