前言

網上統計圖插件非常多，比如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