象限图​

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

示例 ​Code:mermaidRun ▶语法 ​NOTE

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

NOTE

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

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

示例 ​quadrantChart

title This is a sample examplex 轴 ​x 轴决定了在 x 轴上显示什么文本。在 x 轴上，有两部分左和右，您可以同时传递这两部分，也可以只传递左部分。语句应该以x-axis开头，然后是左轴文本，后面跟着分隔符-->，然后是右轴文本。

示例 ​x-axis --> 将渲染左轴文本和右轴文本。x-axis 只会渲染左轴文本。y 轴 ​y 轴决定了在 y 轴上显示什么文本。在 y 轴上，有两部分顶部和底部，您可以同时传递这两部分，也可以只传递底部部分。语句应该以y-axis开头，然后是底部轴文本，后面跟着分隔符-->，然后是顶部轴文本。

示例 ​y-axis --> 将渲染底部轴文本和顶部轴文本。y-axis 只会渲染底部轴文本。象限文本 ​quadrant-[1,2,3,4]决定了在象限内显示什么文本。

示例 ​quadrant-1 决定在右上角象限内渲染什么文本。quadrant-2 决定在左上角象限内渲染什么文本。quadrant-3 决定在左下角象限内渲染什么文本。quadrant-4 决定在右下角象限内渲染什么文本。点 ​点用于在象限图内绘制一个圆圈。语法是: [x, y]，这里 x 和 y 值的范围是 0 - 1。

示例 ​Point 1: [0.75, 0.80] Point 1 将绘制在右上角象限。Point 2: [0.35, 0.24] Point 2 将绘制在左下角象限。图表配置 ​参数描述默认值chartWidth图表宽度500chartHeight图表高度500titlePadding标题的顶部和底部填充10titleFontSize标题字体大小20quadrantPadding所有象限外部的填充5quadrantTextTopPadding当文本绘制在顶部时（没有数据点）象限文本的顶部填充5quadrantLabelFontSize象限文本字体大小16quadrantInternalBorderStrokeWidth象限内部边框粗细1quadrantExternalBorderStrokeWidth象限外部边框粗细2xAxisLabelPaddingx 轴文本的顶部和底部填充5xAxisLabelFontSizex 轴文本字体大小16xAxisPositionx 轴位置 (顶部，底部) 如果有数据点，x 轴将始终渲染在底部'top'yAxisLabelPaddingy 轴文本的左侧和右侧填充5yAxisLabelFontSizey 轴文本字体大小16yAxisPositiony 轴位置 (左侧，右侧)'left'pointTextPadding点与其下方文本之间的填充5pointLabelFontSize点文本字体大小12pointRadius要绘制的点的半径5图表主题变量 ​参数描述quadrant1Fill右上角象限的填充颜色quadrant2Fill左上角象限的填充颜色quadrant3Fill左下角象限的填充颜色quadrant4Fill右下角象限的填充颜色quadrant1TextFill右上角象限的文本颜色quadrant2TextFill左上角象限的文本颜色quadrant3TextFill左下角象限的文本颜色quadrant4TextFill右下角象限的文本颜色quadrantPointFill点的填充颜色quadrantPointTextFill点的文本颜色quadrantXAxisTextFillx 轴文本颜色quadrantYAxisTextFilly 轴文本颜色quadrantInternalBorderStrokeFill象限内部边框颜色quadrantExternalBorderStrokeFill象限外部边框颜色quadrantTitleFill标题颜色关于配置和主题的示例 ​Code:mermaidRun ▶点样式 ​点可以直接设置样式，也可以使用定义的共享类设置样式

直接设置样式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类样式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可用样式： ​参数描述color点的填充颜色radius点的半径stroke-width点的边框宽度stroke-color点的边框颜色 (当 stroke-width 未指定时无效)NOTE

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

关于样式的示例 ​Code:mermaidRun ▶