使用Highcharts用灰色区域填充数据空白，

Question

I've a Highcharts Line Chart. Sometimes, there's a gap between the data and I wonder whether it's possible to fill these gaps with some gray area so it's better visible that there are no data.

Thanks

Edit: Example of what I want to have:

Answer 1

You can use xAxis.plotBands to fill those gaps. Note you need to calculate where you have null -points in a first place, before rendering a chart.

Here is a simple example for you: http://jsfiddle.net/hbzoLxnw/

Answer 2

you can set up a function to fill the gap:

  $('#button').click(function() {
    for (i = 0; i < chart.yAxis[0].series[1].yData.length; i++) {
      if (chart.yAxis[0].series[1].yData[i] == null) {
        chart.xAxis[0].addPlotBand({
          from: i - 1,
          to: i + 1,
          color: '#FCFFC5',
        });
      }
    }
  });

Basically, the function above detect the null value, and sets up a plotBands . The idea is here, but you can make it more versatile by checking if the value is at the beginning or the end, in this case, you don't have to write i+1 or i-1 but just i Check the example ( jsfiddle ):

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'area',
      spacingBottom: 30
    },
    title: {
      text: 'Fruit consumption *'
    },
    subtitle: {
      text: '* Jane\'s banana consumption is unknown',
      floating: true,
      align: 'right',
      verticalAlign: 'bottom',
      y: 15
    },
    legend: {
      layout: 'vertical',
      align: 'left',
      verticalAlign: 'top',
      x: 150,
      y: 100,
      floating: true,
      borderWidth: 1,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    xAxis: {
      categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
    },
    yAxis: {
      title: {
        text: 'Y-Axis'
      },
      labels: {
        formatter: function() {
          return this.value;
        }
      }
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.series.name + '</b><br/>' +
          this.x + ': ' + this.y;
      }
    },
    plotOptions: {
      area: {
        fillOpacity: 0.5
      },
    },
    credits: {
      enabled: false
    },
    series: [{
      name: 'John',
      data: [0, 1, 4, 4, 5, 2, 3, 7]
    }, {
      name: 'Jane',
      data: [1, 0, 3, null, 3, 1, 2, 1]
    }]
  });


  // the button action
  var chart = $('#container').highcharts();

  $('#button').click(function() {
    for (i = 0; i < chart.yAxis[0].series[1].yData.length; i++) {
      if (chart.yAxis[0].series[1].yData[i] == null) {
        chart.xAxis[0].addPlotBand({
          from: i - 1,
          to: i + 1,
          color: '#FCFFC5',
        });
      }
    }
  });
});