我有同步图表和同步缩放。我想逐步缩小（不只是回到1：1）。有没有人有可行的例子？

Question

我目前正在按如下方式同步我的图表：

$('#container').bind('mousemove touchmove', function (e) {
    var chart,
        point,
    points,
        i;

    for (i = 0; i < Highcharts.charts.length; i++) {
        chart = Highcharts.charts[i];
        e = chart.pointer.normalize(e); // Find coordinates within the chart
        points = []; 

            Highcharts.each(chart.series, function(series){
            point = series.searchPoint(e, true);

        if (point) {
                points.push(point);
            point.onMouseOver(); // Show the hover marker
          }
        });

        if (points.length > 0) {
            chart.tooltip.refresh(points); // Show the tooltip
            chart.xAxis[0].drawCrosshair(e, points[0]); // Show the crosshair
        }

    }

}）;

// ============================================== ===================================

// *覆盖重置功能，我们不需要隐藏工具提示和十字准线。// *通过setExtremes事件处理程序同步缩放。

Highcharts.Pointer.prototype.reset = function（）{};

// ============================================== ======================

function syncExtremes（e）{var thisChart = this.chart;

    if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
        Highcharts.each(Highcharts.charts, function (chart) {
            if (chart !== thisChart) {
                if (chart.xAxis[0].setExtremes) { // It is null while updating
                    chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
                }
            }
        });
    }
}

Answer 1

您可以计算中间极值并通过setExtremes方法进行设置，例如：

    document.getElementById('zoomOut').addEventListener('click', function() {
        var chart = Highcharts.charts[0],
            yAxis = chart.yAxis[0],
            xAxis = chart.xAxis[0],
            yDistance = (yAxis.max - yAxis.min) / 2,
            xDistance = (xAxis.max - xAxis.min) / 2;

        yAxis.setExtremes(yAxis.min - yDistance, yAxis.max + yDistance);
        xAxis.setExtremes(xAxis.min - xDistance, xAxis.max + xDistance);
    });

---

实时演示： http://jsfiddle.net/BlackLabel/9vxgpn4z/

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