如何使用 Highcharts 使用一个范围选择器组合多个图形和控件?
How can you combine multiple graphs and control with one range selector with Highcharts?
我在一页上有多个图表。这些图表的目标是将图表同步到一个范围选择器(最好是允许预定义时间选择 ~1 天、~7 天、~30 天等的自定义选择器)。类似于Grafana的东西和它的布局。
想象一下下面的布局
---- Range Selector ----
||||||||||||||||||||||||
------- Graph 1 --------
||||||||||||||||||||||||
------- Graph 2 --------
我已经在 Highcharts 论坛和文档中搜索了答案,除了使用 master-detail
API Reference
之外没有找到任何其他内容
如果有人尝试过类似的事情,或者看到另一个框架可以更好地帮助我实现我希望采取的方向,我们将不胜感激。
您需要做的就是使用 setExtremes
方法将导航器范围与 x 轴极值连接起来。以下示例使用的是 Highstock 的导航器。
xAxis: {
...,
events: {
afterSetExtremes: function(e) {
chart1.xAxis[0].setExtremes(e.min, e.max, true, false);
chart2.xAxis[0].setExtremes(e.min, e.max, true, false);
}
}
}
现场演示: http://jsfiddle.net/BlackLabel/4Lfegyqa/
API参考:https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
我在一页上有多个图表。这些图表的目标是将图表同步到一个范围选择器(最好是允许预定义时间选择 ~1 天、~7 天、~30 天等的自定义选择器)。类似于Grafana的东西和它的布局。
想象一下下面的布局
---- Range Selector ----
||||||||||||||||||||||||
------- Graph 1 --------
||||||||||||||||||||||||
------- Graph 2 --------
我已经在 Highcharts 论坛和文档中搜索了答案,除了使用 master-detail
API Reference
如果有人尝试过类似的事情,或者看到另一个框架可以更好地帮助我实现我希望采取的方向,我们将不胜感激。
您需要做的就是使用 setExtremes
方法将导航器范围与 x 轴极值连接起来。以下示例使用的是 Highstock 的导航器。
xAxis: {
...,
events: {
afterSetExtremes: function(e) {
chart1.xAxis[0].setExtremes(e.min, e.max, true, false);
chart2.xAxis[0].setExtremes(e.min, e.max, true, false);
}
}
}
现场演示: http://jsfiddle.net/BlackLabel/4Lfegyqa/
API参考:https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes