在 ChartJS 中设置轴标签颜色

Question

使用 ChartJS 3，您可以通过设置更改标签的颜色 scales.x.ticks.color 和 scales.y.ticks.color 选项。 例如，下面是如何使 Y 轴标签为绿色，X 轴标签为红色。

请注意，以下内容在 ChartJS 2.x 中不起作用，您需要使用 ChartJS 3。

const ctx = document.getElementById('chart').getContext('2d');

const chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'bar',
    data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F'],
    datasets: [{
        label: 'Example Data',
        data: [12, 19, 3, 5, 2, 3],
    }]
  },
  // Configuration options go here
  options: {
    responsive: true,
    scales: {
      y: {
        ticks: { color: 'green', beginAtZero: true }
      },
      x: {
        ticks: { color: 'red', beginAtZero: true }
      }
    }
  }
});

您可以使用 ChartJS 支持的任何颜色格式 ，包括十六进制代码。 例如，下面是将 Y 轴刻度设置为红色并将 X 轴刻度设置为绿色的替代方法。

options: {
  responsive: true,
  scales: {
    y: {
      ticks: { color: '#00ff00', beginAtZero: true }
    },
    x: {
      ticks: { color: '#ff0000', beginAtZero: true }
    }
  }
}