象限图基础语法

象限图

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

Example

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

 

句法

信息

如果图表中没有可用的点，轴文本和象限都将呈现在相应象限的中心。 如果有点，x 轴标签将从相应象限的左侧呈现，它们也将显示在图表底部，y 轴标签将呈现在相应象限的底部，象限文本将呈现在图表的顶部 各自的象限。

信息

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

标题

标题是图表的简短描述，它将始终呈现在图表顶部。

Example

 quadrantChart
    title This is a sample example

x-axis

 x 轴决定 x 轴上显示的文本。 在 x 轴上有左右两部分，您可以同时通过两个部分，也可以仅通过左侧。 该语句应以 x 轴开始，然后是左轴文本，后跟分隔符 --> 然后是右轴文本。

Example

1. x-axis <text> --> <text> 左轴和右轴文本都将被渲染。
2. x-axis <text> 仅渲染左轴文本。 

y-axis

y 轴确定将在 y 轴上显示哪些文本。在 y 轴上有两个部分顶部和底部，您可以同时通过两者，也可以只通过底部。该语句应以 y-axis开头，然后是bottom axis text，后跟分隔符 -->then top axis text。 

Example

1.  y-axis -<text>-> <text> 呈现底部和顶部轴文本。
2. y-axis <text> 仅呈现底部轴文本。

象限文本

象限-[1,2,3,4] 确定象限内显示哪些文本。

例子

1. Quadrant-1 <text> 确定将在右上象限内呈现哪些文本。
2. Quadrant-2 <text> 确定将在左上象限内呈现哪些文本。
3. Quadrant-3 <text> 确定将在左下象限内呈现哪些文本。
4. Quadrant-4 <text> 确定右下象限内将呈现哪些文本。

积分

点用于在象限图内绘制一个圆。 语法为 <text>: [x, y] 这里 x 和 y 的值在 0 - 1 范围内。

例子

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

图表配置

 

范围	描述	默认值
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

图表主题变量 

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

配置和主题示例

%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
quadrantChart
  x-axis Urgent --> Not Urgent
  y-axis Not Important --> "Important ❤"
  quadrant-1 Plan
  quadrant-2 Do
  quadrant-3 Delegate
  quadrant-4 Delete