成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

用CSS3做各種樣式的餅圖

Y3G / 1408人閱讀

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

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

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

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

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

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

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

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

效果 如圖所示

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

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

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

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

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

相關(guān)文章

  • 用CSS3做各種樣式的餅圖

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

    legendmohe 評論0 收藏0

  • css小點心

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

    anyway 評論0 收藏0

  • React簡單封裝ECharts餅圖

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

    lingdududu 評論0 收藏0

  • React簡單封裝ECharts餅圖

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

    ztyzz 評論0 收藏0

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

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

    ysl_unh 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<