Highcharts图带到电子表格数据中的最后一个日期时间值

Question

我建立了带有绘图带的柱状图

        plotBands: [{ 
                  zIndex: 1,
                  to: Date.UTC(2020,4,6),
                  from: Date.UTC(2020,3,30),
                  color: 'rgb(217, 217, 217, .4)',

    }],

以及x值具有不同颜色的区域：

                    zones: [{
                        value: Date.UTC(2020,3,30),
                        color: '#003f6e'
                    }, {
                        color: '#999999'
                    }]

请参阅fiddle

现在，我希望两者都覆盖数据中最近7天的范围。数据来自Google电子表格，并且会不断更新。我尝试过这样的事情：

        plotBands: [{ 
                  zIndex: 1,
                  to: this.series.data[this.series.data.length-1].x,
                  from: this.series.data[this.series.data.length-7].x,
                  color: 'rgb(217, 217, 217, .4)',

    }],

我该怎么办？

Answer 1

您可以使用data.complete回调通过更新xAxis和series来动态设置plotLines和区域。

演示：https://jsfiddle.net/BlackLabel/m0vdtjzo/

complete() {
  let xColumn = this.columns[0];

  chart.xAxis[0].update({
    plotBands: [{
      zIndex: 1,
      to: xColumn[xColumn.length - 1],
      from: xColumn[xColumn.length - 7],
      color: 'rgb(217, 217, 217, .4)',
    }]
  })

  chart.series[0].update({
    zones: [{
      value: xColumn[xColumn.length - 7],
      color: '#003f6e'
    }, {
      color: '#999999'
    }]
  })
}

API：https://api.highcharts.com/highcharts/data.complete

API：https://api.highcharts.com/class-reference/Highcharts.Axis#update