Полярная верхняя диаграмма, выровнять метки слева по x - прервать расстояние между метками

Question

Я использую полярную старшую диаграмму.

Я хочу, чтобы у моих меток по оси X было выравнивание текста: слева.

Проблема в том, что когда я делаю это, расстояние между метками прервана.

Она начинается dry метка с левой стороны от точки расстояния.

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

Пример кода:

xAxis: {
            type: 'category',
            tickmarkPlacement: 'on',
            lineWidth: 0,
            labels: {
                distance: 35,
                style:{
                    color: 'red',
                    width: 100,
                    cursor: 'pointer',

                },
                align:'left',
                staggerLines: 1,
                events: {},
                format: this.labelFormat,

            },
        },

Я пытался использовать свойство ReserveSpace, но это не помогло. См. Изображения:

По умолчанию:

По левому краю:

Answer 1

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

Вот моя идея, как этого добиться:

Демонстрация: https://jsfiddle.net/BlackLabel/7whqnv1s/

events: {
  render() {
    let chart = this,
      ticks = chart.xAxis[0].ticks;

    for (let i in ticks) {
      if (ticks[i].label.alignValue !== 'left') {
        let labelWidth = ticks[i].label.getBBox().width;

        ticks[i].label.attr({
          'text-anchor': 'left'
        })
                    //set the center label on the middle
        if (ticks[i].label.alignValue === 'center') {
          ticks[i].label.translate(-labelWidth / 2, 0)
        } else {
        //move the left labels to the left
          ticks[i].label.translate(-labelWidth, 0)
        }
      }
    }
  }
}

API: https://api.highcharts.com/highcharts/chart.events.render

Если что-то неясно - не стесняйтесь спрашивать!