OD(13)之Mermaid饼图和象限图使用详解

Author: Once Day Date: 2024年2月29日

漫漫长路才刚刚开始…

全系列文章可参考专栏: Mermaid使用指南_Once_day的博客-CSDN博客

参考文章:

• 关于 Mermaid | Mermaid 中文网 (nodejs.cn)
• Mermaid | Diagramming and charting tool
• ‍‌⁡⁤‍‍⁢‌‬⁡⁤⁢‍‌⁣⁢⁢⁤⁣‌‌⁢⁣⁢⁤⁡‌‌⁤⁤⁢⁡⁡⁢‍⁢⁣⁤‌Mermaid 绘图语法介绍 - 飞书云文档 (larkoffice.com)
• Draw Diagrams With Markdown - Typora Support (typoraio.cn)
• Mermaid 使用教程：从入门到精通——流程图、时序图、甘特图、类图等图形绘制轻松搞定 - 知乎 (zhihu.com)
• 饼图 | Mermaid 中文网 (nodejs.cn)
• 象限图 | Mermaid 中文网 (nodejs.cn)
• mermaid live 在线mermiad工具

1. 饼图

1.1 介绍

Mermaid是一种流行的基于文本的图表绘制语法和工具，它使得开发人员能够使用简洁的文本描述来生成复杂的图表，而饼图是其支持的多种图表类型之一。Mermaid最初由Knut Sveidqvist创造，目的是为了简化图表的创建过程，让非设计专业的开发人员也能轻松作图。自从它的推出以来，Mermaid迅速赢得了广泛的用户基础，尤其是在程序员和技术文档编写者中。

Mermaid的饼图（Pie chart）通过简单的文本标记语言提供了创建饼图的能力。饼图是一种表现数据比例关系的图形，通过将圆饼分割成几个扇区来显示每一部分的大小与整体的比例关系。在Mermaid中，用户可以快速编写几行代码，就能生成一个清晰、美观的饼图，非常适合在Markdown文件、技术文档或网页中快速嵌入图形。

下面是一个简单的示例:

pie 
	showData
	title Mermaid饼图示例
	"A类物品" : 120
	"B类物品" : 240
	"C类物品" : 500

1.2 语法

在Mermaid中，饼图使用pie关键字来声明，后续跟随的是一系列的键值对，用以描述各个扇区的标签和数值。

下面是一份Mermaid饼图的基本语法示例：

pie
	showData
    title Key elements in Product X
    "Key lime pie" : 42.96
    "Cherry pie" : 12.18
    "Pumpkin pie" : 20.29
    "Apple pie" : 24.57

这里，我们定义了一个标题为“Key elements in Product X”的饼图，其中包含四个扇区，每一个扇区由冒号分隔的两部分组成：左边是扇区的名称，右边是对应的数值。在这个例子中，我们可以看到不同馅料的派对应的数值，这些数值将决定饼图中每个扇区的大小。

下面详细解释这个语法的各个组成部分：

• pie 关键字：这是开始绘制饼图的标记。
• showData关键字: 在图例后面显示真实数据(即42.96/12.18等实际数据显示出来)
• title 关键字：后面跟随的文本是饼图的标题，它会显示在饼图的上方或中心。
• 扇区定义：每一行定义了一个扇区，其中包括扇区的名称和数值，例如 "Key lime pie" : 42.96 表示一个名为“Key lime pie”的扇区，它在饼图中占的比例为42.96%(相对比例，计算整体之和再分散比例)，支持最多两位小数。

整体语法规则如下所示:

[pie] 
	[showData] (OPTIONAL)
	[title] [titlevalue] (OPTIONAL) 
	"[datakey1]" : [dataValue1] 
	"[datakey2]" : [dataValue2] 
	"[datakey3]" : [dataValue3]
	......

1.3 修改饼图标签的轴向位置

通过增加预配置字段来实现textPosition，可以改变饼图切片标签的轴向位置，从中心的 0.0 到圆外边缘的 1.0:

