使用HighStocks按钮更改窗口位置

Question

我有一个Highstocks图，涵盖了一个月的数据，就像这样：

目标是添加一个按钮，以允许用户在特定时间段（例如一天）执行缩放后，将窗口移动相同的时间段。

插图：放大一天后的图形

点击所需的“ +1天”按钮后

图

我想我必须将一个事件添加到图表并将其链接到HTML按钮。我是JavaScript和Highcharts的新手，我看不到可以在哪些参数上移动缩放窗口。

有什么想法吗？

Answer 1

当然可以实现它。为此，您需要定义一个逻辑，该逻辑将计算一些我将在下面描述的东西。

让我们假设，如果可能的话（即，如果该范围不大于您的最大数据值），则该按钮始终应增大右侧的范围。如果无法在右侧增加范围，请让所选范围与最大可能值（最大数据）对齐，然后尝试在左侧添加此范围。最后，当不可能将电流范围扩大一倍时，只需将极端值设置为等于数据的最大值和最小值。

要以最佳方式实现它，可以使用Axis.getExtremes()和setExtremes()函数。

我制作了功能如上所述的函数，所以请看一下它：

btn.onclick = function() {
        var axis = chart.xAxis[0]
        var ext = axis.getExtremes()
        // Calculate by what range should axis range be increased. 
        var range = ext.max - ext.min 

        // Add calculated range to right
        var addRight = function() {
            axis.setExtremes(ext.min, ext.max + range)
        }
        // Add calculated range to left
        var addLeft = function() {
            axis.setExtremes(ext.min - range, ext.max)
        }
        // Align range to possible maximum data
        var alignToRightEdge = function() {
            axis.setExtremes(ext.min, ext.dataMax)
        }

        // Increase range on right side if it is possible,
        // otherwise add maximum possible value on the right side
        // and increase on the left. Finally, set maximum possible
        // extremes (basing on current data) on whole xAxis.
        if (ext.max + range < ext.dataMax) {
            addRight()
        } else if (ext.min - range > ext.dataMin) {
            alignToRightEdge()
            addLeft()
        } else {
            axis.setExtremes(ext.dataMin, ext.datamax)
        }
    }

实时示例： https://jsfiddle.net/6jpn7zs2/

API参考：

https://api.highcharts.com/class-reference/Highcharts.Axis#getExtremes

https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes