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基於值的條形圖顏色更改

回答

相關問題