highcharts - 能够为绘制的日期期间应用彩色区域

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供你参考。

希望这可以帮助。