javascript - Highcharts 图表轴超过设定的最小值和最大值

Question

我想将 y 轴限制在 -43 到 43 的范围内。我还希望我的图表不显示低于或高于这些值的空间/面积/任何内容。这是我的轴选项的样子

yAxis: {
   tickInterval: 1,
   minorTickInterval: null,
   endOnTick: false,
   min: -41,
   max: 43,
   title: {
      text: 'Y Coordinate'
   },
   gridLineColor: 'transparent'
}

但是，在下图中，您可以清楚地看到 highcharts 显示的值低于我的限制并低至 -45。我想要这些硬性限制，以便我的背景图像与坐标网格系统完美对齐。

我读到将我的tickInverval设置为1并将endOnTick设置为false会产生所需的结果，但似乎并非如此。

有什么想法吗？

Answer 1

刻度位置确定起始轴和结束轴值。您可以使用tickPositions来传递您的头寸，或者创建一个函数，根据您的最小值和最大值返回刻度头寸并将其作为定位器传递。

const random = () => Math.round((Math.random() * 200) - 100)
const options = {
  yAxis: {
    min: -99,
    max: 99,
    // tickPositions: [-99, 99],
    tickPositioner () {
      const axis = this
      return axis.tickPositions.map((pos) => {
        if (pos <= axis.max && pos >= axis.min) return pos // If between range
        else if (pos > axis.max) return axis.max
        else if (pos < axis.min) return axis.min
      })
    }
  },
  series: [{
    data: [...Array(10)].map(random),
    type: 'column'
  }]
}

const chart = Highcharts.chart('container', options)

实例: https://jsfiddle.net/918zb76r/