Как я могу создать ярлыки Highchart xAxis по центру и внутри?

Question

Я пытаюсь воспроизвести эффект на изображении, но безуспешно.В другом посте кто-то ответил о том, как получить несколько осевых линий (см. Ссылку в конце), но я не могу добиться стиля (надписи до максимальной ширины внутри серого и синего прямоугольников).

Предыдущее сообщение: Highcharts: Как мне получить несколько строк на метках диаграммы?

Answer 1

Я бы использовал Highcharts.SVGRenderer, чтобы нарисовать rect элементы на основе тиков со второго xAxis и перевести метки.Пожалуйста, проверьте пример ниже:

chart: {
    events: {
        render: function() {
            var ticks = this.xAxis[1].ticks,
                x = this.plotLeft,
                y = 378,
                width,
                color = 'blue',
                textColor = 'yellow',
                height = 28;

            if (!this.customTicks) {
                this.customTicks = [];
            } else {
                this.customTicks.forEach(function(cTick) {
                    cTick.destroy();
                });
                this.customTicks.length = 0;
            }

            Highcharts.objectEach(ticks, function(tick) {
                if (tick.mark) {

                    width = tick.mark.getBBox().x - x;
                    tick.label.element.children[0].setAttribute('fill', textColor);
                    tick.label.attr({
                        translateX: -width / 2
                    });

                    this.customTicks.push(
                        this.renderer.rect(
                            x,
                            y,
                            width,
                            height
                        ).attr({
                            fill: color
                        }).add()
                    )

                    x = tick.mark.getBBox().x;
                    if (color === 'blue') {
                        color = 'gray';
                        textColor = 'white';
                    } else {
                        color = 'blue';
                        textColor = 'yellow';
                    }
                }

            }, this)

            this.customTicks.push(
                this.renderer.rect(
                    x,
                    y,
                    this.xAxis[1].width + this.plotLeft - x,
                    height
                ).attr({
                    fill: color
                }).add()
            )

        }
    }
}

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

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect