如何解决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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。