在繪製日期期間應用彩色區域的能力

Question

在此示例JFiddle Link中。我想爲繪圖/選定日期應用彩色區域。例如，如果我選擇點1到10，則應突出顯示這些點的背景。

var $report = $('#report'); 

// create the chart 
var chart = new Highcharts.Chart({ 
chart: { 
    renderTo: 'container', 
    events: { 
     selection: function(event) { 
      if (event.xAxis) { 
       var min = Math.ceil(event.xAxis[0].min), 
        max = Math.ceil(event.xAxis[0].max), 
        data = this.series[0].data, 
        list = []; 

       $('#report').empty(); 

       for(i=min; i<max; i++) 
        list.push('<li>x: '+data[i].x+', y: '+data[i].y+'</li>'); 

       $('#report').append(list.join('')); 

      } 
      return false; 
     } 
    }, 
    zoomType: 'x' 
}, 
xAxis: { 
}, 

series: [{ 
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6,  54.4]   
}] 
}); 

Answer 1

所有你需要做的就是添加PlotBand在selection事件。

chart.xAxis[0].removePlotBand('plot-band-1'); 
       chart.xAxis[0].addPlotBand({ 
        from: min, 
        to: max, 
        color: '#FCFFC5', 
        id: 'plot-band-1' 
       }); 

例here。 API供您參考。

希望這會有所幫助。