javascript 如何从最左侧开始获取 Highcharts X 轴类别
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/10087294/
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
How to get Highcharts X-Axis Categories starting at the left most point
提问by Ross Deane
I have a Highcharts area chart, with string categories on the X-Axis. I want the chart to start at the left most edge of the x-axis and end at the rightmost edge, without any padding. In the image below, the red arrows show the spacing that I want to get rid of. Without text categories this is easily achievable, but with I just can't seem to figure it out. Any help appreciated, thanks.
我有一个 Highcharts 面积图,X 轴上有字符串类别。我希望图表从 x 轴的最左侧边缘开始,在最右侧边缘结束,没有任何填充。在下图中,红色箭头表示我想去掉的间距。如果没有文本类别,这很容易实现,但我似乎无法弄清楚。任何帮助表示赞赏,谢谢。
回答by Igor Shastin
You can achieve the desired result by redefining labels.formatter on axis. jsFiddleis here.
您可以通过在轴上重新定义 labels.formatter 来实现所需的结果。jsFiddle在这里。
But if you want to keep it simple and pass axis.categories
in traditional way (I think that this is a way more better), I suggest you to use a tiny hack and redefine an Axis.init
function. Try it on jsFiddle.
但是如果你想保持简单并axis.categories
以传统方式传递(我认为这是一种更好的方式),我建议你使用一个小技巧并重新定义一个Axis.init
函数。在jsFiddle上试试。
UPD:I've updated my previous fiddle a little. Check it out. I think that you can combine all my solution to get a nicer one.
UPD:我稍微更新了我以前的小提琴。检查一下。我认为您可以结合我所有的解决方案来获得更好的解决方案。
回答by Ivo Yanchev
You can use spacingLeft and spacingRight to set the spacing:
您可以使用spacingLeft 和spacingRight 来设置间距:
chart: {
renderTo: 'chart1',
type: 'area',
spacingLeft: -21,
spacingRight: -21,
spacingBottom: 1
},
回答by nklein
A cleaner solution is to use the pointPlacement
reference provided in the Highchart API.
更简洁的解决方案是使用Highchart API 中pointPlacement
提供的参考。
Add pointPlacement: 'on'
and you should be in business. (For reference, here is their example JSFiddle)
添加pointPlacement: 'on'
,你应该在做生意。(作为参考,这是他们的示例 JSFiddle)
回答by dgw
Just add:
只需添加:
...
xAxis: {
startOnTick: true,
...
},
...
回答by jonathan
You need the following settings.
您需要进行以下设置。
xAxis: {
plotLines: [{
value: 0,
color: '#color'
}],
tickmarkPlacement: 'on'
},
yAxis: {
lineWidth: 0,
}