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

有没有办法为折线图中的数据点设置不同的颜色,如果它高于某个值？

我找到了dxChart的这个例子 - /sf/ask/17360801/ - 现在正在为ChartJS寻找类似的东西

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  100) {
        pointBackgroundColors.push("#90cd8a");
    } else {
        pointBackgroundColors.push("#f58368");
    }
}

myChart.update();

我发现这看了ChartJS的样本,特别是这个:"不同的点大小示例"

---

要控制点的边框颜色，请使用相同的方法，但要具有pointBorderColor属性。

2> braks..：

---

这对我有用(v 2.7.0),首先我必须将数据集中的pointBackgroundColor和pointBorderColor设置为一个数组(如果需要,你可以在第一个位置用颜色填充这个数组):

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            {
                data: dataPoints,
                pointBackgroundColor: [],
                pointBorderColor: [],
            }
        ]
    }
});

然后你可以直接用点颜色来表示:

  myChart.data.datasets[0].pointBackgroundColor[4] = "#cc00cc";
  myChart.data.datasets[0].pointBorderColor[4] = "#cc0000";
  myChart.update();

用于区分点的其他一些属性:pointStrokeColor(它显然存在,但我似乎无法使它工作),pointRadius&pointHoverRadius(整数),pointStyle('triangle','rect','rectRot', 'cross','crossRot','star','line'和'dash'),虽然我似乎无法弄清楚pointRadius和pointStyle的默认值.

3> 小智..：

---

对于chartjs 2.0,请参阅以下答案.

原答案如下.

---

关于ChartJS的好问题.我一直想做类似的事情.即动态地将点颜色改变为不同的颜色.你有没有尝试过这个.我刚尝试过,它对我有用.

试试这个:

myLineChart.datasets[0].points[4].fillColor =   "rgba(000,111,111,55)" ; 

或试试这个:

myLineChart.datasets[0].points[4].fillColor =  "#FF0000";

甚至这个:

myLineChart.datasets[0].points[4].fillColor =  "lightgreen";

然后这样做:

myLineChart.update();

我想你可以有类似的东西;

if (myLineChart.datasets[0].points[4].value > 100) {
    myLineChart.datasets[0].points[4].fillColor =  "lightgreen";
    myLineChart.update();
 }

试试看吧.