如何在chart.js中动态更改线条的颜色

Question

如何根据该点的值在chart.js 2.x中动态更改线条的颜色。

例如，如果我有一个类似以下数组的数据集：

[10, 20, 30, 40, 50, 60, 70, 80, 70, 60, 50, 40, 30, 20, 10]

我希望当数据点高于40时线条颜色变为红色，而如果值低于40则线条颜色保持绿色。

Answer 1

一种方法是使用Bands plugin

只要您不希望使用此行，只需按照给定的说明进行操作即可。

bands: {
  yValue: 40,
  belowThresholdColour: [
    '#F00'
  ]
},

您的数据集应具有以下颜色：borderColor: '#F00'

您可能需要注意图例，因为如果您不喜欢它，它将具有数据集的红色。