如何对齐垂直堆叠的HighCharts图表的左右Y轴？

Question

我有一组HighCharts折线图，它们都在容器中，所有容器的宽度都相同。这些容器在一列中一个堆叠在另一个上面。所有图表都是针对相同的x轴域设计的。然而，因为这些图表中的每一个中的y轴数据的数量级不同，所以在次y轴的左侧和右侧使用的空间量是可变的。结果是，列中每个图表的x轴被可变地压扁，并且相同x值的数据点不会在视觉上对齐。这是一个例子，请注意最底部的图表与上面的两个图表没有对齐：

有没有办法计算或以其他方式设置使用HighCharts API的情况，我可以强制所有图表在所有三个图表的主要和辅助y轴之间占据相同的宽度？

Answer 1

您可以为所有图表设置固定的marginLeft和marginRight：

chart: {
    marginLeft: 50,
    marginRight: 20
}

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

API：

https://api.highcharts.com/highcharts/chart.marginRight

https://api.highcharts.com/highcharts/chart.marginLeft

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

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
        }
    })
});

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

API：https://api.highcharts.com/class-reference/Highcharts.Chart#update