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绘制饼图语法及说明

样例

结束语

参考资料

1. 饼图简介

大家对于饼图想必已经是非常熟悉了，不过为了文章的完整性，这里再做个简单回顾。

饼图（Pie Chart），亦称饼状图，是一个划分为几个扇形的圆形统计图表，用于描述量、频率或百分比之间的相对关系。在饼图中，每个扇区的弧长（以及圆心角和面积）大小为其所表示的数量的比例。这些扇区合在一起刚好是一个完全的圆形。顾名思义，这些扇区拼成了一个切开的饼形图案。 —— 来自维基百科

2. mermaid简介

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插件实现代码绘制饼图。

3. Typora绘制饼图简介

Typora 集成了Markdown绘图扩展，支持通过mermaid插件来实现代码绘制饼图（Pie Chart）。

Typora代码绘制饼图的实现原理如下：

（1）用mermaid代码（符合饼图的DSL）来描述想要绘制的饼图；

（2）调用mermaid插件（解析、渲染器）对mermaid代码进行解析并渲染后动态生成和显示相应饼图。

注：当 Typora 将 Markdown 文档导出为 HTML、PDF、epub、docx 文件格式时，相关渲染图也将包括在内；但是当 Typora 将Markdown 导出为当前版本的其他文件格式时，相关渲染图将不包括在内。

下面就进一步来对Typora利用mermaid插件实现代码绘制饼图进行详细介绍。

4. Typora绘制饼图语法及说明

因目前mermaid对饼图的支持还比较简单，故Typora利用mermaid代码绘制饼图非常简单。

语法描述如下：

语法说明如下：

1、饼图首先以 pie关键字开始（第2行）

2、紧随其后的是title关键字及饼图标题文本（第2行）。注：该部分是可选的。

3、接下来是数据集DataSet（第3-5行）：

（1）"[dataKey]"——饼图中用双引号括起来的部分是饼图数据标签

（2）:——分号作为分隔符

（3）[dataValue]——必须是正数值（最多支持两位小数）

5. 样例

5.1 简单样例

样例代码如下：

经mermaid渲染后的饼图效果如下：

5.2 简单样例（带正小数）

样例代码如下：

经mermaid渲染后的饼图效果如下：

结束语

通过上面内容的详细介绍，相信感兴趣的朋友们已经对Typora通过mermaid插件实现代码绘制饼图有了一个比较深入的了解。

接下来我会继续针对Typora代码绘制其他特定类型的图进行详细介绍，敬请大家关注后续文章！

本文为原创，如果文章对您有所帮助，喜欢的话就点个赞加关注支持一下哈：)

参考资料

撰写本文参考了如下资料：