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

【问题标题】：How can you align the left and right Y-axes of vertically stacked HighCharts charts?如何对齐垂直堆叠的 HighCharts 图表的左右 Y 轴？
【发布时间】：2019-02-18 15:28:03
【问题描述】：

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

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

【问题讨论】：

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

标签： javascript css highcharts

【解决方案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

【讨论】：