highcharts-vue xAxis.tickPositioner 与 series.data.length == 0

Question

.我使用 highcharts-vue 和 xAxis.tickPositioner 函数

chartOptions: {
  chart: {
    type: 'areaspline'
  },
  xAxis: {
    tickPositioner: function () {
      let positions = [],        
          tick = Math.floor(this.dataMin),
          increment = Math.ceil((this.dataMax - this.dataMin) / 10)

      if (this.dataMax !== null && this.dataMin !== null) {
          for (tick; tick  <= this.dataMax; tick += increment) {
              positions.push(tick)
          }
      }
      return positions
    }  
  },
  series: [],
  categories: []
}

mounted(){
  this.chartOptions.series = [
    {name: 'test1', data: [1]},
    {name: 'test2', data: [2]}
  ]
  this.chartOptions.xAxis.categories = ['category1']
}

<highcharts :options="chartOptions"></highcharts>

我需要它，因为通常我有很多数据点。如果 this.chartOptions.series[i].data.length > 1，效果很好。但是如果 this.chartOptions.series[i].data.length == 1 - 浏览器崩溃。我能做些什么来修复它？

Answer 1

我通过以下更改修复了它：

tickPositioner: function () {
  let positions = [],        
      tick = Math.floor(this.dataMin),
      increment = Math.ceil((this.dataMax - this.dataMin) / 10)

  if (this.dataMax === 0) {
    positions = [0]
  } else if (this.dataMax !== null && this.dataMin !== null) {
      for (tick; tick  <= this.dataMax; tick += increment) {
        positions.push(tick)
      }
  }
  return positions
}

Answer 2

注意一点，所有变量（tick、increment、dataMax）都等于 0，因此这个 for 是一个无限循环。

你可以在这里查看：https://jsfiddle.net/BlackLabel/35suo8k0/

作为解决方案，您可以使用此代码：

  xAxis: {
    tickPositioner() {
      let positions = [],
        tick = Math.floor(this.dataMin),
        increment = Math.ceil((this.dataMax - this.dataMin) / 10)

      if (this.dataMax && this.dataMin) {
        for (tick; tick <= this.dataMax; tick += increment) {
          positions.push(tick)
        }
      }
      return positions
    }
  },

我更改了 if 条件 - 现在它检查 dataMax 和 dataMin 是否存在。

演示：https://jsfiddle.net/BlackLabel/k6vj9af8/

highcharts-vue xAxis.tickPositioner 与 series.data.length == 0

highcharts-vue xAxis.tickPositioner with series.data.length == 0

javascript

highcharts

vue.js