修复了Highcharts中的y轴标签宽度

Question

我正在构建一个数据表示，其中两个Highcharts图表垂直堆叠，旨在共享相同的x轴单位和对齐。像这样：

请注意，由于两个图表的y轴范围不同，因此y轴标签的宽度不同，因此图表本身的宽度略有不同，从而破坏了良好的x轴对齐。

能够固定图表的宽度（或相反的y轴标签）以确保两个图表对齐是很棒的。我探索了api并且直接在各种生成的元素上设置样式但没有运气。似乎可以使用自定义标签格式化程序来实现这一目标，但是库存格式化程序（如果我没有定义任何自定义）可以很好地缩写大数字等。

关于如何修复图表或y轴标签宽度的想法？

Answer 1

如果设置chart.marginLeft选项，它将覆盖自动尺寸标签，以便Y轴对齐。

Answer 2

有点hacky的方式，但应该工作：

• 为xAxis width设置，例如400像素
• 为所有轴（xAxis和yAxis）right设置，例如20像素

现在yAxis应该具有相同的宽度和相同的极端等。

另一个（甚至更好）解决方案是为Highcharts使用两个窗格。它的工作方式与Highstock完全相同，请参见示例：http://www.highcharts.com/stock/demo/candlestick-and-volume

Answer 3

这是一个迟到的答案，但您现在可以在同一个Highcharts对象中执行多个图表。使用此方法时，您不必手动尝试强制Y轴对齐，因为Highcharts会为您完成所有工作。

http://www.highcharts.com/demo/combo