如何在 highcharts 上动态设置缩放级别？答案

【问题标题】：How dynamically set the zoom level on highcharts?如何在 highcharts 上动态设置缩放级别？
【发布时间】：2021-01-19 09:14:20
【问题描述】：

我希望能够为 highcharts 散点图动态设置缩放级别（以保持缩放级别）。目前文档建议使用setExtremes event method。但是问题是这不允许图表重置为原始极端。我在这个问题的其他答案中看到有一个 axis zoom 函数，但是我似乎无法在文档中找到它，也无法从代码中调用它。由于 highcharts 库相对较新，因此任何帮助/指导将不胜感激。

【问题讨论】：

标签： javascript angular charts highcharts

【解决方案1】：

你不需要使用setExtremes事件回调函数，而是setExtremes方法：

document.getElementById('zoomX').addEventListener('click', function() {
    chart.xAxis[0].setExtremes(2, 5);
});

document.getElementById('zoomY').addEventListener('click', function() {
    chart.yAxis[0].setExtremes(4, 14);
});

现场演示： http://jsfiddle.net/BlackLabel/0oLhr176/

API 参考： https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

【讨论】：

感谢您这么快回来！不幸的是，这不是我想要的。您提供的解决方案设置了我所期望的极端，但是它不允许将极端设置回退/重置。例如，通常使用高图，您可以选择图表上的区域进行放大，您将获得默认的重置缩放。但是，当您使用 setExtremes 方法时，图表的极值有点难以设置，因此它不再知道原始值。希望我解释得更好一点？
嗨@Eskimo，感谢您的描述，请查看此示例：jsfiddle.net/BlackLabel/uhsdnofb
再次感谢您的建议，但我正在寻找基于 highcharts 的解决方案，而不是创建单独的按钮和逻辑等 - 如果它存在 stackoverflow.com/questions/15550510/… 和 github.com/highcharts/highcharts/issues/1594 这些附加帖子基本上就是我的在这里寻找。一种 Highcharts 方法，允许自定义缩放（同时仍保留原始极端），理想情况下无需编写自定义 html 和逻辑。
好的，也许你想使用地图中的mapNavigation，例如：jsfiddle.net/BlackLabel/y0x1de8u？
再次感谢，但这仍然不是我想要的——使用 mapNavigation 并不能真正解决 Highcharts 没有前一篇文章中提到的程序化缩放功能的问题。现在我假设这种类型的功能在 highcharts 上不存在，因为我已经阅读了多个 stackoverflow 和 highcharts 支持帖子的人请求类似的功能。