ChartJS - Colore diverso per punto dati

Question

C'è un modo per impostare un colore diverso per un punto di dati in un grafico a linee se supera un determinato valore?

ho trovato questo esempio per dxChart - https://stackoverflow.com/a/24928967/949195 - e ora alla ricerca di qualcosa di simile per ChartJS

Answer 1

buona domanda per quanto riguarda ChartJS. Volevo fare una cosa simile. Io cambio dinamicamente il colore del punto in un colore diverso. Hai provato questo qui sotto. L'ho appena provato e ha funzionato per me.

Prova questo:

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

o provare questo:

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

O anche questo:

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

poi fare questo:

myLineChart.update(); 

Immagino che tu possa avere qualcosa del genere;

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

Provalo comunque.

Answer 2

Solo aggiungendo ciò che ha funzionato per me nella nuova versione 2.0.

Invece di:

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

ho dovuto usare:

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

Non sono sicuro se questo è a causa di un cambiamento di 2.0 o perché sto utilizzando un grafico a barre e non un grafico a linee .

Answer 3

In aggiornamento alla versione 2.2.2 di ChartJS, ho trovato che la risposta accettata non funziona più. I set di dati prenderanno un array contenente informazioni sullo stile per le proprietà. In questo caso:

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

ho trovato questo di consultare i nostri campioni per ChartJS, in particolare questo: "Different Point Sizes Example"

Answer 4

Se si inizializza il myChart in questo modo,

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

si deve cambia il colore della linea con questo codice

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

---

Se si inizializza il myChart in questo modo,

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

si deve cambiare il colore della linea da questo codice

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

Answer 5

Ecco che cosa ha funzionato per me (v 2.7.0), prima ho dovuto impostare pointBackgroundColor e pointBorderColor nel set di dati ad un array (si può riempire questo array con i colori in primo luogo se volete):

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

Quindi è possibile scimmia con i colori del punta direttamente:

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

Alcuni altri oggetti da giocare con a distinguere un punto: pointStrokeColor (a quanto pare esiste ma io non riesco a farlo funzionare), pointRadius & pointHoverRadius (interi), pointStyle ('triangolo ',' rect ',' rectRot ',' cross ',' crossRot ',' star ',' line ', e' dash '), anche se non riesco a capire il de errori per pointRadius e pointStyle.