# 座標軸

座標軸是圖表不可或缺的一部分。它們用於決定如何將資料對應到圖表上的像素值。在笛卡爾圖表中，會有 1 個或多個 X 軸和 1 個或多個 Y 軸，將點對應到二維畫布上。這些座標軸稱為「笛卡爾座標軸」。

在雷達圖或極地區域圖等極座標圖表中，會有單一的座標軸將點對應到角度和徑向方向。這些稱為「極座標軸」。

Chart.js v2.0 以上的版本中的刻度尺功能強大許多，但也與 v1.0 的刻度尺不同。

支援多個 X 軸和 Y 軸。
內建的標籤自動跳過功能會偵測潛在的重疊刻度和標籤，並移除每第 n 個標籤，以保持正常顯示。
支援刻度尺標題。
可以擴充新的刻度尺類型，而無需編寫全新的圖表類型。

# 預設刻度尺

笛卡爾圖表的預設 scaleId 為 'x' 和 'y'。極座標圖表為：'r'。每個資料集都會對應到其所需的每個座標軸（x、y 或 r）的刻度尺。資料集對應的 scaleId 是由 xAxisID、yAxisID 或 rAxisID 決定。如果未指定座標軸的 ID，則會使用該座標軸的第一個刻度尺。如果找不到座標軸的刻度尺，則會建立新的刻度尺。

一些範例

以下圖表將具有 'x' 和 'y' 刻度尺

let chart = new Chart(ctx, {
  type: 'line'
});

以下圖表將具有 'x' 和 'myScale' 刻度尺

let chart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      data: [1, 2, 3]
    }]
  },
  options: {
    scales: {
      myScale: {
        type: 'logarithmic',
        position: 'right', // `axis` is determined by the position as `'y'`
      }
    }
  }
});

以下圖表將具有 'xAxis' 和 'yAxis' 刻度尺

let chart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      yAxisID: 'yAxis'
    }]
  },
  options: {
    scales: {
      xAxis: {
        // The axis for this scale is determined from the first letter of the id as `'x'`
        // It is recommended to specify `position` and / or `axis` explicitly.
        type: 'time',
      }
    }
  }
});

以下圖表將具有 'r' 刻度尺

let chart = new Chart(ctx, {
  type: 'radar'
});

以下圖表將具有 'myScale' 刻度尺

let chart = new Chart(ctx, {
  type: 'radar',
  scales: {
    myScale: {
      axis: 'r'
    }
  }
});

# 通用設定

注意

這些只是所有座標軸都支援的通用選項。請參閱特定座標軸的文件，了解該座標軸的所有可用選項。

# 所有座標軸的通用選項

命名空間：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

名稱	類型	可腳本化	預設值	描述
`backdropColor`	`顏色`	是	`'rgba(255, 255, 255, 0.75)'`	標籤背景的顏色。
`backdropPadding`	`邊距`		`2`	標籤背景的邊距。
`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 的值會繪製在上方。

# 座標軸範圍設定

由於座標軸範圍設定的數量眾多，因此了解它們之間的相互作用非常重要。

suggestedMax 和 suggestedMin 設定只會變更用於縮放座標軸的資料值。這些設定對於擴充座標軸的範圍，同時維持自動調整行為很有用。

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

在此範例中，最大的正值為 50，但資料最大值擴充到 100。但是，由於最低資料值低於 suggestedMin 設定，因此會被忽略。

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

與 suggested* 設定相反，min 和 max 設定會為座標軸設定明確的終點。設定這些設定後，某些資料點可能不會顯示。

# 堆疊

預設情況下，資料不會堆疊。如果值刻度尺（水平圖表上的 y 軸）的 stacked 選項為 true，則會將正值和負值分開堆疊。此外，可以為每個資料集定義一個 stack 選項，以進一步劃分為堆疊群組更多...。對於某些圖表，您可能會想要將正值和負值一起堆疊。這可以透過指定 stacked: 'single' 來達成。

# 回呼

有許多組態回呼可用於在更新過程中的不同點變更刻度尺中的參數。這些選項是在座標軸選項的頂層提供。

命名空間：options.scales[scaleId]

名稱	引數	描述
`beforeUpdate`	`axis`	在更新過程開始之前呼叫的回呼。
`beforeSetDimensions`	`axis`	在設定尺寸之前執行的回呼。
`afterSetDimensions`	`axis`	在設定尺寸之後執行的回呼。
`beforeDataLimits`	`axis`	在決定資料限制之前執行的回呼。
`afterDataLimits`	`axis`	在決定資料限制之後執行的回呼。
`beforeBuildTicks`	`axis`	在建立刻度之前執行的回呼。
`afterBuildTicks`	`axis`	在建立刻度之後執行的回呼。用於篩選刻度很有用。
`beforeTickToLabelConversion`	`axis`	在將刻度轉換為字串之前執行的回呼。
`afterTickToLabelConversion`	`axis`	在將刻度轉換為字串之後執行的回呼。
`beforeCalculateLabelRotation`	`axis`	在決定刻度旋轉之前執行的回呼。
`afterCalculateLabelRotation`	`axis`	在決定刻度旋轉之後執行的回呼。
`beforeFit`	`axis`	在刻度尺調整到畫布之前執行的回呼。
`afterFit`	`axis`	在刻度尺調整到畫布之後執行的回呼。
`afterUpdate`	`axis`	在更新過程結束時執行的回呼。

# 更新座標軸預設值

可以輕鬆變更刻度尺的預設設定。您只需要將新選項設定為 Chart.defaults.scales[type]。

例如，若要為所有線性刻度尺設定最小值為 0，您可以執行以下操作。之後建立的任何線性刻度尺現在都將具有最小值 0。

Chart.defaults.scales.linear.min = 0;

# 建立新的座標軸

若要建立新的座標軸，請參閱開發人員文件。

← 散佈圖笛卡爾座標軸 →