2013-04-27 17 views
7

W wykresie liniowym HighCharts, jak ustawić kolor linii szeregowej w zależności od jej wartości w stosunku do wartości wykresu.Jak zmienić kolor wykresu powyżej i poniżej wykresu w Highcharts

Na przykład, jeśli mam fabuła y = 15, w jaki sposób mogę dokonać Green Series kolorów podczas y < 15 i czerwony, gdy 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] 
     ] 
    }] 
}); 

Odpowiedz

19

Można to zrobić za pomocą kombinacji threshold i negativeColor opcje serii.

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

Fiddle here.

enter image description here

+0

Perfect, dzięki :) – Adam

+0

jest to również możliwe, aby zmienić kolor tekstu w podpowiedzi na podstawie tej wartości? – Adam

+2

@Adamski: w tym celu prawdopodobnie trzeba będzie dodać niestandardowy formater podpowiedzi. Zobacz przykład: http://jsfiddle.net/YBMny/7/ – Mark

Powiązane problemy