成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

用CSS3做各種樣式的餅圖

Y3G / 1471人閱讀

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

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

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

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

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

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

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

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

效果 如圖所示

使用也很方便，html是這樣的，用data-value屬性來存要顯示的百分比。
然后實(shí)例化一個(gè)餅圖類,可配可不配一些參數(shù)。 
var myPie = new Pie({
    el : ‘#colorful-pie’,  // 選擇器
    animite : true,        // 是否要有動(dòng)畫效果
    ring : 0.7,            // 中間是否要空心，并設(shè)置空心的半徑 
    color : "#ff9933"      // 自定義餅圖的顏色,
    number :false,         // 是否要顯示中間的百分比
    rotate : -40           // 設(shè)置起點(diǎn)角度，默認(rèn)是從12點(diǎn)鐘方向開始的
});
myPie.init();    // 實(shí)例化

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/115293.html

相關(guān)文章

  • 用CSS3做各種樣式的餅圖

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

    legendmohe 評(píng)論0 收藏0

  • css小點(diǎn)心

    摘要：有一個(gè)在郵件中用餅圖直觀地顯示用戶的各項(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ǎng)易云社區(qū)。文章來源網(wǎng)易云社區(qū) 本文由作者鄒欣華授權(quán)網(wǎng)易云社區(qū)發(fā)布。 有一個(gè)在郵件中用餅圖直觀地顯示用戶的各項(xiàng)消費(fèi)比例的需求。郵箱中不能用js，純css實(shí)現(xiàn)餅圖，只能通過后端模版渲染數(shù)據(jù)，所以數(shù)...

    anyway 評(píng)論0 收藏0

  • React簡(jiǎn)單封裝ECharts餅圖

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

    lingdududu 評(píng)論0 收藏0

  • React簡(jiǎn)單封裝ECharts餅圖

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

    ztyzz 評(píng)論0 收藏0

  • [CSS]《CSS揭秘》第三章——形狀

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

    ysl_unh 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<