ChartJS - Unterschiedliche Farbe pro Datenpunkt

Question

Gibt es eine Möglichkeit, eine andere Farbe für einen Datenpunkt in einem Liniendiagramm festzulegen, wenn sie über einem bestimmten Wert liegt?

fand ich dieses Beispiel für dxChart - https://stackoverflow.com/a/24928967/949195 - und nun auf der Suche nach etwas ähnliches für ChartJS

Answer 1

Gute Frage in Bezug auf ChartJS. Ich wollte etwas Ähnliches machen. d. h. dynamisch die Punktfarbe zu einer anderen Farbe ändern. Hast du das unten versucht? Ich habe es gerade ausprobiert und es hat für mich funktioniert.

Versuchen Sie folgendes:

myLineChart.datasets[0].points[4].fillColor = "rgba(000,111,111,55)" ; 

Oder Versuchen Sie folgendes:

myLineChart.datasets[0].points[4].fillColor = "#FF0000"; 

Oder auch dies:

myLineChart.datasets[0].points[4].fillColor = "lightgreen"; 

dies dann tun:

myLineChart.update(); 

Ich denke du könntest sowas haben;

if (myLineChart.datasets[0].points[4].value > 100) { 
    myLineChart.datasets[0].points[4].fillColor = "lightgreen"; 
    myLineChart.update(); 
} 

Probieren Sie es trotzdem aus.

Answer 2

Nur hinzufügen, was für mich in der neuen 2.0-Version funktionierte.

Statt:

myLineChart.datasets[0].points[4].fillColor = "lightgreen"; 

Ich hatte zu verwenden:

myChart.config.data.datasets[0].backgroundColor[4] = "lightgreen"; 

nicht sicher, ob das in 2.0 aufgrund einer Änderung ist oder weil ich ein Balkendiagramm bin mit und nicht ein Liniendiagramm .

Answer 3

Bei der Aktualisierung auf Version 2.2.2 von ChartJS fand ich, dass die angenommene Antwort nicht mehr funktioniert. Die Datasets nehmen ein Array, das Styling-Informationen für die Eigenschaften enthält. In diesem Fall:

var pointBackgroundColors = []; 
var myChart = new Chart($('#myChart').get(0).getContext('2d'), { 
    type: 'line', 
    data: { 
     datasets: [ 
      { 
       data: dataPoints, 
       pointBackgroundColor: pointBackgroundColors 
      } 
     ] 
    } 
}); 

for (i = 0; i < myChart.data.datasets[0].data.length; i++) { 
    if (myChart.data.datasets[0].data[i] > 100) { 
     pointBackgroundColors.push("#90cd8a"); 
    } else { 
     pointBackgroundColors.push("#f58368"); 
    } 
} 

myChart.update(); 

fand ich diese Proben der Suche durch ChartJS für speziell diese: "Different Point Sizes Example"

Answer 4

Wenn Sie die myChart auf diese Weise initialisieren,

var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 

Sie müssen Ändern Sie die Linienfarbe mit diesem Code

myChart.data.datasets[0].backgroundColor[0] ="#87CEFA"; 

---

Wenn Sie die myChart auf diese Weise initialisieren,

myBar = new Chart(ctx).Line(barChartData, { 

müssen Sie Linienfarbe

myLineChart.datasets[0].points[4].fillColor = "#FF0000"; 

Answer 5

Hier ist, was für mich gearbeitet durch diesen Code ändern (v 2.7.0), zuerst hatte ich pointBackgroundColor und pointBorderColor im Datensatz auf ein Array setzen (können Sie dieses Array mit Farben in erster Linie füllen, wenn Sie wollen):

var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
     datasets: [ 
      { 
       data: dataPoints, 
       pointBackgroundColor: [], 
       pointBorderColor: [], 
      } 
     ] 
    } 
}); 

Dann können Sie Affen mit den Farben der direkt Punkte:

myChart.data.datasets[0].pointBackgroundColor[4] = "#cc00cc"; 
    myChart.data.datasets[0].pointBorderColor[4] = "#cc0000"; 
    myChart.update(); 

Einige andere Eigenschaften zu spielen, einen Punkt zu unterscheiden: pointStrokeColor (es existiert offensichtlich, aber ich kann es nicht zur Arbeit zu kommen scheinen), pointRadius & pointHoverRadius (Integer), pointStyle ('Dreieck ',' rect ',' rectRot ',' cross ',' crossRot ',' Stern ',' Linie 'und' Strich '), obwohl ich nicht scheinen kann, de zu finden Fehler für PointRadius und PointStyle.