chart.js条形图基于值的颜色变化

查德尼

我有一个条形图，它显示数据库中的数据，我需要能够为不同的数值显示不同的颜色。例如，“ loc_health”返回的值介于1到10之间，因此我需要将1显示为红色，2显示为橙色，3显示为黄色，4显示为绿色，等等。

我已经搜索了chart.js文档，但找不到解决方案。

var context = document.getElementById('healthRatings').getContext('2d');

window.myObjBar = new Chart(context).Bar({
    labels : loc_id_grab,
    datasets : [{
        fillColor : ["rgba(220,220,220,0.5)"],
        strokeColor : "rgba(151,187,205,1)",
        pointColor : "rgba(151,187,205,1)",
        pointStrokeColor : "#fff",
        data : loc_health
    }]
}, {
    scaleOverride : true,
    scaleSteps : 10,
    scaleStepWidth : 1,
    scaleStartValue : 0,
    barShowStroke : false,
    barStrokeWidth : 1,
    showTooltips : false,
    barValueSpacing : 2,
    animation : false,
    responsive : true,
    maintainAspectRatio : true
});

美元

您可以通过访问window.myObjBar.datasets[0].bars[0].fillColor属性为每个单独的柱着色，然后更新图表

在您的情况下，您可以遍历元素并相应地为每个条着色

    var bars = myObjBar.datasets[0].bars;
    for(i=0;i<bars.length;i++){
       var color="green";
       //You can check for bars[i].value and put your conditions here
       bars[i].fillColor = color;

    }
    myObjBar.update(); //update the chart

工作的JsFiddle

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。