javascript HighCharts - 条形图中的 Y 轴填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15889786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HighCharts - Y-Axis padding in a bar chart
提问by supertrue
I use a style of y-axis labels in which each number is placed, left-aligned, on top of its respective horizontal grid line, like in the image below.
我使用了一种 y 轴标签样式，其中每个数字左对齐放置在其各自的水平网格线的顶部，如下图所示。
The only complication with this in HighCharts is that the axis labels will sometimes overlap with the first column in a column chart.
HighCharts 中唯一的复杂之处是轴标签有时会与柱形图中的第一列重叠。
Updated demo:For an example, see this chart: http://jsfiddle.net/NWsgz/1/
更新的演示：例如，请参阅此图表：http: //jsfiddle.net/NWsgz/1/
I have tried to achieve this using xAxis.minpadding, but that property seems to have no effect on column charts. Is there a way in Highcharts to get the effect I am going for? I could theoretically get the effect by making the bars very narrow, but I am looking for another solution.
我试图使用 来实现这一点xAxis.minpadding，但该属性似乎对柱形图没有影响。Highcharts 有没有办法达到我想要的效果？理论上我可以通过使条形非常窄来获得效果，但我正在寻找另一种解决方案。
采纳答案by Pawe? Fus
It doesn't work for categorized axis - in that type,axis is divided into equal categories, so min/max padding isn't allowed.
它不适用于分类轴 - 在这种类型中，轴被分成相等的类别，因此不允许最小/最大填充。
Possible solution is to use standard axis, but use formatterfor axis, see: http://jsfiddle.net/NWsgz/4/
可能的解决方案是使用标准轴，但使用formatter轴，请参阅：http: //jsfiddle.net/NWsgz/4/
回答by supertrue
I've come up with a workaround, but it is not perfect.
我想出了一个解决方法，但它并不完美。
- Separate the yAxis from the chart using
yAxis.offset - Use extra-long tick marks to simulate the gridlines extending off to the left
- 使用
yAxis.offset - 使用超长刻度线模拟向左延伸的网格线
Like this:
像这样：
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
}
}
For a demo, see http://jsfiddle.net/supertrue/NWsgz/2/
有关演示，请参阅http://jsfiddle.net/supertrue/NWsgz/2/
Why it's not ideal
为什么不理想
I want my gridLines to use a dash style (e.g. dashStyle: 'longdash'), but there doesn't appear to be a way to apply a dash style to tick marks.
我希望我的 gridLines 使用破折号样式（例如dashStyle: 'longdash'），但似乎没有办法将破折号样式应用于刻度线。
I would love to hear if there's a way to do this, or a better workaround.
我很想知道是否有办法做到这一点，或者有更好的解决方法。
回答by Sebastian Bochan
You can use offset parameter for yAxis http://api.highcharts.com/highcharts#yAxis.offset
您可以为 yAxis http://api.highcharts.com/highcharts#yAxis.offset使用偏移参数
