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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 08:38:55  来源:igfitidea点击:

How to get Highcharts X-Axis Categories starting at the left most point

javascripthighcharts

提问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 轴的最左侧边缘开始,在最右侧边缘结束,没有任何填充。在下图中,红色箭头表示我想去掉的间距。如果没有文本类别,这很容易实现,但我似乎无法弄清楚。任何帮助表示赞赏,谢谢。

Chart with unwanted padding

带有不需要的填充的图表

回答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.categoriesin traditional way (I think that this is a way more better), I suggest you to use a tiny hack and redefine an Axis.initfunction. 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 pointPlacementreference 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,
}