【MarkDown】CSDN Markdown之饼状图pie详解

饼状图

饼状图常用于统计学模型。有2D与3D饼状图，2D饼状图为圆形，手画时，常用圆规作图。饼状图显示一个数据系列（数据系列：在图表中绘制的相关数据点，这些数据源自数据表的行或列。图表中的每个数据系列具有唯一的颜色或图案并且在图表的图例中表示。可以在图表中绘制一个或多个数据系列。饼状图只有一个数据系列。）中各项的大小与各项总和的比例。饼状图中的数据点（数据点：在图表中绘制的单个值，这些值由条形、柱形、折线、饼状图或圆环图的扇面、圆点和其他被称为数据标记的图形表示。相同颜色的数据标记组成一个数据系列。）显示为整个饼状图。           – 百度百科

Mermaid 可以渲染饼状图。

代码:

```mermaid
pie title 志愿者收养宠物数量
“狗” : 386
“猫” : 85
“鼠” : 15
```

79% 17% 3% 志愿者收养宠物数量 狗 猫 鼠

语法

在mermaid画一个饼图是非常简单的。

• pie关键字是饼状图的开始
• 紧接着，showData关键字可以显示实际的数据值。可选项
• 紧接着，title关键字可以为饼状图起一个名字。可选项
• 紧接着，dataSet数据集，饼状图中的扇形将按照标签顺序顺时针排序。

  • 紧接着，标签块的文本使用" "包起来。

  • 紧接着，使用 : 标签与文本的分割符号。

  • 紧接着，正数值 (最多支持小数点后两位)

    [pie] [showData] (可选) [title] <标题> (可选) "[标签1]" : [数据1] "[标签2]" : [数据2] "[标签3]" : [数据1] . .
    

示例

代码:

```mermaid
%%{init: {“pie”: {“textPosition”: 0.5}, “themeVariables”: {“pieOuterStrokeWidth”: “5px”}} }%%
pie showData
title 产品X元素含量
“钙” : 42.96
“钾” : 50.05
“镁” : 10.01
“铁” : 5
```

40% 46% 9% 5% 产品X元素含量 钙 [42.96] 钾 [50.05] 镁 [10.01] 铁 [5]

配置

饼状图允许的配置参数如下:

参数	描述	默认值
textPosition	饼图切片标签的轴向位置，从圆心的0.0到圆外缘的1.0。	0.75