神馬系餅圖？

餅圖，大家都應(yīng)該熟知，在統(tǒng)計數(shù)據(jù)對比方面，幾乎處處用到。如cnzz的統(tǒng)計餅圖

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

都使用什么方法實現(xiàn)

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

cnzz里使用的就是flash

PHP生成的

HTML5與CSS3也能畫出餅圖

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

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

然而，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上的高度可以自己隨意設(shè)置，當(dāng)然寬不能小于高，否則圖形出來不是圓的。

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

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

var data = [25,35,50]; ?數(shù)據(jù)比，全部是數(shù)據(jù)加起來是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寬高后還要去調(diào)整JS代碼中的參數(shù)。

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

ctx.fill() ; 填充

ctx.stroke(); 邊框

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

效果：

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

其它HTML5與CSS3圖形統(tǒng)計數(shù)據(jù)示例

轉(zhuǎn)載鏈接：http://www.qttc.net/201212255.html

轉(zhuǎn)載于:https://www.cnblogs.com/anns/p/4757574.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。