四象限图

四象限图是一种将数据分为四个象限的可视化方法。它用于在二维网格上绘制数据点，其中一个变量表示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 <text> --> <text>

只显示底部轴文本，如下：

y-axis <text>

象限文本

quadrant-[1,2,3,4] 确定在象限内显示的文本。

quadrant-<象限序号> <象限文本>

示例

确定在右上象限内呈现的文本:

quadrant-1 <text>
确定在左上象限内呈现的文本:
quadrant-2 <text>
确定在左下象限内呈现的文本:
quadrant-3 <text>
确定在右下象限内呈现的文本:

quadrant-4 <text>

点集

点用于在象限图表中绘制圆圈。语法：

<文本>：[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>