用CSS3作各類樣式的餅圖

經過css3的旋轉屬性來實現餅圖的效果。封裝了一個餅圖類，經過實例化來生成各類樣式的餅圖。

之前一直用highcharts作餅圖的效果，但有時候，一些比較簡單的餅圖用highcharts的話有點殺雞用牛刀的感受。因此本身研究了一下如何用css3來達到這個效果。並封裝了一下，支持多種樣式，寫了一個 pie.js 。

原理是這樣的，父容器是一個div，背景顏色是左邊一半灰色，右邊一半綠色。

裏面有2個能夠旋轉的div，小於50%的時候，第一個div是灰色的，順時針旋轉一下就行了，即用灰色遮綠色。

若是超過50%了，則須要用到第二個綠色的div，也是順時針旋轉一下，用綠色遮蓋灰色的底。

有興趣的同窗能夠fork一下下面的地址看一下源碼。

github傳送門：http://lancer07.github.io/css3_pie/

效果 如圖所示

使用也很方便，html是這樣的，用data-value屬性來存要顯示的百分比。

<div class="pie" id="colorful-pie" data-value="0.2"></div>

而後實例化一個餅圖類,可配可不配一些參數。

var myPie = new Pie({
    el : ‘#colorful-pie’,  // 選擇器
    animite : true,        // 是否要有動畫效果
    ring : 0.7,            // 中間是否要空心，並設置空心的半徑 
    color : '#ff9933'      // 自定義餅圖的顏色,
    number :false,         // 是否要顯示中間的百分比
    rotate : -40           // 設置起點角度，默認是從12點鐘方向開始的
});
myPie.init();    // 實例化

這樣就生成了一個餅狀圖了。

PS：
應該還有更好的方法來實現，但願你們能告訴我。多謝！