象限图

🌐 Quadrant Chart

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

示例

🌐 Example

语法

🌐 Syntax

信息

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

信息

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

标题

🌐 Title

标题是对图表的简短描述，它将始终显示在图表的顶部。

🌐 The title is a short description of the chart and it will always render on top of the chart.

示例

🌐 Example

quadrantChart
    title This is a sample example

x-axis

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

🌐 The x-axis determines what text would be displayed in the x-axis. In x-axis there is two part left and right you can pass both or you can pass only left. The statement should start with x-axis then the left axis text followed by the delimiter --> then right axis text.

示例

🌐 Example

1. x-axis <text> --> <text> 左右两侧的轴文本都会被渲染。
2. x-axis <text> 只会渲染左侧轴的文字。

y-axis

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

🌐 The y-axis determines what text would be displayed in the y-axis. In y-axis there is two part top and bottom you can pass both or you can pass only bottom. The statement should start with y-axis then the bottom axis text followed by the delimiter --> then top axis text.

示例

🌐 Example

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

象限文字

🌐 Quadrants text

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

🌐 The quadrant-[1,2,3,4] determine what text would be displayed inside the quadrants.

示例

🌐 Example

1. quadrant-1 <text> 决定将在右上象限显示的文本。
2. quadrant-2 <text> 决定将在左上象限显示的文本。
3. quadrant-3 <text> 确定将在左下象限显示的文本。
4. quadrant-4 <text> 决定将在右下象限显示的文本。

分数

🌐 Points

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

🌐 Points are used to plot a circle inside the quadrantChart. The syntax is <text>: [x, y] here x and y value is in the range 0 - 1.

示例

🌐 Example

1. Point 1: [0.75, 0.80] 这里点 1 将绘制在右上象限。
2. Point 2: [0.35, 0.24]，这里的点 2 将绘制在左下象限。

图表配置

🌐 Chart Configurations

| 参数 | 描述 | 默认值 |

| --- | --- | :-----------: |

| chartWidth | 图表的宽度 | 500 |

| chartHeight | 图表的高度 | 500 |

| titlePadding | 标题的上下内边距 | 10 |

| titleFontSize | 标题字体大小 | 20 |

| quadrantPadding | 所有象限外的填充 | 5 |

| quadrantTextTopPadding | 当文本绘制在顶部时的象限文本上边距（不在数据点上） | 5 |

| quadrantLabelFontSize | 象限文本字体大小 | 16 |

| quadrantInternalBorderStrokeWidth | 象限内部边框的宽度 | 1 |

| quadrantExternalBorderStrokeWidth | 象限外边框描边宽度 | 2 |

| x轴标签间距 | x轴文本的上下内边距 | 5 |

| xAxisLabelFontSize | X 轴文本字体大小 | 16 |

| xAxisPosition | x 轴的位置（顶部，底部）。如果存在数据点，x 轴将始终渲染在底部 | 'top' |

| yAxisLabelPadding | y 轴文本的左右内边距 | 5 |

| yAxisLabelFontSize | Y 轴文本字体大小 | 16 |

| yAxisPosition | y 轴位置（左, 右） | 'left' |

| pointTextPadding | 点与下方文本之间的间距 | 5 |

| pointLabelFontSize | 点标签文字大小 | 12 |

| pointRadius | 要绘制点的半径 | 5 |

图表主题变量

🌐 Chart Theme Variables

参数	描述
quadrant1Fill	右上象限的填充颜色
quadrant2Fill	左上象限的填充颜色
quadrant3Fill	左下象限的填充颜色
quadrant4Fill	右下象限的填充颜色
quadrant1TextFill	右上象限的文本颜色
quadrant2TextFill	左上象限的文本颜色
quadrant3TextFill	左下象限的文本颜色
quadrant4TextFill	右下象限的文本颜色
quadrantPointFill	数据点填充颜色
quadrantPointTextFill	数据点文本颜色
quadrantXAxisTextFill	X轴文本颜色
quadrantYAxisTextFill	Y轴文本颜色
quadrantInternalBorderStrokeFill	象限内边框颜色
quadrantExternalBorderStrokeFill	象限外边框颜色
quadrantTitleFill	标题颜色

配置和主题示例

🌐 Example on config and theme

点样式

🌐 Point styling

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

🌐 Points can either be styled directly or with defined shared classes

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

可用样式：

🌐 Available styles:

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

信息

优先顺序：

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

样式示例

🌐 Example on styling