Chart.js堆叠柱状图如何修改最高柱对应x轴标签的显示颜色

核心修改点 #

你只需要调整x轴ticks.color的配置即可，Chart.js从v3版本开始支持该属性传入回调函数动态返回每个刻度的颜色，不需要额外引入插件。

具体实现步骤 #

• 如果你已经存储了需要高亮的x轴索引，直接替换代码中的高亮位置变量即可
• 如果需要自动计算堆叠总高度最高的x轴位置，可使用下方的计算逻辑

修改后的完整代码 #

// 可选：自动计算堆叠总高度最高的x轴索引，如果你已经有对应位置可以省略这部分
const getHighestStackIndex = () => {
    const totalHeights = data.xs_action.map((_, idx) => {
        return data.ys_H1a[idx] + data.ys_H2a[idx] + data.ys_H3a[idx];
    });
    const maxVal = Math.max(...totalHeights);
    return totalHeights.indexOf(maxVal);
}
const highlightTickIndex = getHighestStackIndex(); // 也可以直接赋值为你已经存储的索引值，比如 highlightTickIndex = 2

const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: data.xs_action,
        datasets: [{
                label: 'Head_1= Right Lane',
                data: data.ys_H1a,
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1,
                stack: 'Stack 0',
            },
            {
                label: 'Head_2 = High Speed',
                data: data.ys_H2a,
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1,
                stack: 'Stack 0',
            },
            {
                label: 'Head_3 = Change Lane',
                data: data.ys_H3a,
                backgroundColor: 'rgba(255, 206, 86, 0.2)',
                borderColor: 'rgba(255, 206, 86, 1)',
                borderWidth: 1,
                stack: 'Stack 0',
            },
        ]
    },
    options: {
        scales: {
            x: {
                gridLines: {
                    display: false,
                },
                ticks: {
                    color: function(context) {
                        // 对应索引的刻度返回高亮颜色，其余返回默认颜色
                        return context.index === highlightTickIndex ? 'red' : 'blue';
                    }
                }
            },
            y: {
                gridLines: {
                    display: false,
                },
            }
        }
    }
});

效果说明 #

上述代码中，你可以自行修改red和blue为你需要的色值，支持十六进制、rgba等所有CSS兼容的颜色格式。

内容的提问来源于stack exchange，提问作者yael