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