OD(13)之Mermaid饼图和象限图

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工具

文章目录

      • 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类物品" : 120"B类物品" : 240"C类物品" : 500

在这里插入图片描述

1.2 语法

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

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

pieshowDatatitle 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 showDatatitle 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
xAxisLabelPaddingx 轴文本的顶部和底部填充5
xAxisLabelFontSizeX 轴文本字体大小16
xAxisPositionx 轴的位置(顶部、底部)如果有点,则 x 轴将始终渲染在底部‘top’
yAxisLabelPaddingy 轴文本的左右填充5
yAxisLabelFontSizeY 轴文本字体大小16
yAxisPositiony 轴位置(左、右)‘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放在右侧象限,表示更倾向于人际导向。







Alt

Once Day

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/710586.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FPGA-学会使用vivado中的存储器资源RAM(IP核)

问题 信号源(例如ADC)以1us一个的速率产生12位的数据现要求获得连续1ms内的数据,通过串口以115200的波特率发到电脑。 分析 数据量是1000个 数据速率不匹配 数据内容未知 数据总数据量有限 数据的使用速度低于数据的产生速度 数据生产和消耗的位宽 数据量相对较…

ywtool check命令及ywtool clean命令

一.ywtool check命令 1.1 ywtool check -I 1.2 ywtool check all 1.3 ywtool check io 1.4 ywtool check elk 1.5 ywtool check php 1.6 ywtool check mysql 1.7 ywtool check nginx 1.8 ywtool check system 1.9 ywtool check docker_nbip [容器名称] 1.10 ywtool check 1.10…

综合练习(一)

目录 列出薪金高于部门 30 的所有员工薪金的员工姓名和薪金、部门名称、部门人数 列出与 ALLEN从事相同工作的所有员工及他们的部门名称、部门人数、领导姓名 Oracle从入门到总裁:https://blog.csdn.net/weixin_67859959/article/details/135209645 列出薪金高于部门 30 的所…

基于JSON的Ollama和LangChain agent

到目前为止&#xff0c;我们都可能意识到&#xff0c;通过为LLMs提供额外的工具&#xff0c;我们可以显著增强它们的功能。 例如&#xff0c;即使是ChatGPT在付费版本中也可以直接使用Bing搜索和Python解释器。OpenAI更进一步&#xff0c;为工具使用提供了经过优化的LLM模型&am…

js方法 提前结束循环

http://t.csdnimg.cn/j0gkOhttp://t.csdnimg.cn/j0gkO 一、各种循环方法如何跳出整个循环&#xff1f; 对于forEach()方法&#xff0c;目前似乎没有比较优雅的跳出整个循环的方法&#xff0c;如果你实在要用forEach()方法并且需要在某种条件下跳出整个循环提高遍历效率&#x…

政安晨:【掌握AI的深度学习工具Keras API】(二)—— 【使用内置的训练循环和评估循环】

渐进式呈现复杂性&#xff0c;是指采用一系列从简单到灵活的工作流程&#xff0c;并逐步提高复杂性。这个原则也适用于模型训练。Keras提供了训练模型的多种工作流程。这些工作流程可以很简单&#xff0c;比如在数据上调用fit()&#xff0c;也可以很高级&#xff0c;比如从头开…

uniapp实战:父子组件传参之子组件数量动态变化

需求说明 现有的设置单元列表,每个带有虚线加号的可以看做是一组设置单元,点击加号可以添加一组设置单元.点击设置单元右上角可以删除对应的设置单元. 实现思路说明 利用数组元素添加或是删除的方式实现页面数量动态变化.由于每个设置单元内容都相同所以单独封装了一个子组件.…

高效备考2025年AMC8数学竞赛:2000-2024年AMC8真题练一练

如何提高小学和初中数学成绩&#xff1f;小学和初中可以参加的数学竞赛有哪些&#xff1f;不妨了解一下AMC8美国数学竞赛&#xff0c;现在许多小学生和初中生都在参加这个比赛。如果孩子有兴趣&#xff0c;有余力的话可以系统研究AMC8的历年真题&#xff0c;即使不参加AMC8竞赛…

YOLOv9大幅度按比例减小模型计算量!加快训练!

一、代码及论文链接&#xff1a; 代码链接&#xff1a;GitHub - WongKinYiu/yolov9: Implementation of paper - YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information 论文链接&#xff1a;https://github.com/WongKinYiu/yolov9/tree/main 二…

02| JVM堆中垃圾回收的大致过程

