19

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

堆叠的Highcharts

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

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

关于如何固定图表或 y 轴标签宽度的想法?

4

3 回答 3

33

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

于 2013-05-31T08:05:51.687 回答
1

有点hacky的方式,但应该工作:

  • 为两个 xAxis 设置width,例如 400px
  • 为所有轴(xAxis 和 yAxis)设置right,例如 20px

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

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

于 2013-03-25T12:17:19.717 回答
1

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

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

于 2015-04-24T19:55:30.770 回答