Highcharts - 在同步图表中重置缩放

【问题标题】：Highcharts - Reset zoom in synchronised chartsHighcharts - 在同步图表中重置缩放
【发布时间】：2019-01-04 19:35:32
【问题描述】：

我正在使用 syncExtremes 函数来同步多个图表（及其缩放），如下例所示：

https://jsfiddle.net/pz2bak0u

但是，我遇到了两个我似乎无法解决的问题。第一个是，如果您在不同的图表中多次缩放而不重置，然后单击其中一个 重置缩放 按钮，其他重置缩放按钮会挂起（我希望它们消失，因为它们单击时没有任何功能）。

然后我修改了小提琴以允许 xy 缩放：

https://jsfiddle.net/47dz68Lt

如果您放大第一个图表，然后是第二个，然后是第三个，并尝试取消缩放第一个图表，其他两个保持在一半的缩放状态。

我试过了 chart.xAxis[0].setExtremes(null, null); 但没有任何运气。

是否可以像在 x 缩放示例中一样同时重置所有图表中的所有 xy 缩放？

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

目前您仅重置 x 轴极值，xy 缩放类型，您还需要重置 y 轴极值：

var H = Highcharts;

H.wrap(H.Chart.prototype, 'zoomOut', function(proceed) {

    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    H.charts.forEach(function(chart) {
        if (chart !== this) {
            chart.yAxis[0].setExtremes(null, null, undefined, false);
        }
    }, this);
});

要控制resetZoomButton的显示，可以包装showResetZoom方法，例如：

H.wrap(H.Chart.prototype, 'showResetZoom', function(proceed) {
    var visibleBtn = false;

    H.charts.forEach(function(chart) {
        if (chart.resetZoomButton) {
            visibleBtn = true;
        }
    });

    if (!visibleBtn) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    }
});

现场演示：https://jsfiddle.net/BlackLabel/bg7L1nev/

文档：https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

【讨论】：