有什么方法可以更改 Chart.js v3 中条形图中标签的字体大小？答案

【问题标题】：Is there any way to change the font size of labels in bar chart in Chart.js v3?有什么方法可以更改 Chart.js v3 中条形图中标签的字体大小？
【发布时间】：2021-11-11 03:41:34
【问题描述】：

它会创建一个水平延伸的条形图。
CodeSandBox

巴赫、莫扎特等标签的字体很小，想加大。请告诉我如何更改标签的字体大小？

    <div class="chartWrap">
      <canvas id="chart"></canvas>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
      const labels = ["Bach", "Mozart", "Ravel", "Chopin", "Beethoven"];
      const data = {
        labels: labels,
        datasets: [
          {
            data: [9, 10, 7, 8, 8],
            backgroundColor: "rgba(0, 0, 0, 0.5)"
          }
        ]
      };
      const options = {
        responsive: true,
        indexAxis: "y",
        plugins: {
          legend: {
            display: false
          }
        }
      };
      const config = {
        type: "bar",
        data: data,
        options: options
      };

      const ctx = document.getElementById("chart").getContext("2d");
      new Chart(ctx, config);
    </script>

看了很多Chart.js的例子，知道options > scales中应该指定字体大小，但是不知道在scales下要输入什么。

Bar Chart | Chart.js

【问题讨论】：

标签： javascript html charts chart.js

【解决方案1】：

将此添加到选项中。

      scales: {
        y: {
          ticks: {
            font: {
              size: 30,
            }
          }
        }
      }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
</head>

<body>
  <div class="chartWrap">
    <canvas id="chart"></canvas>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    const labels = ["Bach", "Mozart", "Ravel", "Chopin", "Beethoven"];
    const data = {
      labels: labels,
      datasets: [{
        data: [9, 10, 7, 8, 8],
        backgroundColor: "rgba(0, 0, 0, 0.5)"
      }]
    };
    const options = {
      responsive: true,
      indexAxis: "y",
      plugins: {
        legend: {
          display: false
        }
      },
      scales: {
        y: {
          ticks: {
            font: {
              size: 30,
            }
          }
        }
      }
    };
    
    const config = {
      type: "bar",
      data: data,
      options: options
    };

    const ctx = document.getElementById("chart").getContext("2d");
    new Chart(ctx, config);
  </script>
</body>

</html>

【讨论】：