象限图基础语法
象限图
象限图是分为四个象限的数据的直观表示。 它用于在二维网格上绘制数据点，其中一个变量表示在 x 轴上，另一个变量表示在 y 轴上。 象限是通过根据一组特定于所分析数据的标准将图表分为四个相等部分来确定的。 象限图通常用于识别数据的模式和趋势，并根据图表中数据点的位置确定操作的优先级。 它们通常用于商业、营销和风险管理等领域。
Example
quadrantCharttitle Reach and engagement of campaignsx-axis Low Reach --> High Reachy-axis Low Engagement --> High Engagementquadrant-1 We should expandquadrant-2 Need to promotequadrant-3 Re-evaluatequadrant-4 May be improvedCampaign 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
- x-axis
--> 左轴和右轴文本都将被渲染。 - x-axis
仅渲染左轴文本。
y-axis
y 轴确定将在 y 轴上显示哪些文本。在 y 轴上有两个部分顶部和底部，您可以同时通过两者，也可以只通过底部。该语句应以 y-axis开头，然后是bottom axis text，后跟分隔符 -->then top axis text。
Example
- y-axis -
-> 呈现底部和顶部轴文本。 - y-axis
仅呈现底部轴文本。
象限文本
象限-[1,2,3,4] 确定象限内显示哪些文本。
例子
- Quadrant-1
确定将在右上象限内呈现哪些文本。 - Quadrant-2
确定将在左上象限内呈现哪些文本。 - Quadrant-3
确定将在左下象限内呈现哪些文本。 - Quadrant-4
确定右下象限内将呈现哪些文本。
积分
点用于在象限图内绘制一个圆。 语法为
例子
- Point 1：[0.75, 0.80] 这里点 1 将绘制在右上象限。
- 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"} }}%%
quadrantChartx-axis Urgent --> Not Urgenty-axis Not Important --> "Important ❤"quadrant-1 Planquadrant-2 Doquadrant-3 Delegatequadrant-4 Delete
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！