Highcharts / Highstock：如何在另一个系列的数据中心访问值

如何解决Highcharts / Highstock：如何在另一个系列的数据中心访问值

在Highstock中，使用区域范围样式和dataGrouping绘制了一系列密集采样的数据点。现在，我需要访问每个组中心上的值，以将其作为新系列进行叠加绘制，这将用于跟踪第一个中心值。

因此，在配置图表的plotOptions中，我需要访问第一个系列中的分组数据，以便构造第二个系列的数据网格。

这是尚未尝试的尝试：http://jsfiddle.net/jakobvinther/ts10vpyL/

  let center_data = []; // the line data series to be constructed

  window.chart = new Highcharts.StockChart({

    chart: {
      renderTo: 'container',width: 150 // make it narrow in order to get some point grouping
    },series: [{ // first series is arearange spanning min,max of the group
      name: 'data',data: data,type: 'arearange',color: "blue",dataGrouping: {
        forced: true,approximation: function (a) { // using this to construct the center_data
          center_data.push([a[Math.floor(a.length / 2.0)],// y at the center of the group
          this.xData[Math.floor(a.length / 2.0)] // x at the center of the group (not working)
          ]
          );
          return [Math.min(...a),Math.max(...a)];  // like the default approximation for grouped data
        }
      }
    },{ // second series should be the values at the center of the groups.
      name: 'center',// should be one point at the center of the group in the prevIoUs series. 
                      // per default it is first value in the group but I need the central one  
      data: data,**// I don't want this!! I want the center_data !!! **
      type: "line",color: "red"
    }
    ]

解决方法

尝试这种方法：

使用render回调访问groupedData。重绘每张图表后，渲染回调触发器会触发
基于groupedData数组计算newData，
对现有的线系列进行更新，但请记住使用chartRedraw标志来进行此操作，以避免无限循环，

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

chart: {
  renderTo: 'container',events: {
    render() {
      let chart = this,baseSeries = chart.series[0],groupedData = baseSeries.groupedData,newData;

      newData = groupedData.map(value => {
        let x = value.x,y = (value.low + value.high) / 2;


        return [x,y]
      })

      if (chartRedraw) {
        chartRedraw = false;
        chart.series[1].update({
          data: newData,})
      }

      chartRedraw = true;
    }
  }
},

API：https://api.highcharts.com/highcharts/chart.events.render

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