在Chart.js中如何根据标签值修改线段颜色？

失效原因 #

如果你的x轴为分类类型（即展示字符串标签的常规横轴），context.p0.parsed.x 存储的是分类的数值索引（例如January对应0、February对应1），而非你看到的字符串标签，因此直接和'February'做相等判断永远不成立。

解决方案 #

你需要从图表实例中先获取x轴的完整标签列表，再通过索引取出对应位置的标签做判断，示例代码如下：

borderColor: function(context) {
    // 获取x轴所有标签的数组
    const xLabels = context.chart.scales.x.ticks.map(tick => tick.label);
    // 取出当前线段起始点p0对应的x轴标签
    const p0XLabel = xLabels[context.p0.parsed.x];

    // 按标签匹配返回对应线段颜色
    if (p0XLabel === 'February') {
        return 'red'; // 可替换为你需要的颜色值，比如transparent
    }
    // 非匹配分段返回数据集默认的边框颜色
    return context.chart.data.datasets[context.datasetIndex].borderColor;
}

补充说明 #

因为单条线段关联两个相邻数据点p0（前一个点）和p1（后一个点），如果你需要让February对应的整段线段都生效，可以同时判断两个点的标签：

borderColor: function(context) {
    const xLabels = context.chart.scales.x.ticks.map(tick => tick.label);
    const p0XLabel = xLabels[context.p0.parsed.x];
    const p1XLabel = xLabels[context.p1.parsed.x];

    if (p0XLabel === 'February' || p1XLabel === 'February') {
        return 'red';
    }
    return context.chart.data.datasets[context.datasetIndex].borderColor;
}

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