# 線性徑向軸

線性徑向刻度用於繪製數值資料。顧名思義,線性插值用於確定數值相對於軸線中心的所在位置。

徑向線性刻度提供了以下額外的設定選項。

# 設定選項

# 線性徑向軸特定選項

命名空間:options.scales[scaleId]

名稱 類型 預設值 描述
animate boolean true 是否從中心動畫縮放圖表
angleLines object 角度線設定。更多...
beginAtZero boolean false 如果為 true,則刻度將包含 0(如果尚未包含)。
pointLabels object 點標籤設定。更多...
startAngle number 0 刻度的起始角度。以度為單位,0 度在頂部。

# 所有軸線的通用選項

命名空間:options.scales[scaleId]

名稱 類型 預設值 描述
type string 所使用的刻度類型。可以使用字串鍵建立和註冊自訂刻度。這允許變更圖表的軸線類型。
alignToPixels boolean false 將像素值對齊至裝置像素。
backgroundColor 顏色 刻度區域的背景顏色。
display boolean|string true 控制軸線的整體可見性(true 時可見,false 時隱藏)。當 display: 'auto' 時,只有當至少一個相關的資料集可見時,軸線才可見。
grid object 網格線設定。更多...
min number 使用者定義的刻度最小值,覆寫資料的最小值。更多...
max number 使用者定義的刻度最大值,覆寫資料的最大值。更多...
reverse boolean false 反轉刻度。
stacked boolean|string false 是否堆疊資料。更多...
suggestedMax number 計算最大資料值時使用的調整。更多...
suggestedMin number 計算最小資料值時使用的調整。更多...
ticks object 刻度設定。更多...
weight number 0 用於排序軸線的權重。較高的權重離圖表區域較遠。

# 刻度設定

# 線性徑向軸特定刻度選項

命名空間:options.scales[scaleId].ticks

名稱 類型 可腳本化 預設值 描述
count number undefined 要產生的刻度數。如果指定,這將覆寫自動產生。
format object 預設標籤格式器使用的 Intl.NumberFormat (開啟新視窗) 選項
maxTicksLimit number 11 要顯示的最大刻度和網格線數。
precision number 如果定義且未指定 stepSize,則步長大小將四捨五入到這麼多小數位數。
stepSize number 使用者定義的刻度固定步長。更多...

# 所有軸線的通用刻度選項

命名空間:options.scales[scaleId].ticks

名稱 類型 可腳本化 預設值 描述
backdropColor 顏色 'rgba(255, 255, 255, 0.75)' 標籤背景的顏色。
backdropPadding 邊距 2 標籤背景的邊距。
callback function 傳回刻度值的字串表示,因為它應該顯示在圖表上。請參閱回呼
display boolean true 如果為 true,則顯示刻度標籤。
color 顏色 Chart.defaults.color 刻度的顏色。
font 字型 Chart.defaults.font 請參閱字型
major object {} 主要刻度設定.
padding number 3 設定刻度標籤與軸線的偏移量
showLabelBackdrop boolean 徑向刻度為 true,否則為 false 如果為 true,則在刻度標籤後面繪製背景。
textStrokeColor 顏色 `` 文字周圍筆觸的顏色。
textStrokeWidth number 0 文字周圍筆觸的寬度。
z number 0 刻度圖層的 z-index。當刻度繪製在圖表區域上時很有用。值 <= 0 繪製在資料集下方,> 0 繪製在上方。

可腳本化的內容在選項章節中描述。

# 網格線設定

命名空間:options.scales[scaleId].grid,它定義軸線網格線的選項。

名稱 類型 可腳本化 可索引 預設值 描述
borderDash number[] [] 網格線上虛線的長度和間距。請參閱MDN (開啟新視窗)
borderDashOffset number 0.0 線條虛線的偏移量。請參閱MDN (開啟新視窗)
circular boolean false 如果為 true,則網格線為圓形(僅在雷達圖和極地區域圖上)。
color 顏色 Chart.defaults.borderColor 網格線的顏色。如果指定為陣列,則第一個顏色適用於第一個網格線,第二個顏色適用於第二個網格線,依此類推。
display boolean true 如果為 false,則不顯示此軸線的網格線。
lineWidth number 1 網格線的筆觸寬度。

可腳本化的內容在選項章節中描述。

# 軸線範圍設定

鑑於軸線範圍設定的數量,了解它們之間的相互作用非常重要。

suggestedMaxsuggestedMin 設定只變更用於縮放軸線的資料值。這些對於在維持自動調整行為的同時延伸軸線的範圍很有用。

let minDataValue = Math.min(mostNegativeValue, options.ticks.suggestedMin);
let maxDataValue = Math.max(mostPositiveValue, options.ticks.suggestedMax);

在此範例中,最大的正數值為 50,但資料最大值延伸至 100。但是,由於最低資料值低於 suggestedMin 設定,因此會被忽略。

let chart = new Chart(ctx, {
    type: 'radar',
    data: {
        datasets: [{
            label: 'First dataset',
            data: [0, 20, 40, 50]
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: {
        scales: {
            r: {
                suggestedMin: 50,
                suggestedMax: 100
            }
        }
    }
});

suggested* 設定相反,minmax 設定為軸線設定明確的終點。當設定這些設定時,某些資料點可能不可見。

# 步長大小

如果設定,刻度刻度將以 stepSize 的倍數列舉,每個增量有一個刻度。如果未設定,則刻度會使用漂亮數字演算法自動標記。

此範例設定一個 y 軸圖表,該圖表在 0、0.5、1、1.5、2、2.5、3、3.5、4、4.5、5 處建立刻度。

let options = {
    scales: {
        r: {
            max: 5,
            min: 0,
            ticks: {
                stepSize: 0.5
            }
        }
    }
};

# 角度線選項

以下選項用於設定從圖表中心輻射到點標籤的角度線。命名空間:options.scales[scaleId].angleLines

名稱 類型 可腳本化 預設值 描述
display boolean true 如果為 true,則顯示角度線。
color 顏色 Chart.defaults.borderColor 角度線的顏色。
lineWidth number 1 角度線的寬度。
borderDash number[] 1 [] 角度線上虛線的長度和間距。請參閱MDN (開啟新視窗)
borderDashOffset number 0.0 線條虛線的偏移量。請參閱MDN (開啟新視窗)
  1. borderDash 設定僅接受靜態值或函式。不支援傳遞陣列的陣列。

可腳本化的內容在選項章節中描述。

# 點標籤選項

以下選項用於配置顯示在刻度周邊的點標籤。命名空間:options.scales[scaleId].pointLabels

名稱 類型 可腳本化 預設值 描述
backdropColor 顏色 true undefined 點標籤的背景顏色。
backdropPadding 邊距 2 標籤背景的邊距。
borderRadius number|object true 0 點標籤的邊框圓角。
display boolean|string true 如果為 true,則顯示點標籤。當 display: 'auto' 時,如果標籤與另一個標籤重疊,則會隱藏該標籤。
callback function 將資料標籤轉換為點標籤的回調函式。預設實作僅返回目前的字串。
color 顏色 Chart.defaults.color 標籤的顏色。
font 字型 Chart.defaults.font 請參閱字型
padding number 5 圖表和點標籤之間的間距。
centerPointLabels boolean false 如果為 true,則點標籤會置中。

可腳本化的內容在選項章節中描述。

# 內部資料格式

在內部,線性徑向刻度使用數值資料

上次更新: 2024/5/17 下午 12:33:38