%%{init: {"pie": {"textPosition": 0.4}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

通过修改textPosition的值，可以将46%/40等标签位置进行偏移。

2. 象限图

2.1 介绍

Mermaid的象限图功能允许用户创建象限图，这种图表通常用于分析和展示数据点在两个维度上的分布，广泛应用于优先级划分、风险评估、市场分析等领域。象限图将图表区域划分为四个部分，通常以水平和垂直轴的中点为分界，形成四个象限，每个象限代表不同的数据或特性组合。

在 Mermaid 中创建象限图，首先需要定义图表的标题、x轴和y轴的标签，以及每个象限的文本。数据点通过 x 和 y 坐标值来表示，这些值通常在 0 到 1 的范围内。Mermaid 提供了丰富的配置选项，允许用户自定义图表的尺寸、填充颜色、文本样式等。

下面以四色性格理论来制作一个象限图：

quadrantChart title 四色性格
quadrant-1 "Dominance(支配型)"
quadrant-2 "Influence(影响型)"
quadrant-3 "Steadiness(稳定型)"
quadrant-4 "Conscientiousness(尽责型)"
"A员工": [0.3,0.6]
"B员工": [0.45,0.23]
"C员工": [0.57,0.69]
"D员工": [0.78,0.34]
"E员工": [0.40,0.34]
"F员工": [0.35,0.78]

2.2 语法

Mermaid象限图的基本语法总结:

1. 定义图表类型： 使用 quadrantChart 关键字来声明这是一个象限图。
2. 设置标题： 使用 title 关键字后跟冒号和图表的标题文本。标题是图表的简短描述，它将始终渲染在图表顶部。
3. x-axis定义 x 轴的标签：使用 x-axis 关键字后跟冒号和轴的描述文本，中间用 -->分隔两个方向的描述。x-axis <text> --> <text> 左轴和右轴文本都将被渲染，x-axis <text> 仅渲染左轴文本。
4. y-axis定义 y 轴的标签：与 x 轴类似，使用 y-axis 关键字，语法和x-axis一致。
5. 定义象限文本： 使用 quadrant-[1-4] 关键字来定义每个象限的文本，其中 [1-4] 是象限的编号，分别是右上象限，左上象限，左下象限，右下象限。
6. 添加数据点： 使用 [name]: [x, y] 的格式来添加数据点，其中 [name] 是数据点的名称，[x, y] 是数据点在 x 轴和 y 轴上的坐标值，对于点x和y值，最小值为0，最大值为1。

如果图表中没有可用的点，则轴文本和象限都将在各自象限的中心呈现。如果有点，x轴标签将从相应象限的左侧呈现，它们也将显示在图表的底部，y轴标签将在相应象限的底部呈现，象限文本将在相应象限的顶部呈现。

2.3 图表配置

象限图支持很多图标配置字段，通过%%{init: { ... }}%%语法，来更改象限图各种图表配置:

参数	描述	默认值
chartHeight	图表的高度	500
chartWidth	图表的宽度	500
pointLabelFontSize	点文本字体大小	12
pointRadius	要绘制的点的半径	5
pointTextPadding	点和下面文本之间的填充	5
quadrantExternalBorderStrokeWidth	象限外边框描边宽度	2
quadrantInternalBorderStrokeWidth	象限内的边框描边宽度	1
quadrantLabelFontSize	象限文本字体大小	16
quadrantPadding	所有象限外的填充	5
quadrantTextTopPadding	当文本绘制在顶部时象限文本顶部填充（那里没有数据点）	5
titlePadding	标题的顶部和底部填充	10
titleFontSize	标题字体大小	20
xAxisLabelPadding	x 轴文本的顶部和底部填充	5
xAxisLabelFontSize	X 轴文本字体大小	16
xAxisPosition	x 轴的位置（顶部、底部）如果有点，则 x 轴将始终渲染在底部	‘top’
yAxisLabelPadding	y 轴文本的左右填充	5
yAxisLabelFontSize	Y 轴文本字体大小	16
yAxisPosition	y 轴位置（左、右）	‘left’

下面是一个简单示例，修改图表高度和宽度，以及pointTextPadding点和下面文本之间的填充，如下:

%%{init: {"quadrantChart": {"chartHeight": 300, "chartWidth": 800, "pointTextPadding": 10}}}%%
quadrantChart title 四色性格
quadrant-1 "Dominance(支配型)"
quadrant-2 "Influence(影响型)"
quadrant-3 "Steadiness(稳定型)"
quadrant-4 "Conscientiousness(尽责型)"
"A员工": [0.3,0.6]
"B员工": [0.45,0.23]
"C员工": [0.57,0.69]

2.4 图表主题配色

参数	描述
quadrant1Fill	右上象限的填充颜色
quadrant2Fill	左上象限的填充颜色
quadrant3Fill	左下象限的填充颜色
quadrant4Fill	右下象限的填充颜色
quadrant1TextFill	右上象限的文本颜色
quadrant2TextFill	左上象限的文本颜色
quadrant3TextFill	左下象限的文本颜色
quadrant4TextFill	右下象限的文本颜色
quadrantPointFill	点填充颜色
quadrantPointTextFill	点文本颜色
quadrantXAxisTextFill	X 轴文本颜色
quadrantYAxisTextFill	Y 轴文本颜色
quadrantInternalBorderStrokeFill	象限内边框颜色
quadrantExternalBorderStrokeFill	象限外边框颜色
quadrantTitleFill	标题颜色

我们按照四色性格理论，给每个象限补上对应的颜色:

%%{init: {"quadrantChart": {"chartHeight": 300, "chartWidth": 800, "pointTextPadding": 10}, "themeVariables": {"quadrant1Fill": "#ff0000", "quadrant2Fill": "#FFFF00", "quadrant3Fill": "#32CD32", "quadrant4Fill": "#800080"}}}%%
quadrantChart title 四色性格
quadrant-1 "Dominance(支配型)"
quadrant-2 "Influence(影响型)"
quadrant-3 "Steadiness(稳定型)"
quadrant-4 "Conscientiousness(尽责型)"
"A员工": [0.3,0.6]
"B员工": [0.45,0.23]
"C员工": [0.57,0.69]

附录:

附录1. 四色性格理论

四色性格理论，又名DISC行为风格分析，是一种广泛应用于个人发展、团队建设和职业规划中的心理评估工具。DISC是由威廉·莫尔顿·马斯顿（William Moulton Marston）在20世纪早期提出的理论，其名称来源于四个代表不同性格特质的英文单词：Dominance（支配型）、Influence（影响型）、Steadiness（稳定型）和Conscientiousness（尽责型）。

四色性格理论通过将DISC理论中的行为特征与颜色相关联，使得理论更加形象易懂。这四种颜色通常是：

• 红色：代表Dominance（支配型），此类个体通常表现为竞争力强、果断和直接的。
• 黄色：代表Influence（影响型），这类人往往热情、乐观、善于交际。
• 绿色：代表Steadiness（稳定型），特点是耐心、合作、善于倾听。
• 蓝色：代表Conscientiousness（尽责型），此类性格的人谨慎、精确、逻辑性强。

在象限图中，通常将Dominance和Influence放在上方两个象限，表示这两种性格倾向于更加外向和主动；而Steadiness和Conscientiousness放在下方两个象限，代表这两种性格更倾向于内向和被动。同时，Dominance和Conscientiousness放在左侧象限，表示更倾向于任务导向；Influence和Steadiness放在右侧象限，表示更倾向于人际导向。

Once Day

也信美人终作土，不堪幽梦太匆匆......

如果这篇文章为您带来了帮助或启发，不妨点个赞👍和关注，再加上一个小小的收藏⭐！

(｡◕‿◕｡)感谢您的阅读与支持~~~