问题描述
在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