Zwei verschiedene Schwellenwerte in HighCharts 3.0

Question

Mit HighCharts 3.0 ist es nun möglich, Farben oberhalb und unterhalb eines Schwellenwerts anzuzeigen. Wie in diesem Beispiel:

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

folgenden Code:

$(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' 
      }] 

     }); 
    }); 

}); 

Ist es möglich, eine andere Schwelle mit einer dritten Farbe zu haben, wie dies zum Beispiel:

Dank im Voraus für Ihre Hilfe.

Answer 1

Es ist tatsächlich möglich, wenn Sie die Daten Plotten zweimal nichts ausmacht.

$('#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

Leider ist diese Option nicht möglich, aber Sie können Ihren Vorschlag in http://highcharts.uservoice.com anfordern und dafür stimmen.

Answer 3

By the way, kann ich versuchen, einen Handlungsstrang verwenden, wie folgt aus:

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

Ein Merkmal dieses Problem zu lösen, ohne "Hacks" wurde in Highcharts 4.1.0 (Februar 2015), die so genannte Zonen (API) zugegeben. Das gegebene Problem kann wie folgt gelöst werden, Zonen mit:

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 
     }] 
    } 
} 

Siehe this JSFiddle demonstration, wie es aussieht.