饼图

🌐 Pie chart diagrams

饼图（或圆形图表）是一种圆形统计图表，通过将圆分成若干扇形来显示数值比例。在饼图中，每个扇形的弧长（因此其中心角和面积）与其所代表的数量成正比。虽然它因形似被切开的派而得名，但其渲染方式有多种变化。已知最早的饼图通常归功于威廉·普莱费尔在 1801 年发布的《统计小册子》。

• 维基百科

Mermaid 可以绘制饼图。

🌐 Mermaid can render Pie Chart diagrams.

代码:

⌘ + 回车键|

语法

🌐 Syntax

在 mermaid 中画饼图真的很简单。

🌐 Drawing a pie chart is really simple in mermaid.

• 使用 pie 关键字开始图表
  • showData 用于在图例文本后显示实际数据值。这是可选的
• 紧接着是 title 关键字及其字符串值，用于给饼图添加标题。这是可选的
• 随后是数据集。饼图的扇形将按照标签的顺序顺时针排列。
  • 饼图中某一部分的 label，用 " 引起来。
  • 后跟 : 冒号作为分隔符
  • 后跟 positive numeric value（支持最多两位小数）

注意：

饼图的数值必须是大于零的正数。 不允许负数，否则会导致错误。

[饼图] [显示数据]（可选） [标题] [标题值]（可选） "[数据键 1]" : [数据值 1] "[数据键 2]" : [数据值 2] "[数据键 3]" : [数据值 3] . .

甜甜圈图表 (v<MERMAID_RELEASE_VERSION>+)

🌐 Donut chart diagram (v<MERMAID_RELEASE_VERSION>+)

通过在配置中设置 donutHole 参数，Mermaid 可以渲染环形图表。

🌐 By setting donutHole parameter on config, Mermaid can render Donut Chart Diagram.

图例位置 (v<MERMAID_RELEASE_VERSION>+)

🌐 Legend Position (v<MERMAID_RELEASE_VERSION>+)

通过在配置中设置 legendPosition 参数，你可以设置图例的位置。

🌐 By setting legendPosition parameter on config, you can set where the legend is positioned.

高亮切片 (v<MERMAID_RELEASE_VERSION>+)

🌐 Highlight Slice (v<MERMAID_RELEASE_VERSION>+)

通过在配置中设置 highlightSlice 参数，你可以高亮特定的切片。你也可以通过将鼠标悬停在切片上来高亮它。

🌐 By setting highlightSlice parameter on config, you can highlight specific slice. You can also highlight slice by hovering on it.

示例

🌐 Example

代码:

⌘ + 回车键|

配置

🌐 Configuration

可能的饼图配置参数：

🌐 Possible pie diagram configuration parameters:

参数	描述	默认值
textPosition	饼图切片标签的轴向位置，从中心的 0.0 到圆的外缘 1.0。	0.75
donutHole	环形孔比例。有效值范围为 0 到 0.9。	0
legendPosition	图例相对于图表的位置。有效值为 top、bottom、left、right 和 center。	right
highlightSlice	高亮显示具有匹配标签的特定切片。设置为 'hover' 可高亮显示悬停的切片。