InitiatePercentChart百分比图

InitiatePercentChart百分比图示例:

1、 定义前端HTML代码

<div style="width: 130px; height: 130px;" class="CenterDIV chartLineTime">
    <div class="ct-chart chart-pie-left " style="position: relative;">
        <div class="vertical-align text-center" style="height: 100%; width: 100%; position: absolute; left: 0; top: 0;">
            <div class="font-size-20  vertical-align-middle" style="line-height: 1.1" id="项目完成率">20%</div>
        </div>
    </div>
</div>

2、JavaScript实例化

InitiatePercentChart(container, Config)

container:要实例的元素,支持jquery css选择器多选几个元素,如:$(".chartLineTime")

Config:参数配置,相关属性如下:

donut: 是否显示外边线,true/false
donutWidth: 外边线的宽度,数值
startAngle: 起点的角度,0到360之间的数值
showLabel: 是否显示标签,true/false
width: 圆圈的宽度
height: 圆圈的高度

//显示图表
InitiatePercentChart($(".chartLineTime"), {
    donut: true,
    donutWidth: 3,
    startAngle: 0,
    showLabel: false,
    width: 130,
    height: 130
});