2013-03-23 161 views
14

我正在构建一个数据演示,其中两个Highcharts图表是垂直堆叠的,旨在共享相同的x轴单位和对齐。像这样:Highcharts中固定的y轴标签宽度

Stacked Highcharts

注意,因为y轴的范围是用于两个图表不同,y轴标签具有不同的宽度,因此图表本身稍有不同的宽度打破了很好的x轴对准。

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

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

+0

的形象出现在这里失踪。你解决了你的问题吗?提出的解决方案是否有效?我有兴趣。 – Jerome 2013-09-27 14:04:40

+0

我有类似的要求来显示具有相同Y轴对齐的多个图表,@TorsteinHønsi解决方案完美地工作。 – rajarshig 2017-01-18 17:37:01

回答

1

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

  • 组两个X轴width,例如400px
  • set for all axis(xAxis and yAxis)right,例如, 20像素

现在y轴应该具有相同的宽度,也同样极端等

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

+0

感谢您的想法! 对于hacky的方式,我不确定我会遵循 - api文档不会显示xAxis或yAxis的任何宽度或正确属性。当我设置宽度:“400px”或类似的xAxis没有绘制图表内容。 双窗格sln看起来好像可以工作,但需要对现有组件进行一些重构,因此非常有帮助,但理想的做法是最好的。 – qfinder 2013-03-26 16:37:14

+0

创建jsFiddle的例子,我们可以工作。它应该工作。 – 2013-03-27 00:46:15

20

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

1

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

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