chart.js基于值的条形图颜色更改

我有一个条形图显示数据库中的数据，我需要能够为不同的数值显示不同的颜色。例如，'loc_health'返回1到10之间的值，因此我需要显示1为红色，2显示为橙色，3显示为黄色，4显示为绿色等...chart.js基于值的条形图颜色更改

我已经搜索了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 
});

来源

2016-02-25 dchadney

[Create IF to change chart.js bar color]可能的重复项（http://stackoverflow.com/questions/32462760/create-if-to-change-chart-js-bar-color） – potatopeelings

您可以用颜色通过访问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

来源

2016-02-25 17:14:39 Dola

你可以这样做

changeColor(loc_health); 

function changeColor(random_value){ 
    switch(random_value){ 
     case = 1: 
      datasets[0].fillColor = "#000"; 
      break; 
     case = 2: 
      //etc 

    } 
    myObjBar.update(); 
}

在Chart实例上调用update（）将使用任何更新的值重新呈现图表，从而允许您编辑多个现有点的值，然后在一个动画渲染循环中渲染这些值。

来源

2016-02-25 17:16:49

chart.js基于值的条形图颜色更改

回答

相关问题