chart.js Balkendiagramm die Farbe ändern, basierend auf dem Wert
Ich habe ein Balkendiagramm, das zeigt die Daten aus einer Datenbank, und ich muss in der Lage sein zu zeigen, eine andere Farbe für verschiedene numerische Werte. Zum Beispiel die "loc_health' gibt Werte zwischen 1 und 10 basieren, also muss ich zeigen, 1 rot, 2 orange, 3 gelb, 4 grün, usw...
Suchte ich den chart.js Dokumentation aber nicht finden können, eine Lösung für dieses.
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
});
- Mögliche Duplikate von "Erstellen", WENN Sie zu ändern chart.js bar color
InformationsquelleAutor dchadney | 2016-02-25
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie die Farbe jeder einzelnen Leiste durch den Zugriff auf
window.myObjBar.datasets[0].bars[0].fillColor
Eigentum, dann wird das Diagramm aktualisierenIn Ihrem Fall können Sie eine Schleife durch die Elemente und die Farbe jedes Balkens entsprechend
Einen funktionierenden JsFiddle
Könnte man so etwas machen
Aufruf von update() auf Ihrem Diagramm-Instanz re-Rendern des Diagramms aktualisierte Werte, so dass Sie den Wert Bearbeiten von mehreren Punkten, dann machen Sie diese in einer animierten render-Schleife.
Könnten Sie stattdessen überprüfen Sie den Wert, bevor Sie das Diagramm erstellen: