Highcharts如何启用滚动条而不设置最小值或最大值

Question

正如this answer中所提到的，在高图轴上启用滚动条是一个简单的启用以下选项的简单过程：

选项1

您将需要使用highstock.js而不是渲染股票图表，您必须呈现高图。

然后启用滚动条

  scrollbar: {
        enabled: true
    }

选项2

尝试将min和max属性设置为x-axis。

xAxis: {
            categories: [...],
            min: 0,
            max:9
}

在选项1中错误地呈现的一件事是，您还必须执行一个额外的步骤来设置最小/最大值，即仅启用滚动条本身是不够的。

在我的特定情况下的问题是设置最小值和最大值，因为数据是动态的，并且不可能静态地指定最小值和最大值。

在此fiddle中设置静态max = 4确实解决了静态数据集的问题，但是当数据点的数量小于4时，这不能很好地工作，例如，在这种情况下：

同样在我的特定情况下，用户可以在模式中扩展图表，当较小的卡/图表不足以显示大量数据集时，该模式应该更大并且显示更多信息。在this demo嘲笑。在这种情况下，max = 4对于原始图表高度是足够的，但是在展开时则不足，因为当max = 4时它有更多的空白空间。所以如果我们不需要设置最大值会更好，相反如果我们可以允许滚动通过设置像下面的条宽度更有意义。

pointWidth: 25
pointPadding: 0.2

但只设置这个在上面的小提琴中不起作用。

在上面的stackBlitz gif中没有完全启用P.S滚动，但它应该在提供的blitz演示中正常工作。

有没有办法我们可以启用滚动条而不必设置min或max而不是setWidth或者可能是其他东西并且滚动按预期工作？

Answer 1

您需要使用max属性，但您可以动态计算和设置它：

function setAxisMax() {
    var pointWidth = this.series[0].options.pointWidth,
        padding = 20;

    this.update({
        xAxis: {
            max: this.plotHeight / (pointWidth + padding) - 1
        }
    }, true, true, false);
}

Highcharts.chart('container', {
    chart: {
        ...,
        events: {
            load: setAxisMax
        }
    },
    ...
});

现场演示：http://jsfiddle.net/BlackLabel/evmkqrcw/

API参考：https://api.highcharts.com/highcharts/xAxis.max