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

问题描述：

如果线图中的某个数据点的某个值超过某个值，是否可以将其他颜色设置为一个数据点？ChartJS - 每个数据点的不同颜色

我发现这个例子dxChart - https://stackoverflow.com/a/24928967/949195 - 现在寻找一个ChartJS

答

关于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(); 
}

无论如何试一试。

我应该提到我在AngularJS应用程序中使用这个插件：http://carlcraig.github.io/tc-angular-chartjs/ 但上面的代码，让我通过设置完成它遵循ChartJS文档的常用方法。 – Xander 2015-02-04 05:19:54

答

只需在新的2.0版本中添加适用于我的功能即可。

相反的：

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

我不得不使用：

myChart.config.data.datasets[0].backgroundColor[4] = "lightgreen";

不知道这2.0是因为改变的或者是因为我使用的柱状图，而不是一个折线图。

答

在更新到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"

感谢像魅力一样的工作 – 2016-12-07 10:29:45

要控制点的边框颜色，请使用相同的方法，但要使用'pointBorderColor'属性。 – cokeman19 2017-10-02 01:57:27

答

如果初始化以这种方式myChart，

var myChart = new Chart(ctx, { 
    type: 'line', 
    data: {

你必须通过此代码更改线条颜色

myChart.data.datasets[0].backgroundColor[0] ="#87CEFA";

如果以这种方式初始化myChart，

myBar = new Chart(ctx).Line(barChartData, {

你有这个代码

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

答

下面是我工作（改变线的颜色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（'三角'，'rect'，'rectRot'，'cross'，'crossRot'，'star'，'line'和'dash'），尽管我似乎无法弄清楚de pointRadius和pointStyle的故障。

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

相关推荐