Mermaid语法生成饼图 - Mermaid饼图语法和教程

饼图

饼图是一种圆形统计图形，将其划分为多个扇形来显示数值比例。在饼图中，每个扇形的弧长与其表示的数量成正比。

Mermaid 可以渲染饼图。

代码：

                            
                                
                                    
                                    复制
                                
                                
                                    
                                    嵌入
                                
                            
                            
                                pie title The most popular pets
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

语法

在 Mermaid 中绘制饼图非常简单。

showData 表示在图例文本之后渲染实际数值，这是可选项。

后面跟着 title 关键字及其字符串值，为饼图设置标题，这是可选项。

接下来是数据集，饼图的扇形将按照标签的顺序顺时针排列。

饼图中某一部分的 label，用双引号括起来。

后跟冒号 : 作为分隔符。

后面跟着 positive numeric value ，表示具体数值，支持最多两位小数。

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

示例

代码：

                            
                                
                                    
                                    复制
                                
                                
                                    
                                    嵌入
                                
                            
                            
                                ---
config:
  pie:
    textPosition: 0.5
  themeVariables:
    pieOuterStrokeWidth: "5px"
---
pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

配置

饼图支持以下配置参数：

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