Highcharts 如何在不设置最小值或最大值的情况下启用滚动条

Question

如 this answer 中所述，在高图轴上启用滚动条是一个相当简单的过程，只需启用以下选项即可：

选项 1

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

然后启用滚动条

  scrollbar: {
        enabled: true
    }

选项 2

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

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

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

在我的特殊情况下，问题是设置最小值和最大值，因为数据是动态的，不可能静态地预先分配最小值和最大值。

在此 fiddle 中设置 static max = 4 确实解决了静态数据集的问题，但是当数据点的数量少于 4 个时，这并不适用，例如在这种情况下：

此外，在我的特殊情况下，用户可以在模式中展开图表，当较小的 cards/charts 不足以显示大量数据集时，该模式应该更大并显示更多信息，例如正如 this demo 中所嘲笑的那样。在这种情况下，max = 4 足以满足原始图表的高度，但在展开时就不够了，因为当 max = 4 时它有更多的空白空间。所以如果我们不需要设置 max 会更好，相反，如果我们可以允许滚动像下面这样只设置条形宽度更有意义。

pointWidth: 25
pointPadding: 0.2

但是只设置这个在上面是行不通的fiddle.

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

有没有什么方法可以启用滚动条，而不必设置最小值或最大值，而只设置 pointWidth 或可能是其他东西，并按预期进行滚动工作？

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

Highcharts 如何在不设置最小值或最大值的情况下启用滚动条

Highcharts how to enable scrollbar without setting min or max

javascript

highcharts

angular2-highcharts

选项 1

选项 2