# 線性軸

線性刻度用於繪製數值資料。它可以放置在 x 軸或 y 軸上。散佈圖表類型會自動配置折線圖,以將其中一個刻度用於 x 軸。顧名思義,線性內插用於確定值在軸上的位置。

# 配置選項

# 線性軸特定選項

命名空間: options.scales[scaleId]

名稱 類型 描述
beginAtZero 布林值 如果為 true,則刻度將包含 0(如果尚未包含)。
grace 數字|字串 在資料範圍之上和之下增加的空間的百分比(以 % 結尾的字串)或數量(數字)。更多...

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

命名空間: options.scales[scaleId]

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

# 所有軸的通用選項

命名空間: options.scales[scaleId]

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

# 刻度配置

# 線性軸特定刻度選項

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

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

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

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

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

# 所有軸的通用刻度選項

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

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

# 步階大小

若設定此項,刻度標記將會以 stepSize 的倍數來列舉,每個增量產生一個刻度。若未設定,則會使用友善數字演算法自動標記刻度。

此範例設定了一個圖表,其 y 軸會以 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5 的刻度建立標記。

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

# 緩衝

若數值為以 % 結尾的字串,則會被視為百分比。若為數字,則會被視為數值。該數值會加到資料的最大值,並從資料的最小值中減去。這會擴展刻度範圍,如同資料值增加了這麼多一樣。

const config = {
  type: 'bar',
  data,
  options: {
    scales: {
      y: {
        type: 'linear',
        grace: '5%'
      }
    },
    plugins: {
      legend: false
    }
  }
};

# 內部資料格式

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

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