关于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; });
}
相关文章推荐
- 用xerces-c来进行xml schema校验
- 对openCV中image.copyTo()的一点理解
- java的参数是值传递而非引用传递
- Activity 重启recreate() 重启Fragment
- Intent参数设置与使用示例
- Java Socket网络编程的经典例子(转)
- 不同VLAN之间互相通信
- 不同VLAN之间互相通信
- hdu 5170 GTY's math problem【精度控制】【思维】
- php开启com组件注意事项
- jQuery.each()函数(译)
- effective java读书笔记 (二)
- Java中的Thread类创建多线程
- 设置导航栏字体
- HDU acm step:Chapter one section two
- effective java 读书笔记(三)
- IDL_原函数分析3
- 分享个ORACLE整理表碎片的脚本
- 设置状态栏风格
- 注解学习二:注解(Annotation)自定义注解入门