根据值更改条形图颜色

Question

我正在使用chart-js/ng2-charts用于角度2应用程序。

我可以显示条形图，但目前，所有条形都是相同的颜色。我想根据值使用不同的颜色。

这能做到吗？

Answer 1

创建图表后，可以使用以下函数遍历数据集并根据数据值更改颜色。

在此示例中，如果值大于 50，则颜色将更改为红色。

var colorChangeValue = 50; //set this to whatever is the deciding color change value
var dataset = myChart.data.datasets[0];
for (var i = 0; i < dataset.data.length; i++) {
  if (dataset.data[i] > colorChangeValue) {
    dataset.backgroundColor[i] = chartColors.red;
  }
}
myChart.update();

JSFiddle 演示：https://jsfiddle.net/6d0jsyxu/1/