Gradient Fill trên Line Chart (Highcharts)

Question

tôi đã không thể tìm thấy tài liệu mà có thể cho tôi kết hợp giao diện của hai biểu đồ sau đây:

Irregular Time Chart
Line/Time Chart with Gradient Fill

Tôi đang cố gắng để đưa một gradient điền vào mỗi 3 dòng trong một biểu đồ thời gian bất thường.

Dưới đây là tôi nhận được: http://jsfiddle.net/WNDUH/

Mọi trợ giúp sẽ được đánh giá cao!

Answer 1

Thử di chuyển đối tượng khu vực vào plotOptions sau đó xác định loại và fillColor của mỗi chuỗi.

EDIT

http://jsfiddle.net/WNDUH/10/

JS:

$(function() { 
    var chart; 
    $(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart : { 
      renderTo : 'container', 
      type : 'spline', 
      backgroundColor : { 
      linearGradient : [0, 0, 0, 400], 
      stops : [ 
       [0, 'rgb(96, 96, 96)'], 
       [1, 'rgb(16, 16, 16)'] 
      ] 
      } 
     }, 
     title : { 
      text : 'Snow depth in the Vikjafjellet mountain, Norway' 
     }, 
     subtitle : { 
      text : 'An example of irregular time data in Highcharts JS' 
     }, 
     xAxis : { 
      type : 'datetime', 
      dateTimeLabelFormats : { // don't display the dummy year 
      month : '%e. %b', 
      year : '%b' 
      } 
     }, 
     yAxis : { 
      title : { 
      text : 'Snow depth (m)' 
      }, 
      min : 0 
     }, 
     tooltip : { 
      formatter : function() { 
      return '<b>' + this.series.name + '</b><br/>' + 
      Highcharts.dateFormat('%e. %b', this.x) + ': ' + this.y + ' m'; 
      } 
     }, 
     plotOptions : { 
      area : { 
      lineWidth : 1, 
      marker : { 
       enabled : false, 
       states : { 
       hover : { 
        enabled : true, 
        radius : 5 
       } 
       } 
      }, 
      shadow : false, 
      states : { 
       hover : { 
       lineWidth : 1 
       } 
      } 
      } 
     }, 
     series : [{ 
      name : 'Winter 2007-2008', 
      type : "area", 
      fillColor : { 
       linearGradient : [0, 0, 0, 300], 
       stops : [ 
       [0, Highcharts.getOptions().colors[0]], 
       [1, 'rgba(2,0,0,0)'] 
       ] 
      }, 
      // Define the data points. All series have a dummy year 
      // of 1970/71 in order to be compared on the same x axis. Note 
      // that in JavaScript, months start at 0 for January, 1 for February etc. 
      data : [ 
       [Date.UTC(1970, 9, 27), 0], 
       [Date.UTC(1970, 10, 10), 0.6], 
       [Date.UTC(1970, 10, 18), 0.7], 
       [Date.UTC(1970, 11, 2), 0.8], 
       [Date.UTC(1970, 11, 9), 0.6], 
       [Date.UTC(1970, 11, 16), 0.6], 
       [Date.UTC(1970, 11, 28), 0.67], 
       [Date.UTC(1971, 0, 1), 0.81], 
       [Date.UTC(1971, 0, 8), 0.78], 
       [Date.UTC(1971, 0, 12), 0.98], 
       [Date.UTC(1971, 0, 27), 1.84], 
       [Date.UTC(1971, 1, 10), 1.80], 
       [Date.UTC(1971, 1, 18), 1.80], 
       [Date.UTC(1971, 1, 24), 1.92], 
       [Date.UTC(1971, 2, 4), 2.49], 
       [Date.UTC(1971, 2, 11), 2.79], 
       [Date.UTC(1971, 2, 15), 2.73], 
       [Date.UTC(1971, 2, 25), 2.61], 
       [Date.UTC(1971, 3, 2), 2.76], 
       [Date.UTC(1971, 3, 6), 2.82], 
       [Date.UTC(1971, 3, 13), 2.8], 
       [Date.UTC(1971, 4, 3), 2.1], 
       [Date.UTC(1971, 4, 26), 1.1], 
       [Date.UTC(1971, 5, 9), 0.25], 
       [Date.UTC(1971, 5, 12), 0] 
      ] 
      }, { 
      name : 'Winter 2008-2009', 
      type : "area", 
      fillColor : { 
       linearGradient : [0, 0, 0, 300], 
       stops : [ 
       [0, Highcharts.getOptions().colors[1]], 
       [1, 'rgba(2,0,0,0)'] 
       ] 
      }, 
      data : [ 
       [Date.UTC(1970, 9, 18), 0], 
       [Date.UTC(1970, 9, 26), 0.2], 
       [Date.UTC(1970, 11, 1), 0.47], 
       [Date.UTC(1970, 11, 11), 0.55], 
       [Date.UTC(1970, 11, 25), 1.38], 
       [Date.UTC(1971, 0, 8), 1.38], 
       [Date.UTC(1971, 0, 15), 1.38], 
       [Date.UTC(1971, 1, 1), 1.38], 
       [Date.UTC(1971, 1, 8), 1.48], 
       [Date.UTC(1971, 1, 21), 1.5], 
       [Date.UTC(1971, 2, 12), 1.89], 
       [Date.UTC(1971, 2, 25), 2.0], 
       [Date.UTC(1971, 3, 4), 1.94], 
       [Date.UTC(1971, 3, 9), 1.91], 
       [Date.UTC(1971, 3, 13), 1.75], 
       [Date.UTC(1971, 3, 19), 1.6], 
       [Date.UTC(1971, 4, 25), 0.6], 
       [Date.UTC(1971, 4, 31), 0.35], 
       [Date.UTC(1971, 5, 7), 0] 
      ] 
      }, { 
      name : 'Winter 2009-2010', 
      type : "area", 
      fillColor : { 
       linearGradient : [0, 0, 0, 300], 
       stops : [ 
       [0, Highcharts.getOptions().colors[2]], 
       [1, 'rgba(2,0,0,0)'] 
       ] 
      }, 
      data : [ 
       [Date.UTC(1970, 9, 9), 0], 
       [Date.UTC(1970, 9, 14), 0.15], 
       [Date.UTC(1970, 10, 28), 0.35], 
       [Date.UTC(1970, 11, 12), 0.46], 
       [Date.UTC(1971, 0, 1), 0.59], 
       [Date.UTC(1971, 0, 24), 0.58], 
       [Date.UTC(1971, 1, 1), 0.62], 
       [Date.UTC(1971, 1, 7), 0.65], 
       [Date.UTC(1971, 1, 23), 0.77], 
       [Date.UTC(1971, 2, 8), 0.77], 
       [Date.UTC(1971, 2, 14), 0.79], 
       [Date.UTC(1971, 2, 24), 0.86], 
       [Date.UTC(1971, 3, 4), 0.8], 
       [Date.UTC(1971, 3, 18), 0.94], 
       [Date.UTC(1971, 3, 24), 0.9], 
       [Date.UTC(1971, 4, 16), 0.39], 
       [Date.UTC(1971, 4, 21), 0] 
      ] 
      } 
     ] 
     }); 
    }); 
}); 

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script> 
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>