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

最新推荐文章于 2024-05-28 16:47:15 发布

jingzi0418

最新推荐文章于 2024-05-28 16:47:15 发布

阅读量7.4k

点赞数

分类专栏：技术类经验总结文章标签： highChart 环形图形文字居中

本文链接：https://blog.csdn.net/jingzi0418/article/details/50589255

版权

技术类经验总结专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

}