HighCharts xAxis显示在0行上,所有列之间都带有刻度线

时间:2019-04-11 00:09:02

标签: highcharts

我已经在HighCharts云中开发了很多带有正负值的条形图。

第一个问题:

  • 是否有可能使xAxis出现在0行(不在图表底部)?

到目前为止,我所做的是将xAxis偏移,因此将其放置在0行上,虽然可以,但是我希望有一个更好的解决方案。我认为的另一种方法是在yAxis上使用plotLines代码,但我没有得到报价:

plotLines: [{
        color: '#010101',
        width: 2,
        value: 0,
        zIndex: 5
    }],

第二个问题:

  • 是否可能在每个条之间显示刻度线,而不仅仅是带有xAxis标签的条?

这是目前为我呈现的内容,我正在尝试在所有小节之间打勾,同时显示相同数量的标签https://cloud.highcharts.com/show/cLtfEDClS

1 个答案:

答案 0 :(得分:0)

第一个问题: 您可以在Cloud的自定义代码部分中将此配置合并到图表选项中:

  chart: {
    events: {
      load: function() {
        var yAxis = this.yAxis[0];
        this.xAxis[0].update({
          offset: -yAxis.toPixels(Math.abs(yAxis.min), true)
        });
      }
    }
  },

演示http://jsfiddle.net/BlackLabel/6712zrod/

它会自动定位x轴,使其像y = 0行一样。

第二个问题:

尝试将X Axis[0] > Labels > Step设置为1

enter image description here

API参考: https://api.highcharts.com/highcharts/xAxis.labels.step

来自文档的

说明

要仅显示轴上的每个第n个标签,请将步长设置为n。将步骤设置为2将显示所有其他标签。 默认情况下,该步骤是自动计算的,以避免重叠。为防止这种情况,请将其设置为1。这通常仅在类别轴上发生,并且通常表示您选择了错误的轴类型。