Highcharts. Как динамически устанавливать галочки и отображать метки относительно текста в метках?

Question

Я динамически устанавливаю отметки через tickPositioner и подписываю через tags.formatter . При узкой ширине экрана мне нужно отображать меньше меток и меток, чтобы все подходило.

Я хочу получить ширину метки. Таким образом, я могу вычислить шаг.

https://jsfiddle.net/Lnbaqwce/

Highcharts.chart('container', {

  chart: {
    events: {
      render() {
            var ticks = this.xAxis[0].ticks,
                ticksPositions = this.xAxis[0].tickPositions,
                tick0x,
              tick1x,
              getPosition = function (tick) {
                var axis = tick.axis;
                return Highcharts.Tick.prototype.getPosition.call(tick, axis.horiz, tick.pos, axis.tickmarkOffset);
              };

          tick0x = getPosition(ticks[ticksPositions[0]]).x;
          tick1x = getPosition(ticks[ticksPositions[1]]).x;

          this.xAxis[0].labelGroup.translate((tick1x - tick0x) / 12)
            }
    }
  },
  xAxis: {
    min: 0,
    max: 20,
    tickPositioner: function () {
      var positions = [],
          tick = Math.floor(this.dataMin),
          increment = Math.ceil((this.dataMax - this.dataMin) / 6);

      if (this.dataMax !== null && this.dataMin !== null) {
        for (tick; tick - increment <= this.dataMax; tick += increment) {
          positions.push(tick);
        }
      }
      return positions;
    },
    labels: {
        formatter: function() {
        return this.value + "%$$$";
      }
    }
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 100.20, 200.30]
  }]
});

Answer 1

Вместо выполнения этих вычислений в tickPositioner, я думаю, что лучшим решением будет:

1. получить наибольшую ширину метки,
2. разделить ширину оси на ширину метки выше,

3. выполнить обновление по оси с выходным сигналом сверху

   function(chart){
   let xAxis = chart.xAxis[0],
       labelWidth = xAxis.ticks[10].label.getBBox().width, // I choose tick 10 
       because is more wide
       axisWidth = xAxis.width,
       tickAmount = axisWidth / labelWidth;
   
       xAxis.update({
           tickAmount: tickAmount
       });
   }
   

Демо: https://jsfiddle.net/BlackLabel/duegno8z/1/ API: https://api.highcharts.com/highcharts/xAxis.tickAmount

Answer 2

Вот пример того, как получить ширину метки, которую вы можете использовать в своих вычислениях.

if(this.ticks[tick]) {
  console.log(this.ticks[tick].label.getBBox().width)
}

Демо: https://jsfiddle.net/BlackLabel/15msykgw/