javascript - 更改单个点 Chart.js 的样式

Question

我想更改 Chart.js 图表中单个点的样式。我在这里尝试了解决方案

ChartJS - Different color per data point

但它们都不适合我。例如，要更改我的第一个数据集中第 4 个点的背景颜色，我会尝试以下 2 种解决方案(以及删除/添加 .config):

myChart.config.data.datasets[0].points[4].pointBackgroundColor = 'red';
myChart.config.data.datasets[0].pointBackgroundColor[4] = "red";
myChart.update();

没有效果。相反，更改整个数据集的样式效果非常好:

myChart.config.data.datasets[0].pointBackgroundColor = 'lightgreen';
myChart.update();

jsfiddle:https://jsfiddle.net/e8n4xd4z/15766/ ;这是为什么？

Answer 1

https://jsfiddle.net/e8n4xd4z/15822/

您可以在 options 中对 pointBackgroundColor 使用一组颜色，如下所示

pointBackgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]

然后，如果您以后想更改任何单个点的颜色，您可以按如下方式进行

myChart.config.data.datasets[0]['pointBackgroundColor'][4] = 'red';

我已附上更新后的 jsfiddle 的链接。你可以检查一下。干杯!