【MarkDown】CSDN Markdown之四象限图quadrantChart详解
四象限图
四象限图是一种将数据分为四个象限的可视化方法。它用于在二维网格上绘制数据点，其中一个变量表示x轴，另一个变量表示y轴。根据针对正在分析的数据集的一组标准，将图表分成四个相等的部分来确定四个象限。经常使用四象限图来识别数据中的模式和趋势，并根据数据点在图表中的位置确定优先级操作。它们通常用于商业、市场营销和风险管理等领域。
注意： 只有Mermaid 10.2.3+ 才支持 quadrantChart
示例
代码:
```mermaid
quadrantChart
title 宣传活动的范围和参与度
x-axis “低覆盖宣传” --> “高覆盖宣传”
y-axis “低参与度” --> “高参与度”
quadrant-1 “应该扩大宣传范围”
quadrant-2 “需要扩大宣传范围”
quadrant-3 “重新评估”
quadrant-4 “可以改进”
“活动 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]
```
quadrantChart
title 宣传活动的范围和参与度
x-axis "低覆盖宣传" --> "高覆盖宣传"
y-axis "低参与度" --> "高参与度"
quadrant-1 "应该扩大宣传范围"
quadrant-2 "需要扩大宣传范围"
quadrant-3 "重新评估"
quadrant-4 "可以改进"
"活动 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]
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mermaid 四象限图title>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js">script>
head>
<body>
<pre class="mermaid">
quadrantChart
title 宣传活动的范围和参与度
x-axis "低覆盖宣传" --> "高覆盖宣传"
y-axis "低参与度" --> "高参与度"
quadrant-1 "应该扩大宣传范围"
quadrant-2 "需要扩大宣传范围"
quadrant-3 "重新评估"
quadrant-4 "可以改进"
"活动 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]
pre>
<script>
const config = {
startOnLoad: true,
securityLevel: 'loose',
};
mermaid.initialize(config);
script>
body>
html>
语法
INFO
如果图表中没有可用的点，则坐标轴标签和象限将呈现在各自象限的中心位置。如果有数据点，x轴标签将从相应象限的左侧呈现，它们也将显示在图表的底部，y轴标签将呈现在相应象限的底部，象限文本将呈现在相应象限的顶部。
INFO
对于数据点的 x 和 y 值，最小值为 0，最大值为 1。
标题
标题是对图表的简短描述，它总是出现在图表的顶部。
示例
quadrantChart
title 这是一个简单的示例
X轴
x-axis确定 x 轴上所显示的文本。在 x 轴上，有左侧和右侧两个部分，您可以同时传递两个部分，或者只传递左侧部分。语句应该以 “x-axis” 开始，然后是左轴文本，之后是分隔符 “-->”，再接着是右轴文本。
示例
显示左右轴文本，如下：
x-axis <左轴文本> --> <右轴文本>
只显示左轴文本，如下：
x-axis <左轴文本>
Y轴
y-axis确定 y 轴上所显示的文本。在 y 轴上，有顶部和底部两个部分，您可以同时传递两个部分，或者只传递底部部分。语句应该以 “y-axis” 开始，然后是底轴文本，之后是分隔符 “-->”，再接着是顶轴文本。
示例
显示顶部和底部轴文本，如下：
y-axis -->
只显示底部轴文本，如下：
y-axis
象限文本
quadrant-[1,2,3,4] 确定在象限内显示的文本。
quadrant-<象限序号> <象限文本>
示例
-
确定在右上象限内呈现的文本:
quadrant-1
-
确定在左上象限内呈现的文本:
quadrant-2 -
确定在左下象限内呈现的文本:
quadrant-3 -
确定在右下象限内呈现的文本:
quadrant-4
点集
点用于在象限图表中绘制圆圈。语法：
<文本>：[x，y]
这里的x和y值在0-1的范围内。
示例
- 绘制一个在右上象限中的点：
“点1”: [0.75, 0.80] - 绘制一个在左下象限中的点：
“点2”: [0.35, 0.24]
图表配置
| 参数 | 描述 | 默认值 |
|---|---|---|
| chartWidth | 图表的宽度 | 500 |
| chartHeight | 图表的高度 | 500 |
| titlePadding | 标题的顶部和底部填充 | 10 |
| titleFontSize | 标题字体大小 | 20 |
| quadrantPadding | 在所有象限外填充 | 5 |
| quadrantTextTopPadding | 当文本绘制在顶部时，象限文本顶部填充（不存在数据点） | 5 |
| quadrantLabelFontSize | 象限文本字体大小 | 16 |
| quadrantInternalBorderStrokeWidth | 象限内的边框笔划宽度 | 1 |
| quadrantExternalBorderStrokeWidth | 象限外部边界笔划宽度 | 2 |
| xAxisLabelPadding | x轴文本的顶部和底部填充 | 5 |
| xAxisLabelFontSize | X轴文本字体 | size |
| xAxisPosition | x轴的位置（顶部、底部）如果有点，x轴将始终呈现在底部 | ‘top’ |
| yAxisLabelPadding | y轴文本的左右填充 | 5 |
| yAxisLabelFontSize | Y轴文本字体大小 | 16 |
| yAxisPosition | y轴的位置（左、右） | ‘left’ |
| pointTextPadding | 在点和下面的文本之间填充 | 5 |
| pointLabelFontSize | 点文本字体大小 | 12 |
| pointRadius | 要绘制的点的半径 | 5 |
图表主题变量
| 参数 | 描述 |
|---|---|
| quadrant1Fill | 右上象限的填充颜色 |
| quadrant2Fill | 左上象限的填充颜色 |
| quadrant3Fill | 左下象限的填充颜色 |
| quadrant4Fill | 右下象限的填充颜色 |
| quadrant1TextFill | 右上象限的文本颜色 |
| quadrant2TextFill | 左上象限的文本颜色 |
| quadrant3TextFill | 左下象限的文本颜色 |
| quadrant4TextFill | 右下象限的文本颜色 |
| quadrantPointFill | 点填充颜色 |
| quadrantPointTextFill | 点文本颜色 |
| quadrantXAxisTextFill | X轴文本颜色 |
| quadrantYAxisTextFill | Y轴文本颜色 |
| quadrantInternalBorderStrokeFill | 象限内部边框颜色 |
| quadrantExternalBorderStrokeFill | 象限外部边框颜色 |
| quadrantTitleFill | 标题颜色 |
配置和主题示例
代码:
```mermaid
%%{init: {“quadrantChart”: {“chartWidth”: 400, “chartHeight”: 400}, “themeVariables”: {“quadrant1TextFill”: “#ff0000”} }}%%
quadrantChart
x-axis “急” --> “缓”
y-axis “普通” --> “重要 ❤”
quadrant-1 “重新计划”
quadrant-2 “立马处理”
quadrant-3 “委托别人”
quadrant-4 “删除任务”
```
%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
quadrantChart
x-axis "急" --> "缓"
y-axis "普通" --> "重要 ❤"
quadrant-1 "重新计划"
quadrant-2 "立马处理"
quadrant-3 "委托别人"
quadrant-4 "删除任务"
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mermaid 四象限图title>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js">script>
head>
<body>
<pre class="mermaid">
quadrantChart
x-axis "急" --> "缓"
y-axis "普通" --> "重要 ❤"
quadrant-1 "重新计划"
quadrant-2 "立马处理"
quadrant-3 "委托别人"
quadrant-4 "删除任务"
pre>
<script>
const config = {
startOnLoad: false,
securityLevel: 'loose',
theme:"dark",
quadrantChart: {
chartWidth: 800,
chartHeight: 800
},
themeVariables: {
quadrant1TextFill: "#ff0000"
}
};
// mermaid.mermaidAPI.setConfig(config2)
mermaid.initialize(config);
console.log(mermaid.mermaidAPI.getConfig());
script>
body>
html>