javascript - 如何对齐垂直堆叠的 HighCharts 图表的左右 Y 轴?
问题描述
我有一组 HighCharts 折线图,它们位于所有具有相同宽度的容器中。这些容器一个接一个地堆叠成一列。所有图表都在设计上针对相同的 x 轴域。但是,由于每个图表中 y 轴数据的数量级不同,因此主要 y 轴左侧和次要 y 轴右侧使用的空间量是可变的。结果是列中每个图表的 x 轴被不同程度地挤压,并且相同 x 值的数据点在视觉上没有对齐。这是一个示例,请注意最底部的图表未与其上方的两个图表对齐:
有没有办法使用 HighCharts API 计算或设置一种情况,我可以强制所有图表在所有三个图表的主要和次要 y 轴之间占据相同的宽度?
解决方案
您可以为所有图表设置固定marginLeft
和:marginRight
chart: {
marginLeft: 50,
marginRight: 20
}
现场演示:http: //jsfiddle.net/BlackLabel/xsuc7aeg/
接口:
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
推荐阅读
- python - 如果存在于python数据框中,如何获得带有NULL字符串的组合列
- apache-spark - pyspark中的增量批处理
- symfony - 为什么只在 dev 中需要 webpack encore
- c# - 如何在 Blazor 中发送大小超过 Signalr 消息大小限制的数据?
- python - re.split 需要在开头和结尾用特定符号分隔
- angular - Angular 库组件在服务提供者可注入时抛出错误
- java - 为什么我的应用程序无法创建 bean?
- python - 制作一个可以检查数字字符串中是否存在特定数字的函数
- ios - SwiftUI - 无法在列表中搜索和切换
- php - 在 laravel 查询中根据用户 ID 获取推荐用户