整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
CSS實現(xiàn)餅圖效果。
沒什么卵用，但有趣的知識增加了。hello小伙伴們好，我是柴老師。今天我們來繼續(xù)分享一個好玩的案例。
它有這樣的需求，要求我們用純CS5的方式實現(xiàn)餅圖。這個餅圖一共是到4個顏色，每個色值占1/4。
大家想想看，如果不讓你用其他的就用純CS5如何來做？我們直接過來一起來實現(xiàn)一下。其實實現(xiàn)這個功能它的思路也比較容易。我們來一起看一下。
我們可以通過一個Div給它創(chuàng)建出來，無非添加一個圓角為50%。這個圓大家想想看它一共是，然后可以給這個盒子創(chuàng)建四個背景，每一個占90度是不是就實現(xiàn)這個小需求了。
這里提供了四個色值，分別是紅色、綠色、黃色以及紫色。這樣我們的紅色它站的角度是0到90度對不對？
綠色它占的角度是90度，然后到270度。再往下我們的黃色它占的是180度，最后這個紫色它是270度，到我們的360度是不是這樣個邏輯？邏輯有了以后具體用哪個技術(shù)來實現(xiàn)？其實我們要用到一個CS5，它叫做conic gradient，這個函數(shù)可以幫助我們?nèi)?chuàng)建不同的四個背景以及它相關(guān)的一個角度。
接下來我們先過來創(chuàng)建個圓出來。這里我創(chuàng)建了一個div，然后上面它的寬高都是，如何讓它變成一個圓？是不是加上一個圓角就可以了？我們加個圓角為50%，這樣它就會出現(xiàn)一個圓對不對？
我們保存一下，先過來看一下我們的圓，大家看它變成了一個圓，然后接著用我們的關(guān)鍵去創(chuàng)建它的一個四個背景。我們先過來給它來一個background，然后用一下我們這個核心函數(shù)，把它放過來，這個函數(shù)是不是需要調(diào)用，然后在里面我們依次把這個顏色和它對應(yīng)的角度給它渲染出來就可以了。
第一個是我們的紅色，紅色它所占的角度是90度，咱們給一個90度。第二個是綠色，它是90度到180度，那我們就先寫一個90，然后再來一個green到180。
第二個green也創(chuàng)建好了，再往后是我們的yellow，是180-270，好yellow 180，再來一個yellow，它是270結(jié)束。最后一個是我們的紫色，我們的purple，purple它一直到最后就可以了，從270開始，咱們就寫一個270，前面這個別忘了加單位，都給它把單位加上。
大家看一下這個完整代碼。第一個顏色值第二個顏色值，咱們初始和咱們的結(jié)尾都不需要寫這個區(qū)間。這樣寫完以后我們可以過來預(yù)覽一下，是不是已經(jīng)變成了我們想要這個樣子。
咱們保存一下過來看，大家看這個擁有4個色值的餅圖是不是就已經(jīng)實現(xiàn)了。后續(xù)大家可以利用這個函數(shù)實現(xiàn)簡單的餅圖，大家可以在這個函數(shù)里邊隨意調(diào)整我們的顏色以及它所占的角度。
今天的分享就先到這里，沒有什么卵用，但是有趣的東西又增加了！好玩
之前已經(jīng)發(fā)布了三篇Typora代碼繪圖的文章，如下：
1、Typora筆記之繪圖綜述
2、Typora筆記之繪制流程圖詳述（一）
3、Typora筆記之繪制流程圖詳述（二）
本文接著對Typora通過mermaid插件實現(xiàn)代碼繪制餅圖進(jìn)行詳細(xì)介紹，希望能對感興趣的朋友有所幫助。
注：原計劃接下來是應(yīng)該寫代碼繪制序列圖的，但粗略地過了一下，要寫的內(nèi)容不少，鑒于之前撰寫第三篇文章耗時過長，于是第四篇文章就先選個比較簡單的代碼繪制餅圖了。
本次分享的內(nèi)容目錄如下：
前言
餅圖簡介
mermaid簡介
Typora繪制餅圖簡介
Typora繪制餅圖語法及說明
樣例
結(jié)束語
參考資料
大家對于餅圖想必已經(jīng)是非常熟悉了，不過為了文章的完整性，這里再做個簡單回顧。
餅圖（Pie Chart），亦稱餅狀圖，是一個劃分為幾個扇形的圓形統(tǒng)計圖表，用于描述量、頻率或百分比之間的相對關(guān)系。在餅圖中，每個扇區(qū)的弧長（以及圓心角和面積）大小為其所表示的數(shù)量的比例。這些扇區(qū)合在一起剛好是一個完全的圓形。顧名思義，這些扇區(qū)拼成了一個切開的餅形圖案。 —— 來自維基百科
mermaid是一款免費開源的，能在瀏覽器和終端中運行的特定類型圖DSL和SVG渲染器，可以通過DSL（圖的文本表示）來繪制簡單的SVG圖。當(dāng)前版本的mermaid已經(jīng)支持多種特定類型圖，包括：流程圖（Flow Chart）、序列圖（Sequence Diagram）、類圖（Class Diagram)）、狀態(tài)圖（State Diagram）、實體關(guān)系圖（Entity Relationship Diagram）、用戶旅程圖（User Journey Diagram）、甘特圖（Gantt Diagram）、餅圖（Pie Chart）、Git圖（Git Graph）等。
使用mermaid通過代碼繪制圖非常簡單，原理是將mermaid代碼（Plain Text）通過渲染器（Mermaid JavaScript Library）來轉(zhuǎn)化成圖（Graphs, Gantt Charts, and many other Diagrams）并顯示。
目前使用mermaid實現(xiàn)代碼繪圖有以下三種方法：
（一）使用mermaid Live Editor：（網(wǎng)址：https://mermaid-js.github.io/mermaid-live-editor/）
如下圖示，在左上側(cè)的Code區(qū)編輯修改mermaid代碼，右側(cè)的Preview區(qū)就會實時顯示出經(jīng)渲染后的圖；在右下側(cè)，還能將渲染后的圖直接下載成svg或png格式的圖片等。
（二）用HTML調(diào)用mermaid渲染器
大多數(shù)網(wǎng)絡(luò)瀏覽器（例如Firefox，Chrome和Safari）都可以渲染mermaid，所以可以直接在html文件中添加mermaid代碼，這樣在打開html文件時瀏覽器就會直接完成mermaid的渲染工作，顯示出相應(yīng)圖。
示例代碼（MermaidHtmlTest.html）：
瀏覽器打開后的效果：
（三）使用mermaid插件
由于mermaid的日益普及，已經(jīng)存在許多包含mermaid渲染器的插件，比如編輯器插件就支持：Visual Studio Code、Sublime Text 3、Vim、Atom、Typora等。
本文就是此類應(yīng)用場景，依托Typora上的mermaid插件實現(xiàn)代碼繪制餅圖。
Typora 集成了Markdown繪圖擴展，支持通過mermaid插件來實現(xiàn)代碼繪制餅圖（Pie Chart）。
Typora代碼繪制餅圖的實現(xiàn)原理如下：
（1）用mermaid代碼（符合餅圖的DSL）來描述想要繪制的餅圖；
（2）調(diào)用mermaid插件（解析、渲染器）對mermaid代碼進(jìn)行解析并渲染后動態(tài)生成和顯示相應(yīng)餅圖。
注：當(dāng) Typora 將 Markdown 文檔導(dǎo)出為 HTML、PDF、epub、docx 文件格式時，相關(guān)渲染圖也將包括在內(nèi)；但是當(dāng) Typora 將Markdown 導(dǎo)出為當(dāng)前版本的其他文件格式時，相關(guān)渲染圖將不包括在內(nèi)。
下面就進(jìn)一步來對Typora利用mermaid插件實現(xiàn)代碼繪制餅圖進(jìn)行詳細(xì)介紹。
因目前mermaid對餅圖的支持還比較簡單，故Typora利用mermaid代碼繪制餅圖非常簡單。
語法描述如下：
語法說明如下：
1、餅圖首先以 pie關(guān)鍵字開始（第2行）
2、緊隨其后的是title關(guān)鍵字及餅圖標(biāo)題文本（第2行）。注：該部分是可選的。
3、接下來是數(shù)據(jù)集DataSet（第3-5行）：
（1）"[dataKey]"——餅圖中用雙引號括起來的部分是餅圖數(shù)據(jù)標(biāo)簽
（2）:——分號作為分隔符
（3）[dataValue]——必須是正數(shù)值（最多支持兩位小數(shù)）
樣例代碼如下：
經(jīng)mermaid渲染后的餅圖效果如下：
樣例代碼如下：
經(jīng)mermaid渲染后的餅圖效果如下：
通過上面內(nèi)容的詳細(xì)介紹，相信感興趣的朋友們已經(jīng)對Typora通過mermaid插件實現(xiàn)代碼繪制餅圖有了一個比較深入的了解。
接下來我會繼續(xù)針對Typora代碼繪制其他特定類型的圖進(jìn)行詳細(xì)介紹，敬請大家關(guān)注后續(xù)文章！
本文為原創(chuàng)，如果文章對您有所幫助，喜歡的話就點個贊加關(guān)注支持一下哈：)
撰寫本文參考了如下資料：
擊上方藍(lán)字關(guān)注“小鄭搞碼事”，每天都能學(xué)到知識，搞懂一個問題！
Canvas是HTML5提供的新標(biāo)簽，通過JavaScript可以在Canvas元素上繪制圖片并實現(xiàn)動畫效果，今天展示一下Canvas繪制一個簡單餅圖的基本過程。
實現(xiàn)上面圖中的餅圖效果，首先在HTML引入Canvas標(biāo)簽，代碼如下：
1、在JavaScript文件，創(chuàng)建PieChart類，并在其構(gòu)造函數(shù)中獲取Canvas的Context環(huán)境。
2、添加PieChart類原型方法load用于載入餅圖所使用的數(shù)據(jù)，并計算餅圖的數(shù)據(jù)總量，用于之后渲染餅圖時分配每個數(shù)據(jù)所對應(yīng)的扇形比例。
3、添加PieChart類原型方法render用于對餅圖進(jìn)行渲染，_generateLegend內(nèi)部函數(shù)用于創(chuàng)建餅圖對應(yīng)的圖例，當(dāng)存在legend參數(shù)調(diào)用_generateLegend生成餅圖圖例。
4、最后，引入需要繪制的數(shù)據(jù)創(chuàng)建餅圖對象即可完成餅圖繪制。
總結(jié)一下：
在目前來看在移動端利用2d放射變換來實現(xiàn)的動畫比較實惠的還是canvas 2d了。在大部分機型上canvas都能獲得更好的渲染性能（在硬件加速情況下，瀏覽器會將繪圖命令切換成gpu硬件來執(zhí)行），并且現(xiàn)在的硬件加速支持程度也比較好。所以如果需要運動的物體多的話建議用canvas。
注：需要源代碼運行的可以私信喲！！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
