Chart.js 基于标签值的条形颜色答案

【问题标题】：Chart.js bar color based on labels valuesChart.js 基于标签值的条形颜色
【发布时间】：2016-09-09 05:48:21
【问题描述】：

我需要的代码在这里： chart.js bar chart color change based on value
Dola 使用 myObjBar.datasets[0].bars 根据数据集的值更改条形的颜色
我想做同样的事情，但使用标签值（好、平均、坏），例如

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();

【问题讨论】：

标签： chart.js

【解决方案1】：

您可以使用bars[i].label 而不是使用bars[i].value 属性，它会为您提供xAxe 的标签。

所以在你的循环中，改成这个：

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;
}

您可以在this jsFiddle 中找到完整的代码，结果如下：

【讨论】：

太棒了！谢谢。