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

时间:2019-02-18 05:17:56

标签: javascript css highcharts

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

enter image description here

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

1 个答案:

答案 0 :(得分:1)

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

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