用CSS3做各種樣式的餅圖

legendmohe 發布于2019-08-19 18:26 / 2848人閱讀

摘要：通過的旋轉屬性來實現餅圖的效果。封裝了一個餅圖類，通過實例化來生成各種樣式的餅圖。以前一直用做餅圖的效果，但有時候，一些比較簡單的餅圖用的話有點殺雞用牛刀的感覺。并封裝了一下，支持多種樣式，寫了一個。

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

以前一直用highcharts做餅圖的效果，但有時候，一些比較簡單的餅圖用highcharts的話有點殺雞用牛刀的感覺。所以自己研究了一下如何用css3來達到這個效果。并封裝了一下，支持多種樣式，寫了一個 pie.js 。

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

里面有2個可以旋轉的div，小于50%的時候，第一個div是灰色的，順時針旋轉一下就好了，即用灰色遮綠色。

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

有興趣的同學可以fork一下下面的地址看一下源碼。

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

效果如圖所示

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

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

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

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

PS：
應該還有更好的方法來實現，希望大家能告訴我。多謝！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79614.html

用CSS3做各種樣式的餅圖

摘要：通過的旋轉屬性來實現餅圖的效果。封裝了一個餅圖類，通過實例化來生成各種樣式的餅圖。以前一直用做餅圖的效果，但有時候，一些比較簡單的餅圖用的話有點殺雞用牛刀的感覺。并封裝了一下，支持多種樣式，寫了一個。通過css3的旋轉屬性來實現餅圖的效果。封裝了一個餅圖類，通過實例化來生成各種樣式的餅圖。以前一直用highcharts做餅圖的效果，但有時候，一些比較簡單的餅圖用highcharts...

Y3G 2019-08-30 13:05 評論0 收藏0
css小點心

摘要：有一個在郵件中用餅圖直觀地顯示用戶的各項消費比例的需求。第一步得到一個小扇形。附上各郵箱對的支持情況免費領取驗證碼內容安全短信發送直播點播體驗包及云服務器等套餐更多網易技術產品運營經驗分享請訪問網易云社區。文章來源網易云社區本文由作者鄒欣華授權網易云社區發布。有一個在郵件中用餅圖直觀地顯示用戶的各項消費比例的需求。郵箱中不能用js，純css實現餅圖，只能通過后端模版渲染數據，所以數...

anyway 2019-06-28 11:06 評論0 收藏0
React簡單封裝ECharts餅圖

摘要：默認使用得到的是已經加載了所有圖表和組件的包，因此體積會比較大，如果在項目中對體積要求比較苛刻，也可以只按需引入需要的模塊。官方式這么說的，所以我們要到去查看可以引入的模塊列表，并按需引入。使用ECharts 獲取ECharts Echarts官網教程中就有告訴通過各種方式獲取Echarts：http://echarts.baidu.com/tutorial.html 最簡單的方式就...

lingdududu 2019-08-20 18:09 評論0 收藏0
React簡單封裝ECharts餅圖

摘要：默認使用得到的是已經加載了所有圖表和組件的包，因此體積會比較大，如果在項目中對體積要求比較苛刻，也可以只按需引入需要的模塊。官方式這么說的，所以我們要到去查看可以引入的模塊列表，并按需引入。使用ECharts 獲取ECharts Echarts官網教程中就有告訴通過各種方式獲取Echarts：http://echarts.baidu.com/tutorial.html 最簡單的方式就...

ztyzz 2019-08-01 17:13 評論0 收藏0
[CSS]《CSS揭秘》第三章——形狀

摘要：自適應橢圓斜杠前為水平半徑，后為垂直半徑。和下特有的，用于在渲染中向元素邏輯上的頭部或尾部添加內容。所以不要用或展示有實際意義的內容，盡量使用它們顯示修飾性內容，例如圖標。和必須配合屬性來使用，用來定義插入的內容，必須有值，至少是空。自適應橢圓 border-radius:50% / 50%;//斜杠前為水平半徑，后為垂直半徑。 background: #fb3; b...

ysl_unh 2019-08-30 15:53 評論0 收藏0