Question

如何在Chart JS中更改轴的特定标签的文本颜色？

Answer 1

您可以按照in the docs设置刻度颜色：

new Chart(ctx, {
    type: "line",
    data: data,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    fontColor: "white",
                    fontSize: 18,
                }
            }],
            xAxes: [{
                ticks: {
                    fontColor: "white",
                    fontSize: 14,
                }
            }]
        }
    }
});

请参见https://www.chartjs.org/docs/latest/general/colors.html，了解可以定义颜色的格式。

编辑：我现在看到您想为特定的标签设置颜色。据我所知，这是没有办法的。

Answer 2

据我所知这是不可能的（至少目前是2.9版，也许在即将发布的版本中）。

ticks.fontColor既不可编写脚本，也不可编制索引。

您可以做的一件事就是为刻度线上方的网格线着色。

scales: {
  xAxes: [{
    gridLines: {
      color: ['#F00', '#0F0', '#F00', '#F00']
    }]
  }
}

您可以对颜色进行硬编码，也可以使用函数为每条网格线赋予颜色。

Answer 3

有4种特殊的全局设置可以更改图表上的所有字体。这些选项位于Chart.defaults.global中。全局字体设置仅在配置中未包含更多特定选项时适用。

例如，在此图表中，除了图例中的标签外，所有文本均为红色。

Chart.defaults.global.defaultFontColor = 'red';
let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legend: {
            labels: {
                // This more specific font property overrides the global property
                fontColor: 'black'
            }
        }
    }
});

如何更改Chart JS中轴的特定标签的文本颜色？

3 个答案: