前言

网上统计图插件非常多，比如Echarts、Chart.js等，但是如果你要的是功能简单，单一的统计图，应用这些就会很浪费，也增加自身体积，如果你想要简单的扇形统计图，请看过来！

如何用canvas画一个柱状图（Canvas绘制扇形统计图）(1)

Canvas绘制扇形统计图，50行代码的统计图

HTML

如何用canvas画一个柱状图（Canvas绘制扇形统计图）(2)

Canvas绘制扇形统计图，50行代码的统计图

JavaScript

如何用canvas画一个柱状图（Canvas绘制扇形统计图）(3)

Canvas绘制扇形统计图，50行代码的统计图

如何用canvas画一个柱状图（Canvas绘制扇形统计图）(4)

Canvas绘制扇形统计图，50行代码的统计图

调用方法

// 示例一 drawCircle({ id: 'one',//dom元素 color: '#10af7e',//颜色 bgLine: '#e4e4e4',//背景颜色 angle: 0.5,//所占比例 lineWidth: 15,//宽度(像素) lineCap: 'round'//描边的样式 }); // 示例二 drawCircle({ id: 'two', angle: 0.75, color: '#49b1f5', bgLine: '#f3766f', lineWidth: 20 }); // 示例三 drawCircle({ id: 'three', angle: 1, lineWidth: 25, color: 'grd' });

css

这里的css主要是用来[示例页面](http://demo.javanx.cn/canvas-charts/)布局的，可以直接忽略

.box ul, .box li { list-style: none; margin: 0; padding: 0; } .box ul li { float: left; width: 33%; text-align: center; }

公告

需要源码和演示地址的同学，点击下方“了解更多”！

更多资源敬请关注！

,