如何将文本对齐中心属性应用于 highchart 自定义标签

Question

试图将 text-align:center 属性应用于 highchart 中的标签，但不能，也不知道如何制作。，

小提琴：here its

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 100%; height: 400px; margin: 0 auto">
</div>

JS

Highcharts.chart('容器', {

chart: {
    type: 'gauge',
    plotBorderWidth: 1,        
    plotBackgroundImage: null

},
labels: {               
        items: [{
            html: '<span style="text-align:center;">My custom label</span><br><span style="text-align:center;">My Label Data<br>Another Label Data<br>How to apply text align:center property those text</span>',
            style: {
                left: "195px",
                top: "210px"

            }
        },{
               html: '<span style="text-align:center;">My custom label</span><br><span style="text-align:center;">My Label Data<br>Another Label Data<br>How to apply text align:center property those text</span>',
            style: {
                left: "550px",
                top: "210px"
            }
        },{
               html: '<span style="text-align:center;">My custom label</span><br><span style="text-align:center;">My Label Data<br>Another Label Data<br>How to apply text align:center property those text</span>',
            style: {
                left: "900px",
                top: "210px"
            }
        }]
    }


});

Answer 1

用 style="text-anchor:middle" 更新你的 html 并用 span 标签打断

html: '<span style="text-anchor:middle">My custom label</span><br><span style="text-anchor:middle">My Label Data</span><br><span style="text-anchor:middle">Another Label Data</span><br><span style="text-anchor:middle">How to apply text align:center property those text</span>',

 Highcharts.chart('container', {

    chart: {
        type: 'gauge',
        plotBorderWidth: 1,        
        plotBackgroundImage: null,
        
    },
	labels: {  				
            items: [{
                html: '<span style="text-anchor:middle">My custom label</span><br><span style="text-anchor:middle">My Label Data</span><br><span style="text-anchor:middle">Another Label Data</span><br><span style="text-anchor:middle">How to apply text align:center property those text</span>',
                style: {
                    left: 1000/5,
                    top: "210px"
                    
                }

            },{
                   html: '<span style="text-anchor:middle">My custom label</span><br><span style="text-anchor:middle">My Label Data</span><br><span style="text-anchor:middle">Another Label Data</span><br><span style="text-anchor:middle">How to apply text align:center property those text</span>',
                style: {
                    left: 1000/2,
                    top: "210px"
                }

            },{
                   html: '<span style="text-anchor:middle">My custom label</span><br><span style="text-anchor:middle">My Label Data</span><br><span style="text-anchor:middle">Another Label Data</span><br><span style="text-anchor:middle">How to apply text align:center property those text</span>',
                style: {
                    left: 1000/1.26,
                    top: "210px"
                }

            }]
        }, 
    title: {
        text:'Deviation From Target Values<br><spantyle="font-size:8px">24-Jan-2018 to 7-Feb-2017</span>'
    },

    pane: [{
        startAngle: -90,
        endAngle: 90,
        background: null,
        center: ['20%', '50%'],
        size: 250
    }, {
        startAngle: -90,
        endAngle: 90,
        background: null,
        center: ['50%', '50%'],
        size: 250
    }, {
        startAngle: -90,
        endAngle: 90,
        background: null,
        center: ['80%', '50%'],
        size: 250
    }],

    tooltip: {
        enabled: true
    },

    yAxis: [{
        min: 6.5,
        max:11,        
        labels: {
            rotation: 'auto'            
        },
        plotBands: [{
            from: 6.5,
            to: 7.5,
            color: 'red'
            
        },{
            from: 7.5,
            to: 8,
            color: 'Yellow'
            
        },{
            from: 8,
            to: 8.5,
            color: 'green'
            
        },{
            from: 8.5,
            to: 9.5,
            color: 'yellow'
            
        },{
            from: 8.5,
            to: 11,
            color: 'red'
            
        }],
        pane: 0,
        title: {
            text: '%',
            y: -0
        }
    }, {
        min: 9,
        max: 27,
        minorTickPosition: 'inside',
        tickPosition: 'inside',
        labels: {
            rotation: 'auto'         
        },
        plotBands: [{
            from: 9,
            to: 12,
            color: 'red'            
        },{
            from: 12,
            to: 13,
            color: 'yellow'            
        },{
            from: 13,
            to: 14,
            color: 'green'            
        },{
            from: 14,
            to: 15,
            color: 'yellow'            
        },{
            from: 15,
            to: 27,
            color: 'red'            
        }],
        pane: 1,
        title: {
            text: 'gm/cm2',
            y: -0
        }
    },{
        min: 4,
        max:7.6,
        minorTickPosition: 'inside',
        tickPosition: 'inside',
        labels: {
            rotation: 'auto'            
        },
        plotBands: [{
            from: 4,
            to: 4.8,
            color: 'red'
            
        },{
            from: 4.8,
            to: 5.1,
            color: 'Yellow'
            
        },{
            from: 5.1,
            to: 5.5,
            color: 'green'
            
        },{
            from: 5.5,
            to: 6.5,
            color: 'yellow'
            
        },{
            from: 6.5,
            to: 7.6,
            color: 'red'
            
        }],
        pane: 2,
        title: {
            text: '%',
            y: -0
        }
    }],

    plotOptions: {
        gauge: {
            dataLabels: {
                enabled: true                
            },
            dial: {
                radius: '100%'
            }
        }
    },


    series: [{
        name: 'Channel A',
        data: [7.5],
        yAxis: 0
    }, {
        name: 'Channel B',
        data: [18],
        yAxis: 1
    },{
        name: 'Channel c',
        data: [5.5],
        yAxis: 2
    }]

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 1000px; height: 400px; margin: 0 auto"></div>

fiddle演示