Chart.js图表自定义颜色失效，如何覆盖继承样式？

问题现象 #

使用Chart.js创建折线图时，所有线条都显示为灰色，尽管已经通过random_rgba()生成了不同的RGBA颜色值并赋值给数据集，但颜色并未生效。

问题原因 #

你在getChartDataObject函数中给数据集使用了color属性，而Chart.js的数据集配置中并没有color这个属性，正确的线条颜色配置应该使用borderColor，如果需要设置数据点的填充颜色则使用backgroundColor。这就是颜色不生效、线条显示默认灰色的核心原因。

解决方案 #

修改getChartDataObject函数，将color替换为borderColor（如果需要同时设置数据点颜色，可添加backgroundColor）：

function getChartDataObject(data){
    var title = data['metadata']['title'];
    var color = random_rgba();
    console.log(`Color: ${color}`);
    var dataObject = {
        label: title,
        data: data['scaled_interval'],
        borderColor: color, // 替换color为borderColor，设置线条颜色
        backgroundColor: color, // 可选：设置数据点的填充颜色
        fill: false,
        lineTension: 0,
        radius: 1,
    }
    return dataObject;
}

额外提示 #

• 若希望线条和数据点使用不同颜色，可分别给borderColor（线条）和backgroundColor（点填充）设置不同值。
• 注意random_rgba()生成的颜色透明度，比如示例中rgba(253,61,199,0.1)的透明度仅为0.1，可能导致颜色几乎不可见，建议调整透明度范围至0.5-1之间。

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