如何在自己的网站上做友情链接,wordpress 调用短代码,保密管理咨询公司,网络营销公司模拟创建实训OD(13)之Mermaid饼图和象限图使用详解
Author: Once Day Date: 2024年2月29日
漫漫长路才刚刚开始…
全系列文章可参考专栏: Mermaid使用指南_Once_day的博客-CSDN博客
参考文章:
关于 Mermaid | Mermaid 中文网 (nodejs.cn)Mermaid | Diagramming and charting tool…OD(13)之Mermaid饼图和象限图使用详解
Author: Once Day Date: 2024年2月29日
漫漫长路才刚刚开始…
全系列文章可参考专栏: Mermaid使用指南_Once_day的博客-CSDN博客
参考文章:
关于 Mermaid | Mermaid 中文网 (nodejs.cn)Mermaid | Diagramming and charting toolMermaid 绘图语法介绍 - 飞书云文档 (larkoffice.com)Draw Diagrams With Markdown - Typora Support (typoraio.cn)Mermaid 使用教程从入门到精通——流程图、时序图、甘特图、类图等图形绘制轻松搞定 - 知乎 (zhihu.com)饼图 | Mermaid 中文网 (nodejs.cn)象限图 | Mermaid 中文网 (nodejs.cn)mermaid live 在线mermiad工具 文章目录 OD(13)之Mermaid饼图和象限图使用详解1. 饼图1.1 介绍1.2 语法1.3 修改饼图标签的轴向位置 2. 象限图2.1 介绍2.2 语法2.3 图表配置2.4 图表主题配色 附录:附录1. 四色性格理论 1. 饼图
1.1 介绍
Mermaid是一种流行的基于文本的图表绘制语法和工具它使得开发人员能够使用简洁的文本描述来生成复杂的图表而饼图是其支持的多种图表类型之一。Mermaid最初由Knut Sveidqvist创造目的是为了简化图表的创建过程让非设计专业的开发人员也能轻松作图。自从它的推出以来Mermaid迅速赢得了广泛的用户基础尤其是在程序员和技术文档编写者中。
Mermaid的饼图Pie chart通过简单的文本标记语言提供了创建饼图的能力。饼图是一种表现数据比例关系的图形通过将圆饼分割成几个扇区来显示每一部分的大小与整体的比例关系。在Mermaid中用户可以快速编写几行代码就能生成一个清晰、美观的饼图非常适合在Markdown文件、技术文档或网页中快速嵌入图形。
下面是一个简单的示例:
pie showDatatitle Mermaid饼图示例A类物品 : 120B类物品 : 240C类物品 : 5001.2 语法
在Mermaid中饼图使用pie关键字来声明后续跟随的是一系列的键值对用以描述各个扇区的标签和数值。
下面是一份Mermaid饼图的基本语法示例
pieshowDatatitle Key elements in Product XKey lime pie : 42.96Cherry pie : 12.18Pumpkin pie : 20.29Apple 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 showDatatitle Key elements in Product XCalcium : 42.96Potassium : 50.05Magnesium : 10.01Iron : 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象限图的基本语法总结:
定义图表类型 使用 quadrantChart 关键字来声明这是一个象限图。设置标题 使用 title 关键字后跟冒号和图表的标题文本。标题是图表的简短描述它将始终渲染在图表顶部。x-axis定义 x 轴的标签使用 x-axis 关键字后跟冒号和轴的描述文本中间用 --分隔两个方向的描述。x-axis text -- text 左轴和右轴文本都将被渲染x-axis text 仅渲染左轴文本。y-axis定义 y 轴的标签与 x 轴类似使用 y-axis 关键字语法和x-axis一致。定义象限文本 使用 quadrant-[1-4] 关键字来定义每个象限的文本其中 [1-4] 是象限的编号分别是右上象限左上象限左下象限右下象限。添加数据点 使用 [name]: [x, y] 的格式来添加数据点其中 [name] 是数据点的名称[x, y] 是数据点在 x 轴和 y 轴上的坐标值对于点x和y值最小值为0最大值为1。
如果图表中没有可用的点则轴文本和象限都将在各自象限的中心呈现。如果有点x轴标签将从相应象限的左侧呈现它们也将显示在图表的底部y轴标签将在相应象限的底部呈现象限文本将在相应象限的顶部呈现。
2.3 图表配置
象限图支持很多图标配置字段通过%%{init: { ... }}%%语法来更改象限图各种图表配置:
参数描述默认值chartHeight图表的高度500chartWidth图表的宽度500pointLabelFontSize点文本字体大小12pointRadius要绘制的点的半径5pointTextPadding点和下面文本之间的填充5quadrantExternalBorderStrokeWidth象限外边框描边宽度2quadrantInternalBorderStrokeWidth象限内的边框描边宽度1quadrantLabelFontSize象限文本字体大小16quadrantPadding所有象限外的填充5quadrantTextTopPadding当文本绘制在顶部时象限文本顶部填充那里没有数据点5titlePadding标题的顶部和底部填充10titleFontSize标题字体大小20xAxisLabelPaddingx 轴文本的顶部和底部填充5xAxisLabelFontSizeX 轴文本字体大小16xAxisPositionx 轴的位置顶部、底部如果有点则 x 轴将始终渲染在底部‘top’yAxisLabelPaddingy 轴文本的左右填充5yAxisLabelFontSizeY 轴文本字体大小16yAxisPositiony 轴位置左、右‘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点文本颜色quadrantXAxisTextFillX 轴文本颜色quadrantYAxisTextFillY 轴文本颜色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 也信美人终作土不堪幽梦太匆匆...... 如果这篇文章为您带来了帮助或启发不妨点个赞和关注再加上一个小小的收藏⭐ (◕‿◕)感谢您的阅读与支持~~~
