如何添加框着色器来绘制Highcharts

Question

我有一张Highcharts情节，看起来像这样

表示几个不同系列的时间序列数据。问题是，有时特定系列的数据“不可用”（正如您在上面的紫色系列中看到的那样），因此数据值为NaN。

我希望有一些方法可以在有NaN值的地方“加盖”每个系列 - 我的想法是使用plotBands来表示所有NaN值之间每个系列的相应颜色。但是，我似乎无法弄清楚这是否可行。我已经做了大量的研究，并找到了通过简单地不显示任何内容（如我当前的图表所做的）来处理“缺少点的区域”的演示，例如this demo与此图像：

但是我想象着对NaN值的处理看起来像这样（我为我缺乏艺术性而道歉）

Highcharts可以实现吗？

Answer 1

您必须在聊天中使用加载事件来添加情节带

Fiddle

   chart: {
    type: 'area',
    spacingBottom: 30,
    events: {
             load: function () {
             var series_data=this.series[1].data;//this is second series data
             for(var i=0;i<series_data.length;i++){
                  if(series_data[i].y==null){
                     //adds plot band
                      this.xAxis[0].addPlotBand({  
                          from: i-1, //point back
                          to: i+1,   //point after
                          color: '#0066ff',
                      });
                  }
             }

        }
    }

},