象限图

¥Quadrant Chart

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

¥A quadrant chart is a visual representation of data that is divided into four quadrants. It is used to plot data points on a two-dimensional grid, with one variable represented on the x-axis and another variable represented on the y-axis. The quadrants are determined by dividing the chart into four equal parts based on a set of criteria that is specific to the data being analyzed. Quadrant charts are often used to identify patterns and trends in data, and to prioritize actions based on the position of data points within the chart. They are commonly used in business, marketing, and risk management, among other fields.

示例

¥Example

语法

¥Syntax

INFO

If there are no points available in the chart both axis text and quadrant will be rendered in the center of the respective quadrant. If there are points x-axis labels will rendered from the left of the respective quadrant also they will be displayed at the bottom of the chart, and y-axis labels will be rendered at the bottom of the respective quadrant, the quadrant text will render at the top of the respective quadrant.

INFO

For points x and y value min value is 0 and max value is 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> 左轴和右轴文本都将被渲染。

   ¥x-axis <text> --> <text> both the left and right axis text will be rendered.

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

   ¥x-axis <text> only the left axis text will be rendered.

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> 底部和顶部轴文本都将被渲染。

   ¥y-axis <text> --> <text> both the bottom and top axis text will be rendered.

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

   ¥y-axis <text> only the bottom axis text will be rendered.

象限文本

¥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> 确定将在右上象限内渲染哪些文本。

   ¥quadrant-1 <text> determine what text will be rendered inside the top right quadrant.

2. quadrant-2 <text> 确定将在左上象限内渲染哪些文本。

   ¥quadrant-2 <text> determine what text will be rendered inside the top left quadrant.

3. quadrant-3 <text> 确定将在左下象限内渲染哪些文本。

   ¥quadrant-3 <text> determine what text will be rendered inside the bottom left quadrant.

4. quadrant-4 <text> 确定右下象限内将渲染哪些文本。

   ¥quadrant-4 <text> determine what text will be rendered inside the bottom right quadrant.

积分

¥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 将绘制在右上象限。

   ¥Point 1: [0.75, 0.80] here the Point 1 will be drawn in the top right quadrant.

2. Point 2: [0.35, 0.24] 这里的点 2 将绘制在左下象限中。

   ¥Point 2: [0.35, 0.24] here the Point 2 will be drawn in the bottom left quadrant.

图表配置

¥Chart Configurations

参数	描述	默认值
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

图表主题变量

¥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. 直接样式

   ¥Direct styling

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. 类样式

   ¥Classes styling

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	点的边框颜色（未指定描边宽度时无用）

INFO

Order of preference:

1. Direct styles
2. Class styles
3. Theme styles

样式示例

¥Example on styling