如何用canvas画一个柱状图Canvas绘制扇形统计图

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

网上统计图插件非常多，比如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;}

公告

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

更多资源敬请关注！