# 類別軸
如果使用全域設定,標籤會從圖表資料中包含的標籤陣列之一繪製。如果僅定義了 data.labels
,則將使用此陣列。如果定義了 data.xLabels
並且軸是水平的,則將使用此屬性。同樣地,如果定義了 data.yLabels
並且軸是垂直的,則將使用此屬性。同時使用 xLabels
和 yLabels
可以建立一個 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 | 是否應該將定義的 min 和 max 值呈現為刻度,即使它們不是「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 繪製在上方。 |
# 最小最大值設定
對於 min
和 max
屬性,值必須是 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'
}
}
}
});
# 內部資料格式
內部類別刻度使用標籤索引