Highcharts/HHighstock:如何访问另一系列数据组中心的值

Question

在Highstock中，使用arearage样式和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"
}
]

Answer 1

尝试这种方法：

1. 使用render回调可以访问groupedData。在每次重新绘制图表后呈现回调触发器
2. 基于groupedData数组计算newData
3. 对现有的线序列进行更新，但请记住使用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