如何使用 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