Chart.js折线图图例标签字体大小不起作用

yvt65v4c 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(130)

我正在使用Chart.js并尝试制作折线图。
我想使我的图表图例标签（Tom和Jim）的字号更大一些。
我试过这样;

<!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',
          fontSize: 100,
        }
      };

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

但是它不起作用，我该怎么办？
参见Chart.js Radar chart legend label font size doesn't work

chart.js

来源：https://stackoverflow.com/questions/73997131/chart-js-line-chart-legend-label-font-size-doesnt-work

1条答案

按热度按时间

vzgqcmou1#

需要标签！

<!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>

赞(0）回复(0）举报 2022-11-06

我来回答

Chart.js折线图图例标签字体大小不起作用

1条答案

相关问题

热门标签

最新问答