Google Grafico a linee: Colori differenti per specifiche gamme

Question

https://developers.google.com/chart/interactive/docs/gallery/linechart?hl=ja#Configuration_Options

Come posso specificare i colori differenti per una singola linea dipende dalla gamma particolare? Ad esempio, una riga deve essere blu da 0 a 10 e rossa da 10 a 20.

Answer 1

Risposta breve: non è possibile.

Risposta lunga: è possibile creare una lunga soluzione, ma ogni passaggio presenterà diversi problemi che potrebbero risultare peggiori rispetto a una linea a singolo colore.

Eseguire un ciclo tra i dati in modo che ogni colore si trovi in ​​una colonna diversa per ciascuna serie. Questo è il modo più veloce.

Per esempio, se si dispone di dati:

var data = google.visualization.arrayToDataTable([ 
    ['Month', 'Data'], 
    ['2004/05', 123], 
    ['2005/06', 234], 
    ['2006/07', 345], 
    ['2007/08', 456], 
    ['2008/09', 789] 

E si desidera dividere in a 3 colori: < 300, 300-600

Puoi scrivere uno script per rendere i tuoi dati così:

var data = google.visualization.arrayToDataTable([ 
    ['Month', 'Red', 'Green', 'Blue'], 
    ['2004/05', 123, null, null], 
    ['2005/06', 234, null, null], 
    ['2006/07', null, 345, null], 
    ['2007/08', null, 456, null], 
    ['2008/09', null, null, 789] 

Quanto sopra vi darà punti colorati per ogni diversa gamma. Se in realtà desideri che le linee che li collegano cambino colore non appena superano una certa soglia, devi calcolare l'intercetta di 300 con qualsiasi giorno, e aggiungerla alla serie. Lo stesso con 600. Dovresti anche cambiare la serie "Mese" per essere effettivamente valori di data in modo da poter impostare il punto tra correttamente. Ovviamente compariranno anche questi punti intermedi, che è un altro mal di testa ...

Puoi anche giocherellare con domains ma quelli non ti aiuteranno con la colorazione (ma ti aiuteranno a collegare i diversi punti alla stessa serie).