2016-09-09 2 views
2

код мне нужно здесь: chart.js bar chart color change based on value
Дола меняет цвет баров на основе значений наборов данных с помощью myObjBar.datasets[0].bars
Я хочу сделать то же самое но с значениями меток (хорошие, средние, плохие), например
Chart.js бар цвета на основе меток значений

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

ответ

1

Вместо использования bars[i].value собственности, вы можете использовать bars[i].label, который дает вам метку 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 и вот его результат:

enter image description here

+1

Brilliant! Спасибо. – RowDogSA