# 類別軸

如果使用全域設定,標籤會從圖表資料中包含的標籤陣列之一繪製。如果僅定義了 data.labels,則將使用此陣列。如果定義了 data.xLabels 並且軸是水平的,則將使用此屬性。同樣地,如果定義了 data.yLabels 並且軸是垂直的,則將使用此屬性。同時使用 xLabelsyLabels 可以建立一個 X 軸和 Y 軸都使用字串的圖表。

指定上述任何設定都會將 x 軸定義為 type: 'category',除非另有定義。若要更精細地控制類別標籤,也可以將 labels 作為類別軸定義的一部分新增。這樣做不會套用全域預設值。

# 類別軸定義

全域設定

let chart = new Chart(ctx, {
    type: ...
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: ...
    }
});

作為軸定義的一部分

let chart = new Chart(ctx, {
    type: ...
    data: ...
    options: {
        scales: {
            x: {
                type: 'category',
                labels: ['January', 'February', 'March', 'April', 'May', 'June']
            }
        }
    }
});

# 設定選項

# 類別軸特定選項

命名空間: options.scales[scaleId]

名稱 類型 描述
min string|number 要顯示的最小項目。更多...
max string|number 要顯示的最大項目。更多...
labels string[]|string[][] 要顯示的標籤陣列。當個別標籤是字串陣列時,每個項目都會在新的一行呈現。

# 所有笛卡爾軸的通用選項

命名空間: options.scales[scaleId]

名稱 類型 預設值 描述
bounds string 'ticks' 決定刻度界限。更多...
clip boolean true 如果為 true,則將資料集繪圖裁剪到刻度的大小,而不是圖表區域
position string | object 軸的位置。更多...
stack string 堆疊群組。相同 position 和相同 stack 的軸會堆疊在一起。
stackWeight number 1 刻度在堆疊群組中的權重。用於決定群組中刻度分配空間的大小。
axis string 此軸的類型。可能的值為:'x''y'。如果未設定,則會從 ID 的第一個字元推斷,該字元應為 'x''y'
offset boolean false 如果為 true,則會在兩邊邊緣新增額外空間,並縮放軸以適合圖表區域。預設情況下,這對於長條圖設定為 true
title object 刻度標題設定。更多...

# 所有軸的通用選項

命名空間: options.scales[scaleId]

名稱 類型 預設值 描述
type string 所使用的刻度類型。可以使用字串鍵建立和註冊自訂刻度。這允許變更圖表軸的類型。
alignToPixels boolean false 將像素值對齊到裝置像素。
backgroundColor 顏色 刻度區域的背景顏色。
border object 邊框設定。更多...
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

名稱 類型 預設值 描述
align string 'center' 刻度沿軸的對齊方式。可以是 'start''center''end''inner'inner 對齊方式表示水平軸的第一個刻度對齊 start,最後一個刻度對齊 end
crossAlign string 'near' 垂直於軸的刻度對齊方式。可以是 'near''center''far'。請參閱刻度對齊
sampleSize number ticks.length 在決定可容納多少標籤時要檢查的刻度數。設定較小的值會更快,但在標籤長度變化很大時可能會不太準確。
autoSkip boolean true 如果為 true,則會自動計算可以顯示多少標籤,並相應地隱藏標籤。標籤會旋轉到 maxRotation,然後再跳過任何標籤。關閉 autoSkip 以顯示所有標籤,無論如何。
autoSkipPadding number 3 啟用 autoSkip 時,水平軸上刻度之間的間距。
includeBounds boolean true 是否應該將定義的 minmax 值呈現為刻度,即使它們不是「nice」。
labelOffset number 0 從刻度中心點偏移標籤的距離(以像素為單位)(對於 x 軸在 x 方向,對於 y 軸在 y 方向)。注意:這可能會導致邊緣的標籤被畫布邊緣裁剪
maxRotation number 50 旋轉以壓縮標籤時,刻度標籤的最大旋轉角度。注意:旋轉只有在必要時才會發生。注意:僅適用於水平刻度。
minRotation number 0 刻度標籤的最小旋轉角度。注意:僅適用於水平刻度。
mirror boolean false 在軸周圍翻轉刻度標籤,將標籤顯示在圖表內而不是外部。注意:僅適用於垂直刻度。
padding number 0 刻度標籤和軸之間的間距。在垂直軸上設定時,這會套用在水平 (X) 方向。在水平軸上設定時,這會套用在垂直 (Y) 方向。
maxTicksLimit number 11 要顯示的最大刻度數和網格線數。

# 所有軸的通用刻度選項

命名空間: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 繪製在上方。

# 最小最大值設定

對於 minmax 屬性,值必須是 labels 陣列中的 string,或是該陣列中標籤索引的 numeric 值。在下面的範例中,x 軸只會顯示「三月」到「六月」。

let chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [10, 20, 30, 40, 50, 60]
        }],
        labels: ['January', 'February', 'March', 'April', 'May', 'June']
    },
    options: {
        scales: {
            x: {
                min: 'March'
            }
        }
    }
});

# 內部資料格式

內部類別刻度使用標籤索引

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