Question

我正在使用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;
          }
        }
      }
    }

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

Answer 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

Answer 2

您需要设置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

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

2 个答案: