您的位置:首页 > 其它

关于highChart图形中,环形图像,文字居中的处理

2016-01-26 18:49 447 查看

关于highChart图形中,环形图像,文字居中的处理。

以前做过一个项目,要求用一个环形来表示得分,红色蓝色按照百分比进行分数表示,红色代表分数,但是要将最终的分数显示在环形图形中间。

可参考以下代码

/**

* 计算得分

*

* @param num

*/

function loadPowerNum(num) {

$(“#baseInfoMgrPowerTimeTitle”).html(“得分“);

$('#baseInfoMgrPowerTime').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
floating:true,
text: '圆心显示的标题',
style: {
fontSize: "45px",
lineHeight: "45px"
}
},
tooltip: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: false,
colors:['#A52A2A','#BEBEBE'],
verticalAlign: 'middle',
overflow: true,
crop: false,
cursor: 'pointer',
dataLabels: {
enabled: false
}
}
},
series: [{
type: 'pie',
innerSize: '75%',
name: '得分',
data: [
{name:'total',   y: num},
{
name: 'left',
y: 100-num,
sliced: false,
selected: false
}
]
}]
}, function(c) {
// 环形图圆心
var centerX = c.series[0].center[0];
var centerY = c.series[0].center[1];
var text = num + "<font color='red'>分<font>";
// 标题字体大小,返回类似 16px ,所以需要 parseInt 处理
var titleHeight = parseInt(c.title.styles.fontSize);

c.setTitle({
text: text,
y:centerY + titleHeight/2
});

chart = c;
});


}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: