象限图

象限图是一种将数据划分为四个象限的可视化表示。它用于在二维网格上绘制数据点，其中一个变量表示在 x 轴上，另一个变量表示在 y 轴上。象限是通过基于分析数据的特定标准将图表划分为四个相等的部分来确定的。象限图通常用于识别数据中的模式和趋势，以及根据数据点在图表中的位置优先排序操作。它们通常用于商业、营销和风险管理等领域。

示例

语法

信息

如果图表中没有可用点，则图表中的 **轴** 文本和 **象限** 文本将分别渲染在其各自象限的中心。如果有点，则 **x 轴** 标签将从其各自象限的左侧渲染，并且它们也将显示在图表底部，而 **y 轴** 标签将渲染在其各自象限的底部，象限文本将渲染在其各自象限的顶部。

信息

对于点 x 和 y 值，最小值为 0，最大值为 1。

标题

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

示例

quadrantChart
    title This is a sample example

x 轴

x 轴确定将在 x 轴上显示的文本。在 x 轴中，有两个部分：**左侧** 和 **右侧**，您可以传递 **两者** 或仅传递 **左侧**。语句应以 x-axis 开始，然后是 左侧轴文本，然后是分隔符 -->，最后是 右侧轴文本。

示例

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

y 轴

y 轴确定将在 y 轴上显示的文本。在 y 轴中，有两个部分：**顶部** 和 **底部**，您可以传递 **两者** 或仅传递 **底部**。语句应以 y-axis 开始，然后是 底部轴文本，然后是分隔符 -->，最后是 顶部轴文本。

示例

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	标题的颜色

有关配置和主题的示例

点样式

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

1. 直接样式

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

2. 类样式

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

可用样式：

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

信息

优先顺序

1. 直接样式
2. 类样式
3. 主题样式

有关样式的示例