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

关于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;
});

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值