如何启用y轴平移，同时缩放到highcharts?

I want to move in Y-Axis while i am in zoom in charts Right now i am able to move on X-Axis while zooming

我想在y轴上移动，当我在缩放图表时我现在可以在缩放的同时在x轴上移动

Bellow is the code for panning

下面是平移的代码

chart: {
        renderTo: 'container1',
        type: 'column',
        zoomType: 'xy',
        panning: true,
        panKey: 'shift',}

Any help would be appreciated

如有任何帮助，我们将不胜感激

2 个解决方案

#1

Possible solutions:

可能的解决方式:

You could set vertical scrollbars in Highstock.

您可以在Highstock中设置垂直滚动条。
```
    yAxis: {
        scrollbar: {
            enabled: true
        }
    },
```

Article: http://www.highcharts.com/news/224-scrollbars-for-any-axis

文章:http://www.highcharts.com/news/224-scrollbars-for-any-axis

Demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/stock/yaxis/scrollbar/

演示:http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/stock/yaxis/scrollbar/

Use a wrapper code (included below) based on the plugin suggested by Barbara that allows zooming (xy) and panning (xy).
根据Barbara建议的插件使用包装代码(包含在下面)，允许缩放(xy)和平移(xy)。

The wrapper code:

包装器代码:

(function (H) {
    H.wrap(H.Chart.prototype, 'pan', function (proceed) {
        var chart = this,
            hoverPoints = chart.hoverPoints,
            doRedraw,
            e = arguments[1],
            each = H.each;

        // remove active points for shared tooltip
        if (hoverPoints) {
            each(hoverPoints, function (point) {
                point.setState();
            });
        }

        var mousePosX = e.chartX,
            mousePosY = e.chartY,
            xAxis = chart.xAxis[0],
            yAxis = chart.yAxis[0],
            startPosX = chart.mouseDownX,
            startPosY = chart.mouseDownY,
            halfPointRangeX = (xAxis.pointRange || 0) / 2,
            halfPointRangeY = (yAxis.pointRange || 0) / 2,
            extremesX = xAxis.getExtremes(),
            newMinX = xAxis.toValue(startPosX - mousePosX, true) + halfPointRangeX,
            newMaxX = xAxis.toValue(startPosX + chart.plotWidth - mousePosX, true) - halfPointRangeX,
            extremesY = yAxis.startingExtremes,
            newMaxY = yAxis.toValue(startPosY - mousePosY, true) + halfPointRangeY,
            newMinY = yAxis.toValue(startPosY + chart.plotHeight - mousePosY, true) - halfPointRangeY;

        if (xAxis.series.length && newMinX > Math.min(extremesX.dataMin, extremesX.min) && newMaxX < Math.max(extremesX.dataMax, extremesX.max) && newMinY > Math.min(extremesY.dataMin, extremesY.min) && newMaxY < Math.max(extremesY.dataMax, extremesY.max)) {
            xAxis.setExtremes(newMinX, newMaxX, false, false, {
                trigger: 'pan'
            });
            yAxis.setExtremes(newMinY, newMaxY, false, false, {
                trigger: 'pan'
            });
            doRedraw = true;
        }

        chart.mouseDownX = mousePosX;
        chart.mouseDownY = mousePosY;// set new reference for next run

        if (doRedraw) {
            chart.redraw(false);
        }
    });

}(Highcharts));

Starting extremes should be set in chart's callback or load event of a chart like:

在图表的回调或加载事件中设置开始的极端值，如:

    }, function(chart){
        chart.yAxis[0].startingExtremes = chart.yAxis[1].getExtremes();
    });

Demo: http://jsfiddle.net/Lxjqed02/3/

演示:http://jsfiddle.net/Lxjqed02/3/

#2

-1

Y-Axis panning isn't built into HighCharts. But, there is a plugin that does the trick: http://www.highcharts.com/plugin-registry/single/27/Y-Axis%20Panning The examples show it working with highStock, but it works equally well with highCharts.

y轴平移不是建立在高海图中。但是，有一个插件可以做到这一点:http://www.highcharts.com/plugin- registry/single/27/y axis%20panning示例显示它可以与highStock一起工作，但是它与highCharts一样工作得很好。

#1