chart.js 标签颜色

在使用 Chart.js 创建图表时，你可以通过多种方式设置标签（例如：X轴标签或Y轴标签）的颜色。下面是一些常见的方法来设置标签颜色：

1. 设置轴标签颜色

对于X轴和Y轴的标签，你可以在配置对象中设置scales的属性来定义轴的样式，包括颜色。

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar', // 例如：柱状图
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    color: 'blue' // Y轴标签颜色
                }
            },
            x: {
                ticks: {
                    color: 'red' // X轴标签颜色
                }
            }
        }
    }
});

2. 设置数据标签颜色

对于每个数据点，你可以设置数据集的label颜色。这通常用于柱状图、折线图等，其中每个数据点旁边显示一个标签。

options: {
    plugins: {
        legend: {
            labels: {
                color: 'green' // 图例标签颜色
            }
        }
    }
}

或者为特定的数据集设置：

datasets: [{
    label: 'Dataset 1',
    data: [...],
    backgroundColor: '...',
    borderColor: '...',
    borderWidth: 1,
    pointBackgroundColor: 'red', // 数据点背景色（例如：散点图）
    pointBorderColor: 'blue', // 数据点边框颜色（例如：散点图）
}]

3. 使用自定义插件设置标签颜色（高级）

如果你需要更复杂的控制，比如动态改变标签颜色，你可以使用Chart.js的插件系统。例如，创建一个插件来改变所有标签的颜色：

Chart.plugins.register({
    beforeDraw: function(chart) {
        var ctx = chart.ctx;
        chart.data.labels.forEach(function(label, index) {
            ctx.fillStyle = 'green'; // 设置你想要的颜色
            var textWidth = ctx.measureText(label).width;
            var textHeight = parseInt(ctx.font); // 或者使用其他方式获取高度，取决于你的字体大小设置方式。例如：ctx.font = "14px Arial"; 然后解析出14px。
            var x = chart.getDatasetMeta(0).data[index].x; // 根据你的数据集索引调整，这里假设是第一个数据集。x位置可能需要根据你的图表类型调整。
            var y = chart.getDatasetMeta(0).data[index].y; // 同上，y位置。对于条形图，可能需要加上条形的高度等信息。
            ctx.fillText(label, x - text