Question

我需要在漏斗高图图表的top（'test'），left（'tests'）和bottom（'testy'）中给出一些文本。我使用 x，y 这样的x：-500，y：100，但在其他浏览器上无法正确对齐：

Highcharts.chart('container', {
    ...,
    title: {
        text: 'test :  912283', //No I18N
        x: -100
    },
    subtitle: {
        text: 'tests : 75.38%', //No I18N
        align: 'right', //No I18N
        x: -500,
        y: 170
    }
});

示例：https://jsfiddle.net/t98L5w7s/3/

Answer 1

您可以使用Highcharts.SVGRenderer，例如，参考第一个点的位置和尺寸以将文本添加到正确的位置：

chart: {
    type: 'funnel', //No I18N
    events: {
        load: function() {
            var point = this.series[0].points[0].graphic.getBBox();

            this.renderer.text('test : 912283', point.x + this.plotLeft + point.width / 2, point.y + this.plotTop)
                .attr({
                    align: 'center',
                    zIndex: 3
                })
                .css({
                    color: '#4572A7',
                    fontSize: '16px'
                })
                .add();

            this.renderer.text('tests : 75.28%', point.x + this.plotLeft, point.y + this.plotTop + point.height / 2)
                .attr({
                    align: 'right',
                    zIndex: 3
                })
                .css({
                    color: '#4572A7',
                    fontSize: '12px'
                })
                .add();
        }
    }
}

API参考：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

实时演示：https://jsfiddle.net/BlackLabel/c578ay0x/

如何在渠道高图的顶部，左侧和底部添加文本

1 个答案: