javascript - ChartJS - 每个数据点不同的颜色

Question

如果折线图中的数据点高于特定值，是否可以为其设置不同的颜色？

我找到了 dxChart 的示例 - https://stackoverflow.com/a/24928967/949195 - 现在正在为 ChartJS 寻找类似的东西

Answer 1

在更新到 ChartJS 2.2.2 版本时，我发现接受的答案不再有效。数据集将采用一个数组来保存属性的样式信息。 在这种情况下:

var pointBackgroundColors = [];
var myChart = new Chart($('#myChart').get(0).getContext('2d'), {
    type: 'line',
    data: {
        datasets: [
            {
                data: dataPoints,
                pointBackgroundColor: pointBackgroundColors
            }
        ]
    }
});

for (i = 0; i < myChart.data.datasets[0].data.length; i++) {
    if (myChart.data.datasets[0].data[i] > 100) {
        pointBackgroundColors.push("#90cd8a");
    } else {
        pointBackgroundColors.push("#f58368");
    }
}

myChart.update();

我在查看 ChartJS 的示例时发现了这一点，特别是这个:"Different Point Sizes Example"