.Utilizo la función highcharts-vue y 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>Lo necesito porque normalmente tengo muchos puntos de datos. Funciona bien si this.chartOptions.series[i].data.length > 1. Pero si this.chartOptions.series[i].data.length == 1, el navegador falla. ¿Que puedo hacer para arreglarlo?
Tenga en cuenta que para un punto todas sus variables (tick, incremento, dataMax) son iguales a 0, for lo que, como consecuencia, esto es un bucle infinito.
Puede consultarlo aquí: https://jsfiddle.net/BlackLabel/35suo8k0/
Como solución puedes usar este código:
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 } },Cambié la condición if - ahora verifica si dataMax y dataMin existen.
Demostración: https://jsfiddle.net/BlackLabel/k6vj9af8/
Lo arreglé con estos cambios:
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 }