本文介绍了基于标签值的Chart.js条形颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要的代码在这里:
The code I need is here:chart.js bar chart color change based on value
Dola changes the color of the bars based on the values of the datasets using myObjBar.datasets[0].bars
I want to do the same thing but with the labels values (good, average, bad) e.g.
var barChartData = {
labels: ["good", "average", "bad"],
datasets: [
{
data: [1, 3, 10]
}
]
};
var ctx = document.getElementById("mycanvas").getContext("2d");
window.myObjBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
var bars = myObjBar.labels[0]; //I need this line
for(i=0;i<bars.length;i++){
var color="green";
if(bars[i].value=="bad"){
color="red";
}
else if(bars[i].value=="average"){
color="orange"
}
else{
color="green"
}
bars[i].fillColor = color;
}
myObjBar.update();
解决方案
Instead of using bars[i].value
property, you can use bars[i].label
which gives you the label of the xAxe.
So in your loop, change to this :
for(i=0;i<bars.length;i++){
var color="green";
if(bars[i].label == "bad"){
color="red";
}
else if(bars[i].label == "average"){
color="orange"
}
else{
color="green"
}
bars[i].fillColor = color;
}
You can find the full code in this jsFiddle and here is its result :
这篇关于基于标签值的Chart.js条形颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!