象限圖
象限圖是一種將資料分為四個象限的視覺化圖表。它用於在二維網格上繪製資料點，其中一個變數表示在 x 軸上，另一個變數表示在 y 軸上。象限的劃分是根據特定於所分析資料的一組標準，將圖表分為四等份來確定的。象限圖通常用於識別資料中的模式和趨勢，並根據資料點在圖表中的位置確定動作的優先順序。它們通常用於商業、行銷和風險管理等情境。
範例
複製
嵌入
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 軸標籤將渲染在相應象限的底部，象限文字將渲染在相應象限的頂部。
對於資料點的座標值，最小值為 0，最大值為 1。
標題
標題是圖表的簡短描述，它將始終渲染在圖表頂部。
範例
複製
嵌入
quadrantChart
title This is a sample example
x-axis
x 軸決定了在 x 軸上顯示的文字。x 軸分為「左」「右」兩個部分，你可以輸入兩者或者只輸入「左」。陳述式應以 x-axis 開頭，然後是 left axis text，接著是分隔符 -->，最後是 right axis text。
範例
1. x-axis --> 左軸和右軸文字都將被渲染。
2. x-axis 僅渲染左軸文字。
y-axis
y 軸決定了在 y 軸上顯示的文字。y 軸分為「上」「下」兩個部分，你可以輸入兩者或者只輸入「下」。該陳述式應以 y-axis 開頭，然後是 bottom axis text，接著是分隔符 -->，最後是 top axis text。
範例
1. y-axis --> 底部和頂部軸文字都將被渲染。
2. y-axis 僅渲染底部軸文字。
象限文字
quadrant-[1,2,3,4] 決定了每個象限顯示的文字內容。
範例
1. quadrant-1 決定將在右上象限顯示的文字
2. quadrant-2 決定將在左上象限顯示的文字。
3. quadrant-3 決定將在左下象限顯示的文字。
4. quadrant-4 決定將在右下象限顯示的文字。
圓點
用於在象限圖內繪製一個圓。語法是 : [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 | x 軸文字顏色 |
| quadrantYAxisTextFill | y 軸文字顏色 |
| quadrantInternalBorderStrokeFill | 象限內邊框顏色 |
| quadrantExternalBorderStrokeFill | 象限外邊框顏色 |
| quadrantTitleFill | 標題顏色 |
設定和主題範例
複製
嵌入
---
config:
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
資料點樣式
資料點可以直接設定樣式，也可以使用已定義的共用類別
直接樣式
複製
嵌入
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
類別樣式
複製
嵌入
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
可用樣式：
| 參數 | 描述 |
|---|---|
| color | 資料點的填滿顏色 |
| radius | 資料點半徑 |
| stroke-width | 資料點邊框寬度 |
| stroke-color | 資料點邊框顏色（當未指定 stroke-width 時無效） |
優先順序：1. 直接樣式 2. 類別樣式 3. 主題樣式
樣式範例
複製
嵌入
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.9, 0.0] radius: 12
Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
Campaign E:::class2: [0.5, 0.4]
Campaign F:::class3: [0.4, 0.5] color: #0000ff
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
