象限图
象限图是一种将数据分成四个象限的可视化表示。它用于在一个二维网格上绘制数据点，一个变量表示在 x 轴上，另一个变量表示在 y 轴上。象限是通过根据特定于被分析数据的标准将图表分成四个相等的部分来确定的。象限图常用于识别数据中的模式和趋势，并根据数据点在图表中的位置来确定优先级。它们通常用于商业、市场营销和风险管理等领域。
示例
Code:
mermaid
语法
NOTE
如果图表中没有可用点，则**轴**文本和**象限**文本将分别渲染在其各自象限的中心。 如果有点，**x 轴**标签将从各自象限的左侧渲染，它们也将显示在图表的底部，**y 轴**标签将渲染在其各自象限的底部，象限文本将渲染在其各自象限的顶部。
NOTE
对于点 x 和 y 值，最小值为 0，最大值为 1。
标题
标题是对图表的简短描述，它始终会在图表的顶部渲染。
示例
quadrantChart
title This is a sample examplex 轴
x 轴决定了在 x 轴上显示什么文本。在 x 轴上，有两部分左和右，您可以同时传递这两部分，也可以只传递左部分。语句应该以x-axis开头，然后是左轴文本，后面跟着分隔符-->，然后是右轴文本。
示例
x-axis <text> --> <text>将渲染左轴文本和右轴文本。x-axis <text>只会渲染左轴文本。
y 轴
y 轴决定了在 y 轴上显示什么文本。在 y 轴上，有两部分顶部和底部，您可以同时传递这两部分，也可以只传递底部部分。语句应该以y-axis开头，然后是底部轴文本，后面跟着分隔符-->，然后是顶部轴文本。
示例
y-axis <text> --> <text>将渲染底部轴文本和顶部轴文本。y-axis <text>只会渲染底部轴文本。
象限文本
quadrant-[1,2,3,4]决定了在象限内显示什么文本。
示例
quadrant-1 <text>决定在右上角象限内渲染什么文本。quadrant-2 <text>决定在左上角象限内渲染什么文本。quadrant-3 <text>决定在左下角象限内渲染什么文本。quadrant-4 <text>决定在右下角象限内渲染什么文本。
点
点用于在象限图内绘制一个圆圈。语法是<text>: [x, y]，这里 x 和 y 值的范围是 0 - 1。
示例
Point 1: [0.75, 0.80]Point 1 将绘制在右上角象限。Point 2: [0.35, 0.24]Point 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 | 标题颜色 |
关于配置和主题的示例
Code:
mermaid
点样式
点可以直接设置样式，也可以使用定义的共享类设置样式
- 直接设置样式
md
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- 类样式
md
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 未指定时无效) |
NOTE
优先级顺序： 1. 直接样式 2. 类样式 3. 主题样式
关于样式的示例
Code:
mermaid