Mermaid语法生成象限图 - Mermaid象限图语法和教程

象限图

象限图是一种将数据分为四个象限的可视化图表。它用于在二维网格上绘制数据点，其中一个变量表示在x轴上，另一个变量表示在y轴上。象限的划分是根据特定于所分析数据的一组标准，将图表分为四等份来确定的。象限图通常用于识别数据中的模式和趋势，并根据数据点在图表中的位置确定动作的优先级。它们通常用于商业、营销和风险管理等场景。

示例

代码：

                            
                                
                                    
                                    复制
                                
                                
                                    
                                    嵌入
                                
                            
                            
                                quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

语法

信息

如果图表中没有可用的数据点，则坐标轴文本和象限名称将渲染在相应象限的中心位置。如果有数据点，x轴标签将从相应象限的左侧渲染，象限文本显示在图表的底部。y轴标签将渲染在相应象限的底部，象限文本将渲染在相应象限的顶部。

信息

对于数据点的坐标值，最小值为 0，最大值为 1。

标题

标题是图表的简短描述，它将始终渲染在图表顶部。

示例

                            
                                
                                    
                                    复制
                                
                                
                                    
                                    嵌入
                                
                            
                            quadrantChart
   title This is a sample example

x-axis

x轴决定了在x轴上显示的文本。x轴分为'左''右'两个部分，你可以输入两者或者只输入'左'。语句应以 x-axis 开头，然后是 left axis text，接着是分隔符 -->，最后是 right axis text。

示例

1. x-axis <text> --> <text> 左轴和右轴文本都将被渲染。

2. x-axis <text> 仅渲染左轴文本。

y-axis

y轴决定了在y轴上显示的文本。y轴分为'上''下'两个部分，你可以输入两者或者只输入'下'。该语句应以 y-axis 开头，然后是 bottom axis text，接着是分隔符 -->，最后是 top axis text。

示例

1. y-axis <text> --> <text> 底部和顶部轴文本都将被渲染。

2. y-axis <text> 仅渲染底部轴文本。

象限文本

quadrant-[1,2,3,4] 决定了每个象限显示的文本内容。

示例

1. quadrant-1 <text> 决定将在右上象限显示的文本

2. quadrant-2 <text> 决定将在左上象限显示的文本。

3. quadrant-3 <text> 决定将在左下象限显示的文本。

4. quadrant-4 <text> 决定将在右下象限显示的文本。

圆点

用于在象限图内绘制一个圆。语法是 <text>: [x, y]，其中 x 和 y 的取值范围是 0 - 1。

示例

1. Point 1: [0.75, 0.80] ，圆点 1 将绘制在右上象限。

2. Point 2: [0.35, 0.24] ，圆点 2 将绘制在左下象限。

图表配置

参数	描述	默认值
chartWidth	图表的宽度	500
chartHeight	图表的高度	500
titlePadding	标题的上下内边距	10
titleFontSize	标题字体大小	20
quadrantPadding	所有象限外的填充	5
quadrantTextTopPadding	当文本绘制在顶部时的象限文本上边距（不在数据点上）	5
quadrantLabelFontSize	象限文本字体大小	16
quadrantInternalBorderStrokeWidth	象限内部边框的宽度	1
quadrantExternalBorderStrokeWidth	象限外边框描边宽度	2
xAxisLabelPadding	x轴文本的上下内边距	5
xAxisLabelFontSize	x轴文本字体大小	16
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	标题颜色

配置和主题示例

代码：

                            
                                
                                    
                                    复制
                                
                                
                                    
                                    嵌入
                                
                            
                            
                                ---
config:
  quadrantChart:
    chartWidth: 400
    chartHeight: 400
  themeVariables:
    quadrant1TextFill: "ff0000"
---
quadrantChart
  x-axis Urgent --> Not Urgent
  y-axis Not Important --> "Important ❤"
  quadrant-1 Plan
  quadrant-2 Do
  quadrant-3 Delegate
  quadrant-4 Delete

数据点样式

数据点可以直接设置样式，也可以使用已定义的共享类

直接样式

                            
                                
                                    
                                    复制
                                
                                
                                    
                                    嵌入
                                
                            
                            Point A: [0.9, 0.0] radius: 12
Point B: [0.8, 0.1] color: #ff3300, radius: 10
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0

类样式

                            
                                
                                    
                                    复制
                                
                                
                                    
                                    嵌入
                                
                            
                            Point A:::class1: [0.9, 0.0]
Point B:::class2: [0.8, 0.1]
Point C:::class3: [0.7, 0.2]
Point D:::class3: [0.7, 0.2]
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10

可用样式：

参数	描述
color	数据点的填充颜色
radius	数据点半径
stroke-width	数据点边框宽度
stroke-color	数据点边框颜色（当未指定 stroke-width 时无效）

信息

优先顺序： 1. 直接样式 2. 类样式 3. 主题样式

样式示例

代码：

                            
                                
                                    
                                    复制
                                
                                
                                    
                                    嵌入
                                
                            
                            
                                quadrantChart
  title Reach and engagement of campaigns
  x-axis Low Reach --> High Reach
  y-axis Low Engagement --> High Engagement
  quadrant-1 We should expand
  quadrant-2 Need to promote
  quadrant-3 Re-evaluate
  quadrant-4 May be improved
  Campaign A: [0.9, 0.0] radius: 12
  Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
  Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
  Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
  Campaign E:::class2: [0.5, 0.4]
  Campaign F:::class3: [0.4, 0.5] color: #0000ff
  classDef class1 color: #109060
  classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
  classDef class3 color: #f00fff, radius : 10