使用Highcharts填充灰色区域的数据间隙,

时间:2016-03-17 08:29:37

标签: javascript highcharts

我有一张Highcharts折线图。有时,数据之间存在差距,我想知道是否可以用一些灰色区域填充这些间隙,以便更好地看到没有数据。

由于

编辑:我想要的例子: enter image description here

2 个答案:

答案 0 :(得分:1)

您可以使用xAxis.plotBands填补这些空白。请注意,在渲染图表之前,您需要首先计算null - 点的位置。

以下是一个简单示例:http://jsfiddle.net/hbzoLxnw/

答案 1 :(得分:1)

你可以设置一个填补空白的功能:

  $('#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',
        });
      }
    }
  });

基本上,上面的函数会检测null值,并设置plotBands。 这个想法就在这里,但你可以通过检查值是在开头还是结尾来使它更具通用性,在这种情况下,你不必写i+1i-1而只是{ {1}} 检查示例(jsfiddle):

i