2013-04-27 12 views
7

Nel grafico a linee HighCharts, come posso impostare il colore di una linea in serie in base al suo valore in relazione al valore di una trama.Come cambiare il colore del grafico sopra e sotto la trama in Highcharts

Per esempio, se ho una trama y = 15, come potrei fare il colore verde serie quando y < 15 e rosso quando y > 15

http://jsfiddle.net/adamtsiopani/YBMny/

$('#container').highcharts('StockChart', { 


    rangeSelector: { 
     selected: 1 
    }, 

    title: { 
     text: 'KPN Year View' 
    }, 

    yAxis: { 
     plotLines: [{ 
      label: { 
       text: 'Baseline', 
       x: 25 
      }, 
      color: 'orange', 
      width: 2, 
      value: 15, 
      dashStyle: 'longdashdot' 
     }], 
    }, 

    series: [{ 
     name: 'KPN12345', 
     data: [ 
      [1327881600000, 11], 
      [1327968000000, 18], 
      [1328054400000, 12], 
      [1328140800000, 5], 
      [1328227200000, 11], 
      [1328486400000, 17], 
      [1328572800000, 10], 
      [1328659200000, 10], 
      [1328745600000, 15], 
      [1328832000000, 10], 
      [1329091200000, 11] 
     ] 
    }] 
}); 

risposta

19

Si può fare questo con una combinazione della threshold e negativeColor opzioni di serie.

 series: [{ 
     name: 'KPN12345', 
     data: [ 
      [1327881600000, 11], 
      etc... 
     ], 
     threshold: 15, 
     negativeColor: 'green', 
     color: 'red', 
     tooltip: { 
      valueDecimals: 2 
     } 
    }] 

Fiddle here.

enter image description here

+0

Perfetto, grazie :) – Adam

+0

E 'anche possibile cambiare il colore del testo nella descrizione comandi sulla base di questo valore? – Adam

+2

@Adamski: per farlo probabilmente dovresti aggiungere un formattatore di suggerimenti personalizzati. Vedere l'esempio: http://jsfiddle.net/YBMny/7/ – Mark

Problemi correlati