象限圖

象限圖是一種將資料視覺化呈現的圖表，它將資料分成四個象限。它用於在二維網格上繪製資料點，其中一個變數在 x 軸上表示，另一個變數在 y 軸上表示。象限是根據一組特定於分析資料的標準將圖表分成四等分而決定的。象限圖通常用於識別資料中的模式和趨勢，並根據資料點在圖表中的位置來確定行動的優先順序。它們廣泛應用於商業、行銷和風險管理等領域。

範例

語法

資訊

如果圖表中沒有可用的點，則 **軸** 文字和 **象限** 將會分別呈現在各自象限的中心。如果有點，則 **x 軸** 標籤將從各自象限的左側呈現，它們也會顯示在圖表的底部，而 **y 軸** 標籤將呈現在各自象限的底部，象限文字將呈現在各自象限的頂部。

資訊

點的 x 和 y 值的最小值為 0，最大值為 1。

標題

標題是對圖表的簡短描述，它將始終呈現在圖表的頂部。

範例

quadrantChart
    title This is a sample example

x 軸

x 軸決定了 x 軸中顯示的文字。在 x 軸中，有 **左** 和 **右** 兩個部分，您可以傳遞 **兩者**，也可以只傳遞 **左** 部分。該語句應以 x-axis 開頭，然後是 左軸文字，接著是分隔符號 -->，最後是 右軸文字。

範例

1. x-axis <文字> --> <文字> 左軸和右軸文字都會呈現。
2. x-axis <文字> 只會呈現左軸文字。

y 軸

y 軸決定了 y 軸中顯示的文字。在 y 軸中，有 **頂** 和 **底** 兩個部分，您可以傳遞 **兩者**，也可以只傳遞 **底** 部分。該語句應以 y-axis 開頭，然後是 底軸文字，接著是分隔符號 -->，最後是 頂軸文字。

範例

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] 這裡的 Point 1 將繪製在右上象限中。
2. Point 2: [0.35, 0.24] 這裡的 Point 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	標題顏色

關於設定和主題的範例

點樣式設定

點可以直接設定樣式，也可以使用定義好的共享類別來設定樣式

1. 直接設定樣式

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

2. 類別設定樣式

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. 主題樣式

關於樣式設定的範例