象限图

🌐 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

Parameter	Description	Default value
chartWidth	Width of the chart	500
chartHeight	Height of the chart	500
titlePadding	Top and Bottom padding of the title	10
titleFontSize	Title font size	20
quadrantPadding	Padding outside all the quadrants	5
quadrantTextTopPadding	Quadrant text top padding when text is drawn on top ( not data points are there)	5
quadrantLabelFontSize	Quadrant text font size	16
quadrantInternalBorderStrokeWidth	Border stroke width inside the quadrants	1
quadrantExternalBorderStrokeWidth	Quadrant external border stroke width	2
xAxisLabelPadding	Top and bottom padding of x-axis text	5
xAxisLabelFontSize	X-axis texts font size	16
xAxisPosition	Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom	'top'
yAxisLabelPadding	Left and Right padding of y-axis text	5
yAxisLabelFontSize	Y-axis texts font size	16
yAxisPosition	Position of y-axis (left , right)	'left'
pointTextPadding	Padding between point and the below text	5
pointLabelFontSize	Point text font size	12
pointRadius	Radius of the point to be drawn	5

图表主题变量

🌐 Chart Theme Variables

Parameter	Description
quadrant1Fill	Fill color of the top right quadrant
quadrant2Fill	Fill color of the top left quadrant
quadrant3Fill	Fill color of the bottom left quadrant
quadrant4Fill	Fill color of the bottom right quadrant
quadrant1TextFill	Text color of the top right quadrant
quadrant2TextFill	Text color of the top left quadrant
quadrant3TextFill	Text color of the bottom left quadrant
quadrant4TextFill	Text color of the bottom right quadrant
quadrantPointFill	Points fill color
quadrantPointTextFill	Points text color
quadrantXAxisTextFill	X-axis text color
quadrantYAxisTextFill	Y-axis text color
quadrantInternalBorderStrokeFill	Quadrants inner border color
quadrantExternalBorderStrokeFill	Quadrants outer border color
quadrantTitleFill	Title color

配置和主题示例

🌐 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