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

news2024/11/18 21:35:22

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 
	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
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.coloradmin.cn/o/1478927.html

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

相关文章

[云原生] K8s之pod进阶

一、pod的状态说明 &#xff08;1&#xff09;Pod 一直处于Pending状态 Pending状态意味着Pod的YAML文件已经提交给Kubernetes&#xff0c;API对象已经被创建并保存在Etcd当中。但是&#xff0c;这个Pod里有些容器因为某种原因而不能被顺利创建。比如&#xff0c;调度不成功(…

Sora 原理与技术实战笔记一

b 站视频合集 【AIX组队学习】Sora原理与技术实战&#xff1a;Sora技术路径详解 Sora 技术报告&#xff08;OpenAI&#xff09; huggingsd 文生图视频系列的一个开源项目 最强视频生成模型Sora相关技术解析 惊艳效果&#xff1a; 长视频高清视频融合能力同一场景的多角度/镜头…

C++ 之LeetCode刷题记录(三十六)

&#x1f604;&#x1f60a;&#x1f606;&#x1f603;&#x1f604;&#x1f60a;&#x1f606;&#x1f603; 开始cpp刷题之旅。 目标&#xff1a;执行用时击败90%以上使用 C 的用户。 16. 最接近的三数之和 给你一个长度为 n 的整数数组 nums 和 一个目标值 target。请你…

Linkedln领英账号限制问题|通过代理IP安全使用Linkedln

LinkedIn是跨境外贸必备的拓客工具&#xff0c;世界各地的许多专业人士都使用领英来作为发布和共享内容的主要工具&#xff0c;这使得它成为跨境出海必备的渠道工具。 但是不少做外贸的朋友都知道&#xff0c;领英账号很容易遭遇限制封禁&#xff0c;但如果善用工具&#xff0…

力扣262 行程和用户

如何计算特定时间段内非禁止用户的出租车行程取消率。这个问题可以通过SQL查询来解决&#xff0c;我们需要关联Trips表和Users表来筛选出符合条件的行程记录&#xff0c;并计算取消率。 目录 题目描述 思路整理 完整代码及解释 题目描述 表&#xff1a;Trips -----------…

flutterrow换行,2024年最新Android面试点梳理

计划 以人为镜可以明得失, 看到了自己的不足就要针对性地做一些改变. 以下思路转变要切记: 1.核心思想, 从项目出发, 打牢基础, 逐步深入; 2.上班期间不再惦记其他知识的学习, 专心研究项目上需要的知识/碰见的问题, 否则只会三心二意, 项目上的技术点做不深入, 其他知识点也…

电子科技大学课程《计算机网络系统》(持续更新)

前言 本校的课程课时有所缩减&#xff0c;因此可能出现与你学习的课程有所减少的情况&#xff0c;因此对其他学校的同学更多的作为参考作用。本文章适合学生的期中期末考试&#xff0c;以及想要考研电子科技大学的同学&#xff0c;电子科技大学同学请先看附言。 第一章 计算…

数据结构-----再谈String,字符串常量池,String对象的创建、intern方法的作用

文章目录 1.字符串常量池1.1. 创建对象的思考2.2. 字符串常量池(StringTable)1.3. 再谈String对象创建1.4. intern方法 1.字符串常量池 1.1. 创建对象的思考 下面两种创建String对象的方式相同吗&#xff1f; public static void main(String[] args) {String s1 "hel…

HQL,SQL刷题,尚硅谷

目录 相关表数据&#xff1a; 题目及思路解析&#xff1a; 查询结果排序&分组指定条件 1、查询学生的总成绩并按照总成绩降序排序 2、按照如下格式显示学生的语文、数学、英语三科成绩&#xff0c;没有成绩的输出为0&#xff0c;按照学生的有效平均成绩降序显示 3、查询一…

IntelliJ IDEA 使用 spring Initializr 快速搭建 spring boot 项目遇到的坑

maven使用的是3.5.3 一、创建SpringBoot 二、项目创建成功&#xff0c;启动右键&#xff0c;没有run方法 三、在pom.xml上右键&#xff0c;将其添加为maven项目&#xff0c;然后发现Test模块报错 四、查看pom.xml文件&#xff0c;发现2.3.5Release版本变红&#xff0c;怀疑是版…

