如何使Highcharts X轴分类从最左侧开始

Question

我有一个Highcharts面积图，X轴上有字符串类别。我希望图表从X轴的最左侧开始，并在最右侧结束，没有任何填充。在下面的图片中，红色箭头显示了我想要消除的间距。如果没有文本类别，这很容易实现，但是我似乎无法弄清楚。感谢任何帮助。

- Ross Deane

---

有什么进展吗？我也在试图弄清楚，但是一直无法让任何东西正常工作。 - nathan

解决方案要么过于复杂，要么不可靠。Highcharts 应该提供一个简单的“pad”属性，就像大多数其他图表库一样。 - Cristian Scutaru

Answer 1

通过重新定义轴上的labels.formatter，您可以实现所需的结果。这里jsFiddle给出了示例。

但是，如果您想保持简单并以传统方式传递axis.categories（我认为这是更好的方法），我建议您使用一个小技巧并重新定义Axis.init函数。在jsFiddle上尝试一下。

更新：我稍微更新了之前的fiddle。请查看。我认为您可以将我的所有解决方案组合在一起，以获得更好的结果。

- Igor Shastin

---

谢谢！这是目前唯一可行的解决方案。我使用了labels.formatter的解决方案。 - nathan

唯一有效的解决方案。OP 应该将其标记为正确答案。 - João Martins

Answer 2

您可以使用spacingLeft和spacingRight设置间距：

chart: {
         renderTo: 'chart1',
         type: 'area',
         spacingLeft: -21,      
         spacingRight: -21,      
         spacingBottom: 1
},

- Ivo Yanchev

Answer 3

xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5']
},
series: [
    {
      name: 'name of series',
      data: [0, 2, 0, 2, 0],
      pointPlacement: 'on',
    }
]

这个解决方案对我有用，也许能帮到你。我无法确认这是否适用于其他输入数据的方式。

- Jonas

Answer 4

一种更干净的解决方案是使用Highchart API提供的pointPlacement参考。添加pointPlacement: 'on'即可轻松完成。（参考此处的JSFiddle示例）

- nklein

---

pointPlacement: 'on' 不能解决这个问题。 pointPlacement: -0.5 有点作用，但是另一端的间隙会加倍。 - stannius

Answer 5

只需添加：

...
xAxis: {
  startOnTick: true,
  ...
},
...

- dgw

---

@RossDeane 在你的fiddle中，你使用了类别，在你上面的图像中，看起来你没有使用类别。类别有一定的宽度，点将始终居于类别的中心。 - dgw

谢谢您的回复。我在问题中提到了字符串类别，如果我表达不清楚，对不起。所以这是做不到的吗？:( - Ross Deane

哦，对了，你提到了类别。抱歉，但我认为类别意味着填充以使点居中。 - dgw

嗯，好吧，真遗憾。再次感谢你。 - Ross Deane

有人能告诉我如何在Google Charts API的线图中获得“startOnTick”功能吗？ - Hariprasath

Answer 6

您需要以下设置。

xAxis: {           
  plotLines: [{
    value: 0, 
    color: '#color'
  }],
  tickmarkPlacement: 'on'
},
yAxis: {           
  lineWidth: 0,
}

- jonathan