用CSS3做各種樣式的餅圖

legendmohe 發(fā)布于2019-08-19 18:26 / 2868人閱讀

摘要：通過(guò)的旋轉(zhuǎn)屬性來(lái)實(shí)現(xiàn)餅圖的效果。封裝了一個(gè)餅圖類(lèi)，通過(guò)實(shí)例化來(lái)生成各種樣式的餅圖。以前一直用做餅圖的效果，但有時(shí)候，一些比較簡(jiǎn)單的餅圖用的話(huà)有點(diǎn)殺雞用牛刀的感覺(jué)。并封裝了一下，支持多種樣式，寫(xiě)了一個(gè)。

通過(guò)css3的旋轉(zhuǎn)屬性來(lái)實(shí)現(xiàn)餅圖的效果。封裝了一個(gè)餅圖類(lèi)，通過(guò)實(shí)例化來(lái)生成各種樣式的餅圖。

以前一直用highcharts做餅圖的效果，但有時(shí)候，一些比較簡(jiǎn)單的餅圖用highcharts的話(huà)有點(diǎn)殺雞用牛刀的感覺(jué)。所以自己研究了一下如何用css3來(lái)達(dá)到這個(gè)效果。并封裝了一下，支持多種樣式，寫(xiě)了一個(gè) pie.js 。

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

里面有2個(gè)可以旋轉(zhuǎn)的div，小于50%的時(shí)候，第一個(gè)div是灰色的，順時(shí)針旋轉(zhuǎn)一下就好了，即用灰色遮綠色。

如果超過(guò)50%了，則需要用到第二個(gè)綠色的div，也是順時(shí)針旋轉(zhuǎn)一下，用綠色遮蓋灰色的底。

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

github傳送門(mén)：http://lancer07.github.io/css3_pie/

效果如圖所示

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

然后實(shí)例化一個(gè)餅圖類(lèi),可配可不配一些參數(shù)。

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

這樣就生成了一個(gè)餅狀圖了。

PS：
應(yīng)該還有更好的方法來(lái)實(shí)現(xiàn)，希望大家能告訴我。多謝！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79614.html

相關(guān)文章

用CSS3做各種樣式的餅圖

摘要：通過(guò)的旋轉(zhuǎn)屬性來(lái)實(shí)現(xiàn)餅圖的效果。封裝了一個(gè)餅圖類(lèi)，通過(guò)實(shí)例化來(lái)生成各種樣式的餅圖。以前一直用做餅圖的效果，但有時(shí)候，一些比較簡(jiǎn)單的餅圖用的話(huà)有點(diǎn)殺雞用牛刀的感覺(jué)。并封裝了一下，支持多種樣式，寫(xiě)了一個(gè)。通過(guò)css3的旋轉(zhuǎn)屬性來(lái)實(shí)現(xiàn)餅圖的效果。封裝了一個(gè)餅圖類(lèi)，通過(guò)實(shí)例化來(lái)生成各種樣式的餅圖。以前一直用highcharts做餅圖的效果，但有時(shí)候，一些比較簡(jiǎn)單的餅圖用highcharts...

Y3G 2019-08-30 13:05 評(píng)論0 收藏0
css小點(diǎn)心

摘要：有一個(gè)在郵件中用餅圖直觀地顯示用戶(hù)的各項(xiàng)消費(fèi)比例的需求。第一步得到一個(gè)小扇形。附上各郵箱對(duì)的支持情況免費(fèi)領(lǐng)取驗(yàn)證碼內(nèi)容安全短信發(fā)送直播點(diǎn)播體驗(yàn)包及云服務(wù)器等套餐更多網(wǎng)易技術(shù)產(chǎn)品運(yùn)營(yíng)經(jīng)驗(yàn)分享請(qǐng)?jiān)L問(wèn)網(wǎng)易云社區(qū)。文章來(lái)源網(wǎng)易云社區(qū) 本文由作者鄒欣華授權(quán)網(wǎng)易云社區(qū)發(fā)布。有一個(gè)在郵件中用餅圖直觀地顯示用戶(hù)的各項(xiàng)消費(fèi)比例的需求。郵箱中不能用js，純css實(shí)現(xiàn)餅圖，只能通過(guò)后端模版渲染數(shù)據(jù)，所以數(shù)...

anyway 2019-06-28 11:06 評(píng)論0 收藏0
React簡(jiǎn)單封裝ECharts餅圖

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

lingdududu 2019-08-20 18:09 評(píng)論0 收藏0
React簡(jiǎn)單封裝ECharts餅圖

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

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

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

ysl_unh 2019-08-30 15:53 評(píng)論0 收藏0