chart.js - 根据值更改条形颜色

Question

我将 chart-js/ng2-charts 用于 Angular 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/