神馬系餅圖？

餅圖，大家都應該熟知，在統計數據對比方面，幾乎處處用到。如cnzz的統計餅圖

從餅圖中，很形象地展示了訪問者地區的分布，以扇形為塊的方式拼成一個大圓。

都使用什么方法實現

目前眾多站點制作餅圖大多使用flash，或者后臺語言生成，如PHP，Python只要安裝相應的基礎庫就能實現畫圖。但很少有站點這么干，因為耗費服務器資源。

cnzz里使用的就是flash

PHP生成的

HTML5與CSS3也能畫出餅圖

不得不說，HTML5與CSS3的推出，將推翻老一代的網頁制作者。特別在當今瀏覽器標準不斷統一的情況下，新生的網頁制作者幾乎想不到在過去的時間里制作網頁調兼容性是一件非常痛苦的事。

過去我們要實現圓角只能切圖，如今在CSS3里只需一條代碼搞定。而CSS3的功能遠不止這些，配合HTML5還能畫餅圖數據分析。

然而，HTML5與CSS3嚴格意義上不具備編程語言的思想，所以還要借助JS去“畫”它。

html代碼

1	<canvas id="bingtu"? width="224" height="130" ></canvas>

JS代碼

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

var color = ["#999999","#333333","#336799"]; var data = [25,35,50]; function drawCircle(){ ????????var canvas = document.getElementById("bingtu"); ????????var ctx = canvas.getContext("2d"); ????????var startPoint= 1.5 * Math.PI; ????????for(var i=0;i<data.length;i++){ ????????????????ctx.fillStyle = color[i]; ????????????????ctx.strokeStyle = color[i]; ????????????????ctx.beginPath(); ????????????????ctx.moveTo(112,65); ????????????????ctx.arc(112,65,65,startPoint,startPoint-Math.PI*2*(data[i]/100),true); ????????????????ctx.fill(); ????????????????ctx.stroke(); ????????????????startPoint -= Math.PI*2*(data[i]/100); ????????} } drawCircle();

canvas是HTML5新增的畫布標簽，個人感覺這個標簽在將來將大有用途，喜歡研究HTML5的童鞋可以深入研究這個標簽。canvas上的高度可以自己隨意設置，當然寬不能小于高，否則圖形出來不是圓的。

這里重點講下這段js代碼用法

var color = ["#999999","#333333","#336799"]; ?畫餅圖所用的顏色

var data = [25,35,50]; ?數據比，全部是數據加起來是100，才能畫滿整個圓

var ctx = canvas.getContext("2d"); ?畫2D平面圖

var startPoint= 1.5 * Math.PI; 繪制方向起點，有逆順之分，通常是 1.5*Math.PI 或者 0

ctx.fillStyle = color[i] ? 填充顏色

ctx.beginPath(); 開始畫

ctx.moveTo(112,65); ??每次回到圓心，第一個值 112 是 canvas 寬的一半， 65是 canvas 高的一半。其實也可以利用js獲取對象的寬高算出來就好，省該canvas寬高后還要去調整JS代碼中的參數。

ctx.arc(...); 開始畫圖，前兩個參數是圓心坐標，第三個參數是半徑大小，第四個參數是圓周起始位置，第五個參數是弧長，就是我們圓弧的范圍，Math.PI*2就是整個圓了，Math.PI是半圓，第六個參數是個布爾值，就是確定是順時針還是逆時針，這里false是順時針。

ctx.fill() ; 填充

ctx.stroke(); 邊框

startPoint -= Math.PI*2*(data[i]/100); 畫完一個善行以后，重新計算回到原點開始繪制下一扇，否則畫出來的餅圖拼起來就不是圓形了。

效果：

目前唯一的遺憾是還不能在圖上加文字。

其它HTML5與CSS3圖形統計數據示例

轉載鏈接：http://www.qttc.net/201212255.html

轉載于:https://www.cnblogs.com/anns/p/4757574.html

總結

以上是生活随笔為你收集整理的（转）浅谈HTML5与css3画饼图！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。