基于标签值的Chart.js条形颜色 [英] Chart.js bar color based on labels values

问题描述

我需要的代码在这里:

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条形颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！