同步两个 highstock 图表，跨两个选项卡的相同 rangeSelector

Question

No code to this question.

请看我的jsFiddle：

http://jsfiddle.net/MrSnrub/w8rem1be/

我有两个 Highstock (Highcharts) 图表，每个 jQuery UI 选项卡上有一个。我希望这两个图表具有同步的范围选择器、导航器和滚动条。换句话说，改变一个会导致另一个发生相同的变化。如果移动 "Stock Prices" 图表的导航器，则 "Percentage Change" 图表的导航器将相应更改，两者永远不会不同步。我该怎么做？

Answer 1

如果有人正在寻找解决方案 - 我已经在 Highcharts 论坛上回答了这个问题：click

快速总结：

可以通过获取和设置极值来实现导航器和滚动条的同步

ex = oldChart.xAxis[0].getExtremes();
newChart.xAxis[0].setExtremes(ex.min, ex.max, true, false);

可以通过操作按钮的状态来实现同步rangeSelector

var newRangeSelector = newChart.rangeSelector,
    newSelected = newRangeSelector.selected,
    oldSelected = oldChart.rangeSelector.selected;

if (newSelected !== null) {
    newRangeSelector.buttons[newSelected].setState(0);
}

if (oldSelected !== null) {
    newRangeSelector.buttons[oldSelected].setState(2);
    newRangeSelector.setSelected(oldSelected);
}

没有必要让隐藏的图表总是更新 - 第一个原因是更好的性能，其次在隐藏的 DOM 元素上的项目的计算位置存在一些错误 - 所以激活相关选项卡时应更新图表 - 可以通过在 jquery 选项卡激活事件中设置回调来实现。
```
$( "#tabs" ).tabs({
    activate: function (e, ui) { }
)};
```

完整示例：https://jsfiddle.net/w8rem1be/35/

同步两个 highstock 图表，跨两个选项卡的相同 rangeSelector

Synchronize two highstock charts, same rangeSelector across two tabs

jquery

jquery-ui

highcharts

highstock