Dwa różne progi w HighCharts 3.0

Question

W HighCharts 3.0 można teraz wskazać kolory powyżej i poniżej jednego progu. Jak w poniższym przykładzie:

http://jsfiddle.net/highcharts/YWVHx/

podany kod:

$(function() { 
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) { 

     $('#container').highcharts({ 

      chart: { 
       type: 'arearange' 
      }, 

      title: { 
       text: 'Temperature variation by day' 
      }, 

      xAxis: { 
       type: 'datetime' 
      }, 

      yAxis: { 
       title: { 
        text: null 
       } 
      }, 

      tooltip: { 
       crosshairs: true, 
       shared: true, 
       valueSuffix: '°C' 
      }, 

      legend: { 
       enabled: false 
      }, 

      series: [{ 
       name: 'Temperatures', 
       data: data, 
       color: '#FF0000', 
       negativeColor: '#0088FF' 
      }] 

     }); 
    }); 

}); 

Czy to możliwe, aby mieć inny próg z trzeciego koloru, jak to na przykład:

Dzięki z góry za pomoc.

Answer 1

To rzeczywiście jest możliwe, jeśli nie przeszkadza wykreślenie danych dwukrotnie.

$('#container').highcharts({ 

     chart: { 
      type: 'arearange' 
     }, 

     title: { 
      text: 'Temperature variation by day' 
     }, 

     xAxis: { 
      type: 'datetime' 
     }, 

     yAxis: { 
      title: { 
       text: null 
      } 
     }, 

     tooltip: { 
      crosshairs: true, 
      shared: true, 
      valueSuffix: '°C' 
     }, 

     legend: { 
      enabled: false 
     }, 

     series: [{ 
      name: 'Temperatures', 
      threshold : 0, 
      data: data, 
      color: 'orange', 
      negativeColor: 'blue' 
     }, 
     { 
      name: 'Temperatures', 
      threshold : 10, 
      data: data, 
      color: 'red', 
      negativeColor: 'transparent' 
     }] 
    }); 
}); 

http://jsfiddle.net/YWVHx/97/

Answer 2

Niestety ta opcja nie jest możliwa, ale możesz poprosić o swoją sugestię pod numerem http://highcharts.uservoice.com i zagłosować na nią.

Answer 3

Nawiasem mówiąc, mogę spróbować użyć fabuła, tak:

yAxis: { 
       title: { 
        text: 'My Chart' 
       }, 
       plotLines: [{ 
        id: 'limit-min', 
        dashStyle: 'ShortDash', 
        width: 2, 
        value: 80, 
        zIndex: 0, 
        label : { 
         text : '80% limit' 
        } 
       }, { 
        id: 'limit-max', 
        color: '#008000', 
        dashStyle: 'ShortDash', 
        width: 2, 
        value: 90, 
        zIndex: 0, 
        label : { 
         text : '90% limit' 
        } 
       }] 
      }, 

Answer 4

Cechą rozwiązać ten problem bez dodano Highcharts 4.1.0 (luty 2015) "hacków", zwane strefami (API). Dany problem można rozwiązać w ten sposób, za pomocą stref:

plotOptions: { 
    series: { 
     zones: [{ 
      value: 0, // Values up to 0 (not including) ... 
      color: 'blue' // ... have the color blue 
     },{ 
      value: 10, // Values up to 10 (not including) ... 
      color: 'orange' // ... have the color orange 
     },{ 
      color: 'red' // Values from 10 (including) and up have the color red 
     }] 
    } 
} 

Zobacz this JSFiddle demonstration jak to wygląda.