highchart center align tspan inside text 标签

Question

我想在 highchart 的 text 标签内对齐 tspan 中心。

我创建了一个 jsfiddle：here

代码

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
            },
            center: ['40%', '50%'],
            width: '80%'
        }
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Unique users',
        data: [
            ['Website visits',      15654],
            ['Downloads',            4064],
            ['Requested price list', 1987],
            ['Invoice sent',          976],
            ['Finalized',             846]
        ]
    }]
});

如您所见，“Finalized”和“846”左对齐，有没有办法将“846”与“Finalized”文本居中对齐？

Answer 1

更新您的 dataLabels

plotOptions: {
    series: {
        dataLabels: {
            useHTML:true,
            enabled: true,
            format: '<b>{point.name}</b><br/><div align="center">{point.y:,.0f}</div>',
            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
            softConnector: true
        },
        center: ['40%', '50%'],
        width: '80%'
    }
},

fiddle 演示

highchart center align tspan inside text 标签

highchart center align tspan inside text tag

html

css

polygon

highcharts

tspan