如果一直在创建对象&#xff0c;堆中年轻代中Eden区会逐渐放满&#xff0c;如果Eden放满&#xff0c;会触发minor GC回收&#xff0c;创建对象的时GC Roots&#xff0c;如果存在于里面的对象&#xff0c;则被视为非垃圾对象&#xff0c;不会被此次gc回收&#xff0c;就会被移入…

深度学习500问——Chapter02:机器学习基础(1)

文章目录 前言 2.1 基本概念 2.1.1 大话理解机器学习本质 2.1.2 什么是神经网络 2.1.3 各种常见算法图示 2.1.4 计算图的导数计算 2.1.5 理解局部最优与全局最优 2.1.5 大数据与深度学习之间的关系 2.2 机器学习学习方式 2.2.1 监督学习 2.2.2 非监督式学习 2.2.3 …

TVM 和模型优化的概述(1)

文章目录 1. 从 Tensorflow、PyTorch 或 Onnx 等框架导入模型&#xff08;model&#xff09;。2.翻译成 Relay3. lower 到 张量表达式。4. 使用 auto-tuning 模块 AutoTVM 或 AutoScheduler 搜索最佳 schedule。5. 选择最佳配置进行模型编译。6. lower 到 TIR。7. 编译成机器码…

波奇学Linux:共享内存

进程通信的前提&#xff1a;不同的进程看到同一份的资源 直接原理:同一块物理内存映射到不同进程的共享区 共享内存拆解&#xff1a; 1.申请内存&#xff0c;通过页表映射到进程地址空间 2.返回首地址&#xff0c;便于进程利用 3.释放共享内存&#xff0c;去关联 4.内存的申请…

flex的5种常见使用

Flex 布局教程&#xff1a;语法篇 文章目录 一.基本概念二 例子 其实我每次记一个样式标签,都是根据英文来记,但是justify-content和align-items确实让我迷惑,这次我打算只记 justify-content属性定义了项目在主轴上的对齐方式,好好总结一下用法~ 一.基本概念 采用 Flex 布局…

SpringBoot 事务失效及其对应解决办法

简介 本文主要讲述Spring事务会去什么情况下失效及其解决办法 Spring 通过AOP 进行事务控制&#xff0c;如果操作数据库报异常&#xff0c;则会进行回滚&#xff1b;如果没有报异常则会提交事务&#xff1b;但是&#xff0c;如果Spring 事务失效&#xff0c;会导致数据缺失/重…

【STM32】STM32学习笔记-独立看门狗和窗口看门狗(47)

00. 目录 文章目录 00. 目录01. WDG概述02. 独立看门狗相关API2.1 IWDG_WriteAccessCmd2.2 IWDG_SetPrescaler2.3 IWDG_SetReload2.4 IWDG_ReloadCounter2.5 IWDG_Enable2.6 IWDG_GetFlagStatus2.7 RCC_GetFlagStatus 03. 独立看门狗接线图04. 独立看门狗程序示例105. 独立看门…

OD(12)之Mermaid思维导图(Mindmap)

OD(12)之Mermaid思维导图(Mindmap)使用详解 Author: Once Day Date: 2024年2月29日 漫漫长路才刚刚开始… 全系列文章可参考专栏: Mermaid使用指南_Once_day的博客-CSDN博客 参考文章: 关于 Mermaid | Mermaid 中文网 (nodejs.cn)Mermaid | Diagramming and charting tool…

postman传参与返回值切换为左右显示的操作

目录 第一步 点击“Settings”&#xff0c;在下拉框选择“Settings” 第二步 在默认打开的General页面&#xff0c;参照下图改动两处 第一步 点击“Settings”&#xff0c;在下拉框选择“Settings” 第二步 在默认打开的General页面&#xff0c;参照下图改动两处 附上修改后…

opencv中的rgb转gray的计算方法

转换原理 在opencv中&#xff0c;可以使用cv2.cvtColor函数将rgb图像转换为gray图像。示例代码如下&#xff0c; import cv2img_path "image.jpg" image cv2.imread(img_path) gray_image cv2.cvtColor(image, cv2.COLOR_BGR2GRAY) mean gray_image.mean() pri…

【AI Agent系列】【MetaGPT多智能体学习】4. 基于MetaGPT的Team组件开发你的第一个智能体团队

本系列文章跟随《MetaGPT多智能体课程》&#xff08;https://github.com/datawhalechina/hugging-multi-agent&#xff09;&#xff0c;深入理解并实践多智能体系统的开发。 本文为该课程的第四章&#xff08;多智能体开发&#xff09;的第二篇笔记。主要是对MetaGPT中Team组件…