使用缩放后 Highstock 返回平移

问题描述

你好 Highstock 社区，

如何关闭缩放功能，以便用户在使用 highstock 工具放大后可以再次平移图形？

例如查看 this highstock sample，我们的用户喜欢执行以下操作：

1. 使用左侧的缩放按钮放大
2. 再次平移（无法再次缩放。）

感谢您的帮助！

Temp = x.fields.FirstOrDefault(a => a.label == "Label")?.Value

Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlcv.json',function (data) {

    // split the data set into ohlc and volume
    var ohlc = [],volume = [],dataLength = data.length,i = 0;

    for (i; i < dataLength; i += 1) {
        ohlc.push([
            data[i][0],// the date
            data[i][1],// open
            data[i][2],// high
            data[i][3],// low
            data[i][4] // close
        ]);

        volume.push([
            data[i][0],// the date
            data[i][5] // the volume
        ]);
    }

    Highcharts.stockChart('container',{
        yAxis: [{
            labels: {
                align: 'left'
            },height: '80%',resize: {
                enabled: true
            }
        },{
            labels: {
                align: 'left'
            },top: '80%',height: '20%',offset: 0
        }],tooltip: {
            shape: 'square',headerShape: 'callout',borderWidth: 0,shadow: false,positioner: function (width,height,point) {
                var chart = this.chart,position;

                if (point.isHeader) {
                    position = {
                        x: Math.max(
                            // Left side limit
                            chart.plotLeft,Math.min(
                                point.plotX + chart.plotLeft - width / 2,// Right side limit
                                chart.chartWidth - width - chart.marginRight
                            )
                        ),y: point.plotY
                    };
                } else {
                    position = {
                        x: point.series.chart.plotLeft,y: point.series.yAxis.top - chart.plottop
                    };
                }

                return position;
            }
        },series: [{
            type: 'ohlc',id: 'aapl-ohlc',name: 'AAPL Stock Price',data: ohlc
        },{
            type: 'column',id: 'aapl-volume',name: 'AAPL Volume',data: volume,yAxis: 1
        }],responsive: {
            rules: [{
                condition: {
                    maxWidth: 800
                },chartOptions: {
                    rangeSelector: {
                        inputEnabled: false
                    }
                }
            }]
        }
    });
});

#container {
    max-height: 800px;
    min-height: 75vh;
}

解决方法

更新 #1

现在我想我更了解你了。

这是你想要的吗？ 可以使用工具栏中的缩放工具，然后使用“alt”+鼠标单击并拖动进行平移。

https://jsfiddle.net/marensiusb/rjs60a37/3/

---

如果我理解正确，您想：

1. 放大
2. 盘
3. 然后缩小

您可以使用 rangeSelector (1m,3m,6,YTD,1y,all) 放大，然后使用 rangeSelector ('ALL') 平移和缩小。

您还可以禁用 rangeSelector 并启用 chart.zoom 和 chart.pan 然后用户可以使用 alt + 鼠标平移并使用“重置缩放”按钮重置。

https://jsfiddle.net/marensiusb/z6tn28w4/4/