Hai ngưỡng khác nhau trong HighCharts 3.0

Question

Với HighCharts 3.0, giờ đây bạn có thể chỉ ra các màu trên và dưới một ngưỡng. Giống như ví dụ sau:

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

Tiếp theo mã:

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

     }); 
    }); 

}); 

Có thể có một ngưỡng với một màu thứ ba, như thế này ví dụ:

Cảm ơn trước sự giúp đỡ của bạn.

Answer 1

Nó thực sự là có thể nếu bạn không nhớ âm mưu dữ liệu hai lần.

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

Rất tiếc, không thể tùy chọn này, nhưng bạn có thể yêu cầu đề xuất của mình theo số http://highcharts.uservoice.com và bỏ phiếu cho nó.

Answer 3

Bằng cách này, tôi có thể thử sử dụng một cốt truyện, như thế này:

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

Một tính năng để giải quyết này mà không có "hack" được thêm vào trong Highcharts 4.1.0 (tháng 2 năm 2015), khu gọi là (API). Vấn đề đã cho có thể được giải quyết như thế này, sử dụng các vùng:

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

Xem this JSFiddle demonstration trông như thế nào.