Highcharts 如何将文本对齐中心特性应用于highchart自定义标签
已尝试将文本对齐:居中属性应用于highchart中的标签,但无法,也不知道如何进行 小提琴: HTMLHighcharts 如何将文本对齐中心特性应用于highchart自定义标签,highcharts,highstock,Highcharts,Highstock,已尝试将文本对齐:居中属性应用于highchart中的标签,但无法,也不知道如何进行 小提琴: HTML <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcha
<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"
}
}]
}
});
图表:{
类型:“仪表”,
打印边框宽度:1,
plotBackgroundImage:空
},
标签:{
项目:[{
html:“我的自定义标签
我的标签数据
另一个标签数据
如何应用文本对齐:居中属性这些文本”,
风格:{
左:“195px”,
顶部:“210px”
}
},{
html:“我的自定义标签
我的标签数据
另一个标签数据
如何应用文本对齐:居中属性这些文本”,
风格:{
左:“550px”,
顶部:“210px”
}
},{
html:“我的自定义标签
我的标签数据
另一个标签数据
如何应用文本对齐:居中属性这些文本”,
风格:{
左:“900px”,
顶部:“210px”
}
}]
}
});
使用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>',
html:“我的自定义标签
我的标签数据
另一个标签数据
如何应用文本对齐:居中属性这些文本”,
Highcharts.chart('container'{
图表:{
类型:“仪表”,
打印边框宽度:1,
plotBackgroundImage:空,
},
标签:{
项目:[{
html:“我的自定义标签
我的标签数据
另一个标签数据
如何应用文本对齐:居中属性这些文本”,
风格:{
左:1000/5,
顶部:“210px”
}
},{
html:“我的自定义标签
我的标签数据
另一个标签数据
如何应用文本对齐:居中属性这些文本”,
风格:{
左:1000/2,
顶部:“210px”
}
},{
html:“我的自定义标签
我的标签数据
另一个标签数据
如何应用文本对齐:居中属性这些文本”,
风格:{
左:1000/1.26,
顶部:“210px”
}
}]
},
标题:{
正文:“与目标值的偏差
2018年1月24日至2017年2月7日”
},
窗格:[{
startAngle:-90,
端角:90,
背景:空,
中心:['20%,'50%,],
尺码:250
}, {
startAngle:-90,
端角:90,
背景:空,
中心:['50%,'50%'],
尺码:250
}, {
startAngle:-90,
端角:90,
背景:空,
中心:['80%,'50%,],
尺码:250
}],
工具提示:{
已启用:true
},
亚克斯:[{
最低:6.5,
最高:11,
标签:{
旋转:“自动”
},
绘图带:[{
起始日期:6.5,
致:7.5,
颜色:“红色”
},{
起始日期:7.5,
致:8,,
颜色:“黄色”
},{
起:8,,
致:8.5,
颜色:“绿色”
},{
从:8.5,
致:9.5,
颜色:“黄色”
},{
从:8.5,
致:11,,
颜色:“红色”
}],
窗格:0,
标题:{
文本:“”,
y:-0
}
}, {
民:9,,
最高:27,
minorTickPosition:“内部”,
位置:'内部',
标签:{
旋转:“自动”
},
绘图带:[{
起:9,,
致:12,,
颜色:“红色”
},{
起:12,,
致:13,
颜色:“黄色”
},{
起:13,,
致:14,
颜色:“绿色”
},{
起:14,,
致:15,,
颜色:“黄色”
},{
起:15,
致:27,
颜色:“红色”
}],
窗格:1,
标题:{
文字:“gm/cm2”,
y:-0
}
},{
民:4,,
最高:7.6,
minorTickPosition:“内部”,
位置:'内部',
标签:{
旋转:“自动”
},
绘图带:[{
发信人:4,,
致:4.8,
颜色:“红色”
},{
起始日期:4.8,
致:5.1,
颜色:“黄色”
},{
起始日期:5.1,
致:5.5,
颜色:“绿色”
},{
起始日期:5.5,
至:6.5,
颜色:“黄色”
},{
起始日期:6.5,
致:7.6,
颜色:“红色”
}],
窗格:2,
标题:{
文本:“”,
y:-0
}
}],
打印选项:{
仪表:{
数据标签:{
已启用:true
},
拨号:{
半径:“100%”
}
}
},
系列:[{
名称:“A频道”,
数据:[7.5],
雅克斯:0
}, {
名称:“B频道”,
数据:[18],
亚克斯:1
},{
名称:“c频道”,
数据:[5.5],
亚克斯:2
}]
});代码>
需要什么样的输出,在上面的snipet中添加示例imageimage检查此项。请参考css中的PropertyAnna-align,如“text-align:center;”属性此代码段左对齐不客气:)