象限图​

象限图 ​¥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

信息

如果图表中没有可用的点，则轴文本和象限都将渲染在相应象限的中心。如果有点，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 examplex-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

x-axis --> 左轴和右轴文本都将被渲染。

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

x-axis 仅渲染左轴文本。

¥x-axis 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

y-axis --> 底部和顶部轴文本都将被渲染。

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

y-axis 仅渲染底部轴文本。

¥y-axis 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

quadrant-1 确定将在右上象限内渲染哪些文本。

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

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

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

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

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

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

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

积分 ​¥Points

点用于在象限图内绘制一个圆。语法为 : [x, y]，此处 x 和 y 值在 0 范围内 - 1.

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

示例 ​¥Example

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.

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图表的宽度500chartHeight图表的高度500titlePadding标题的顶部和底部填充10titleFontSize标题字体大小20quadrantPadding所有象限外的填充5quadrantTextTopPadding当文本绘制在顶部时象限文本顶部填充（那里没有数据点）5quadrantLabelFontSize象限文本字体大小16quadrantInternalBorderStrokeWidth象限内的边框描边宽度1quadrantExternalBorderStrokeWidth象限外边框描边宽度2xAxisLabelPaddingx 轴文本的顶部和底部填充5xAxisLabelFontSizeX 轴文本字体大小16xAxisPositionx 轴的位置（顶部、底部）如果有点，则 x 轴将始终渲染在底部'top'yAxisLabelPaddingy 轴文本的左右填充5yAxisLabelFontSizeY 轴文本字体大小16yAxisPositiony 轴位置（左、右）'left'pointTextPadding点和下面文本之间的填充5pointLabelFontSize点文本字体大小12pointRadius要绘制的点的半径5图表主题变量 ​¥Chart Theme Variables

参数描述quadrant1Fill右上象限的填充颜色quadrant2Fill左上象限的填充颜色quadrant3Fill左下象限的填充颜色quadrant4Fill右下象限的填充颜色quadrant1TextFill右上象限的文本颜色quadrant2TextFill左上象限的文本颜色quadrant3TextFill左下象限的文本颜色quadrant4TextFill右下象限的文本颜色quadrantPointFill点填充颜色quadrantPointTextFill点文本颜色quadrantXAxisTextFillX 轴文本颜色quadrantYAxisTextFillY 轴文本颜色quadrantInternalBorderStrokeFill象限内边框颜色quadrantExternalBorderStrokeFill象限外边框颜色quadrantTitleFill标题颜色配置和主题示例 ​¥Example on config and theme

点样式 ​¥Point styling

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

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

直接样式

¥Direct styling

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

¥Classes styling

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

优先顺序：1. 直接样式 2. 类样式 3. 主题样式

样式示例 ​¥Example on styling