前言

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

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

HTML

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

JavaScript

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

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;
}

公告

更多资源敬请关注！

閱讀更多 web秀 的文章

關鍵字: 扇形 技术 JavaScript