HighCharts - 条形图中的Y轴填充

Question

我使用一种y轴标签样式,其中每个数字左对齐放置在其各自的水平网格线的顶部,如下图所示.

HighCharts中唯一的复杂因素是轴标签有时会与柱形图中的第一列重叠.

更新的演示:有关示例,请参阅此图表:http://jsfiddle.net/NWsgz/1/

我试图使用xAxis.minpadding,但该属性似乎对柱形图没有影响.在Highcharts中有没有办法获得我想要的效果？理论上我可以通过使条形很窄来获得效果,但我正在寻找另一种解决方案.

Answer 1

我想出了一个解决方法,但它并不完美.

1. 使用将yAxis与图表分开 yAxis.offset
2. 使用超长刻度线来模拟向左延伸的网格线

像这样:

yAxis: {
  offset: 30,
  tickLength: 30, // Same value as offset
  tickPosition: "inside",
  tickWidth: 1,
  tickColor: "black", // The same as your gridLine color
  labels: { 
    align: 'left',
    x: 0,
    y: -8 // Position labels above their gridLine/tickMark
  }
}                                   

有关演示,请参阅http://jsfiddle.net/supertrue/NWsgz/2/

为什么它不理想

我希望我的gridLines使用破折号样式(例如dashStyle: 'longdash'),但似乎没有办法将破折号样式应用于刻度线.

我很想知道是否有办法做到这一点,或者更好的解决方法.

Answer 2

它不适用于分类轴 - 在该类型中，轴被分为相同的类别，因此不允许最小/最大填充。

可能的解决方案是使用标准轴，但使用formatterfor axis，请参见：http://jsfiddle.net/NWsgz/4/