github-actions

文章目录 workflow触发器action市场contextsecrets 默认环境变量 workflow name: {{workflow name}} run-name: {{workflow runs name}}on: {{触发器}} #[push]env:{{定义workflow变量}}: valuejobs:{{job name}}:runs-on: {{运行机器}} #ubuntu-latestenv:{{定义job变量}}: v…

react使用@reduxjs/toolkit和react-redux实现store状态管理

一、概述 reduxjs/toolkit和react-redux是用于在React应用中管理全局状态的工具库 1、reduxjs/toolkit&#xff1a; reduxjs/toolkit是Redux官方推荐的工具库&#xff0c;是对 Redux 的二次封装&#xff0c;它提供了一些便捷的API和工具&#xff0c;帮助开发者更快速地编写R…

JavaWeb之 创建 Web项目,使用Tomcat 部署项目,使用 Maven 构建Web项目(一万八千字详解)

目录 前言3.1 Tomcat 简介3.1.1 什么是 Web服务器3.1.2 Tomcat 是什么3.1.3 小结 3.2 Tomcat 的基本使用3.2.1 下载 Tomcat3.2.2 安装 Tomcat3.2.3 卸载 Tomcat3.2.4 启动 Tomcat3.2.5 关闭 Tomcat3.2.6 配置 Tomcat3.2.7 在 Tomcat 中部署 Web项目 3.3 在 IDEA 中创建 Web 项目…

04 Opencv图像操作

文章目录 读写像素修改像素值Vec3b与Vec3F灰度图像增强获取图像通道bitwise_not 算子对图像非操作 读写像素 读一个GRAY像素点的像素值&#xff08;CV_8UC1&#xff09; Scalar intensity img.at(y, x); 或者 Scalar intensity img.at(Point(x, y)); 读一个RGB像素点的像素值…

Java图书管理系统---命令行

项目列表 Book包 Book类内包含book的基本属性 BookList类初始化图书列表并且提供图书的属性方法 User包 Administrator类 common类 operator包 功能接口 新增图书功能 借阅图书功能 删除图书功能 显示图书功能 查找图书功能 归还图书功能 结束释放资源功能 运行…

排序(1)

目录 1 排序的概念及其应用 1.1 排序的概念 1.2 排序的应用 1.3 常见的排序算法 2 直接插入排序 2.1 基本思想 2.2 基本思路 2.3 代码实现 2.4 时间复杂度 3 冒泡排序&#xff08;回顾&#xff09; 3.1 思路分析 3.2 时间复杂度 4 比较 1 排序的概念及其应用 1.…

[分类指标]准确率、精确率、召回率、F1值、ROC和AUC、MCC马修相关系数

准确率、精确率、召回率、F1值 定义&#xff1a; 1、准确率&#xff08;Accuracy&#xff09; 准确率是指分类正确的样本占总样本个数的比例。准确率是针对所有样本的统计量。它被定义为&#xff1a; 准确率能够清晰的判断我们模型的表现&#xff0c;但有一个严重的缺陷&…

双指针问题(Java编写)

日升时奋斗&#xff0c;日落时自省 目录 一、移动零 二、盛水最多的容器 三、快乐数 四、复写零 五、三数之和 六、有效三角形的个数 七、四数之和 一、移动零 题目来源&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题目主要内容就是将数组中所有的零移动到…

解决VSCode 不能拖拽文件问题

给【以管理员身份运行次程序】关掉&#xff0c;不要打勾 至于为什么开启了管理员就不能拖拽了&#xff0c;我也不知道&#xff0c;我猜的&#xff1a; 这可能是因为在VSCode中&#xff0c;管理员权限可能会限制用户对文件的操作权限。管理员权限对于一些操作可能会有更严格的限…

【Vue3】全局组件,递归组件,动态组件,传送组件,缓存组件,异步组件等

组件使用 父子组件传参父传子模板上直接使用js里面使用ts组件里面泛型接收ts泛型里面设置默认值 子传父方式一&#xff0c;采用defineEmits方式二&#xff0c;采用ts的泛型 方式三&#xff0c;采用ref获取子组件内部暴露的数据和方法子组件先暴露父组件接收 全局组件发现有报错…