如何在Highcharts的text标签内居中对齐tspan元素

我明白你想要实现的效果——让金字塔数据标签里通过<br/>拆分的两行文本（也就是生成的tspan元素）居中对齐，默认情况下这些文本是左对齐的，这里有两种实用的解决方案：

方法1：使用HTML自定义样式（灵活易控） #

通过开启useHTML: true，我们可以用HTML容器来包裹文本，直接通过CSS设置居中，这样对样式的控制更灵活：

Highcharts.chart('container', {
    chart: { type: 'pyramid' },
    title: { text: 'Sales pyramid', x: -50 },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                // 用formatter自定义带样式的内容
                formatter: function() {
                    return `<div style="text-align:center; width: 120px;"><b>${this.point.name}</b><br/>${Highcharts.numberFormat(this.point.y, 0)}</div>`;
                },
                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                softConnector: true,
                // 开启HTML支持
                useHTML: true,
                // 让整个标签容器居中定位
                align: 'center'
            },
            center: ['40%', '50%'],
            width: '80%'
        }
    },
    legend: { enabled: false },
    series: [{
        name: 'Sales',
        data: [
            ['Website visits', 15654],
            ['Downloads', 4064],
            ['Requested price list', 1987],
            ['Invoice sent', 976],
            ['Finalized', 846]
        ]
    }]
});

这种方法的好处是你可以像写普通网页一样调整文本的间距、字体大小等样式，完全用CSS控制。

方法2：直接设置SVG tspan属性（原生SVG方案） #

如果你想保持Highcharts的原生SVG渲染，不需要依赖HTML，可以通过attr配置给所有tspan设置text-anchor: middle，同时确保标签整体居中：

Highcharts.chart('container', {
    chart: { type: 'pyramid' },
    title: { text: 'Sales pyramid', x: -50 },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b><br/>{point.y:,.0f}',
                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                softConnector: true,
                // 给tspan设置居中属性
                attr: {
                    'text-anchor': 'middle'
                },
                align: 'center'
            },
            center: ['40%', '50%'],
            width: '80%'
        }
    },
    legend: { enabled: false },
    series: [{
        name: 'Sales',
        data: [
            ['Website visits', 15654],
            ['Downloads', 4064],
            ['Requested price list', 1987],
            ['Invoice sent', 976],
            ['Finalized', 846]
        ]
    }]
});

这个方案更轻量化，适合不需要复杂样式的场景，完全基于SVG原生属性实现居中。

两种方法都能让你的数据标签里的两行文本完美居中对齐，你可以根据自己的需求选择~

内容的提问来源于stack exchange，提问作者Ranjit Singh