高图在每个点的y轴上显示网格线

时间:2019-04-23 06:55:08

标签: highcharts angular6

我正在使用highchart柱形图。因为我的y轴最大值是10,最小值是0。我想显示0到10之间每个点的网格线。如果图表高度小于185px,则仅显示5条网格线,如果大于5, 185 px,它显示所有点的网格线。我尝试通过设置刻度线间隔来尝试,但是我将刻度线间隔最小设置为0.1,它仅显示8条网格线。 我的y轴代码是

yAxis: {
      min: 0,
      max: 10,
      tickInterval: 0.1,
      title: {
        text: '',
        align: 'high'
      },
      labels: {
        x: 1,
        y: 3,
        formatter: function() {
          if (this.pos === 0 || this.pos === 5 || this.pos === 10) {
            return this.pos;
          }
        }
      }
    }

我如何强制它显示每个点的所有网格线?谢谢。

2 个答案:

答案 0 :(得分:1)

在API中,我们可以阅读:

  

tickInterval:数字

     

...

     

如果tickInterval太密集而无法绘制标签,则为Highcharts   可能会去除刻度线。

     

...

要显示所有刻度,请使用tickAmount属性:

yAxis: {
    ...,
    tickAmount: 11
}

实时演示: http://jsfiddle.net/BlackLabel/oqu8hkn9/

API:

https://api.highcharts.com/highcharts/yAxis.tickInterval

https://api.highcharts.com/highcharts/yAxis.tickAmount

答案 1 :(得分:0)

您需要设置gridLine属性以实现所需的功能。

下面是一个带有10条gridLines的示例,始终显示。配置如下:

yAxis: {
  minorGridLineWidth: 1,
  minorTickInterval: 1,
  gridLineWidth: 0,
  ...
}

工作中的JSFiddle: https://jsfiddle.net/ewolden/1cm6qd0n/8/

gridLines上的API: https://api.highcharts.com/highcharts/yAxis.minorGridLineWidth