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

背风处

在此处输入图片说明试图将text-align:center属性应用于highchart中的label,但是不能,也不知道如何制作。

小提琴:在这里

的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('container',{

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"
            }
        }]
    }


});
深3015

style="text-anchor:middle"用span标签更新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>

小提琴演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将CSS样式应用于自定义属性

HTML / CSS如何将CSS应用于具有自定义数据属性的“ a”?

如何将导入的样式表应用于自定义元素的模板标签内容?

如何将自定义转换器应用于YamlDotNet中的属性

如何将NSPredicate应用于自定义XLForm行?

如何将random.choice应用于我的自定义课程?

如何将CSS样式应用于自定义React组件

如何将ActiveModel :: Serializer应用于自定义对象?

如何将内置或自定义主题应用于活动中的片段?

如何将渐变应用于多个自定义uiview?

WPF如何将DataTrigger应用于XAML中的“自定义用户控件”类

如何将主题功能应用于提供自定义帖子类型的页面

如何将样式化组件样式应用于自定义React组件?

如何将绝对位置应用于 React Native 中的自定义组件?

如何将css应用于标签的属性?

如何将自定义主题应用于Google自定义搜索?

如何将ItemAdd事件应用于自定义文件夹?Outlook 2010 VBA

如何将轮廓仅应用于自定义样式的HTML选择元素的扩展clickable元素?

如何将add_filters应用于由add_action执行的自定义函数?

如何将自定义字体应用于Android应用中的每个TextView

如何将旋转应用于由中心和轴长定义的椭圆?

JavaFX:使用自定义样式表将文本颜色应用于TableCell吗?

使用 JQuery 中的自定义数据属性将 css 应用于 tr

如何将自定义排序应用于多索引列

如何将自定义比较器应用于R数据帧?

如何将自定义滚动功能应用于pandas groupby?

如何将自定义函数应用于数据框的每一列

如何将自定义样式应用于SwitchCompat

如何将自定义函数应用于熊猫数据框的2列?