C# Html5 + jquery 绘制动态圆饼图

• 效果图
  这里为了方便展示效果，随机生成了数据。实际应用中可以自行绑定数据
  

• 主要关注：
  1）通过画布绘制背景图上的动态圆环
  2）Div标签的悬浮
  3）DIV标签的文本居中问题

• 核心的画圆代码段：

 function DrawArc(id, current, color) {
            var bg = document.getElementById(id);
            var ctx = bg.getContext('2d');
            var circ = Math.PI * 2;
            var quart = Math.PI / 2;

            ctx.clearRect(0, 0, bg.width, bg.height);
            ctx.strokeStyle = color;
            ctx.lineWidth = 16.1;
            ctx.beginPath();
            ctx.arc(bg.width / 2 - 1, bg.height / 2 - 1, 67, -(quart), ((circ) * current) - quart, false);
            //ctx.arc(bg.width / 2 , bg.height / 2 , 67, -(quart), ((circ) * current) - quart, false);
            //原代码中，bg.width / 2 - 1, bg.height / 2 - 1 作用是进行微调，新加的注释为标准
            //67 为新绘制圆的半径，如果发现大小不对可以修改此参数
            ctx.stroke();
            ctx.closePath();
        }

• 关于Div标签的悬浮、DIV标签的文本居中问题：

  • Div标签的悬浮：添加position属性，为了使Div准确悬浮在特定的位置，建议使用Left、Top精确定位，不要自适应。
  • DIV标签的文本居中问题：使用text-align:center; line-height:216px; text-align属性可以设置标签文本的水平位置，line-height属性设置标签文本的垂直位置，216px 是因为我的Div标签是216px，所以如果你的标签是80px，line-height:80px;可以使你Div上的文本处于该标签的垂直居中位置。

---

参考源码

• 如果参考以上还没有理解，可以参考源码。使用中如果遇到问题，欢迎留言交流。