如何在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'

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