Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
510 views
in Technique[技术] by (71.8m points)

How can i create Highchart xAxis labels centered and enclosed?

I'm trying to replicate the effect on the image but with no luck. On another post someone answered on how to achieve multiple axis lines (see link at the end), but I am unable to achieve the style (labels to maximum width inside the gray and blue boxes).multiline styled axis labels in highchart

Previous post: Highcharts: How can I achiveve multiple rows on chart labels?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I would use Highcharts.SVGRenderer to draw rect elements, based on the ticks from the second xAxis and translate the labels. Please check the example below:

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()
            )

        }
    }
}

Live demo: https://jsfiddle.net/BlackLabel/s7vfkgzt/

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...