Javascript 如何对齐垂直堆叠海图的左右Y轴？

我有一组HighCharts折线图，它们位于宽度相同的容器中。这些容器一个接一个地堆放在一列中。所有图表都是针对相同的x轴域设计的。但是，由于每个图表中y轴数据的数量级不同，因此主y轴左侧和次y轴右侧使用的空间量是可变的。结果是，列中每个图表的x轴都会发生不同程度的挤压，相同x值的数据点在视觉上不会对齐。下面是一个示例，请注意，最下面的图表与上面的两个图表不对齐：

---

是否有一种方法可以使用HighCharts API计算或设置一种情况，在这种情况下，我可以强制所有图表在所有三个图表的主y轴和次y轴之间占据相同的宽度？

您可以为所有图表设置固定的

marginLeft

和

marginRight

：

chart: {
    marginLeft: 50,
    marginRight: 20
}

现场演示：

API:

或者，您可以动态计算边距：

charts.forEach(function(chart) {
    maxPlotRight = Math.max(
        chart.chartWidth - (chart.plotLeft + chart.plotSizeX),
        maxPlotRight
    );
    maxPlotLeft = Math.max(chart.plotLeft, maxPlotLeft);
});

charts.forEach(function(chart) {
    chart.update({
        chart: {
            marginLeft: maxPlotLeft,
            marginRight: maxPlotRight + 10
        }
    })
});

现场演示：

---

API:

我们是否可以对所有3个图表的x轴上的点进行规格化，以确保在规格化后，所有三个图表中的每一对都具有相同的距离