# 直角坐標軸

遵循直角坐標網格的軸稱為「直角坐標軸」。直角坐標軸用於折線圖、長條圖和氣泡圖。Chart.js 預設包含四種直角坐標軸。

# 視覺元件

直角坐標軸由可以單獨設定的視覺元件組成。這些元件為

邊框
格線
刻度
刻度標記
標題

# 邊框

軸邊框繪製在軸的邊緣，圖表區域旁邊。在下圖中，它以紅色繪製。

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        border: {
          color: 'red'
        }
      }
    }
  }
};const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        border: {
          color: 'red'
        }
      }
    }
  }
};

# 格線

軸的格線繪製在圖表區域上。在下圖中，它們是紅色的。

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        grid: {
          color: 'red',
          borderColor: 'grey',
          tickColor: 'grey'
        }
      }
    }
  }
};const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        grid: {
          color: 'red',
          borderColor: 'grey',
          tickColor: 'grey'
        }
      }
    }
  }
};

# 刻度和刻度標記

刻度表示軸上以標籤形式顯示的數據值。刻度標記是從軸邊框延伸到標籤的格線延伸部分。在此範例中，刻度標記以紅色繪製，而刻度標籤以藍色繪製。

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        grid: {
          tickColor: 'red'
        },
        ticks: {
          color: 'blue',
        }
      }
    }
  }
};const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        grid: {
          tickColor: 'red'
        },
        ticks: {
          color: 'blue',
        }
      }
    }
  }
};

# 標題

軸的標題元件用於標記數據。在以下範例中，它以紅色顯示。

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        title: {
          color: 'red',
          display: true,
          text: 'Month'
        }
      }
    }
  }
};const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        title: {
          color: 'red',
          display: true,
          text: 'Month'
        }
      }
    }
  }
};

# 通用設定

注意

這些只是所有直角坐標軸支援的通用選項。請參閱特定軸的說明文件，以了解該軸的所有可用選項。

# 所有直角坐標軸的通用選項

命名空間：options.scales[scaleId]

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

# 所有軸的通用選項

命名空間：options.scales[scaleId]

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

# 軸位置

軸可以位於圖表的邊緣、圖表區域的中心，或根據資料值動態調整位置。

若要將軸定位在圖表的邊緣，請將 position 選項設定為下列其中一項：'top'、'left'、'bottom'、'right'。若要將軸定位在圖表區域的中心，請將 position 選項設定為 'center'。在此模式下，必須指定 axis 選項，或者軸 ID 必須以字母 'x' 或 'y' 開頭。這是為了讓 chart.js 知道它是哪種類型的軸 (水平或垂直)。若要根據資料值定位軸，請將 position 選項設定為物件，例如

{
    x: -20
}

這會將軸定位在 ID 為「x」的軸上的值 -20。對於直角坐標軸，只能指定 1 個軸。

# 刻度邊界

bounds 屬性控制刻度邊界策略 (由 min/max 選項略過)。

'data'：確保資料完全可見，移除外部標籤
'ticks'：確保刻度完全可見，截斷外部資料

# 刻度設定

注意

這些只是所有直角坐標軸支援的通用刻度選項。請參閱特定軸的說明文件，以了解該軸的所有可用選項。

# 所有直角坐標軸的通用刻度選項

命名空間：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`	即使定義的 `min` 和 `max` 值不是「很好」，是否應將它們呈現為刻度。
`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 會繪製在上方。

# 刻度對齊

刻度的對齊主要由刻度配置物件上的兩個設定控制：align 和 crossAlign。align 設定配置標籤如何沿著軸的方向與刻度標記對齊（即，水平軸為水平對齊，垂直軸為垂直對齊）。crossAlign 設定配置標籤如何與垂直方向的刻度標記對齊（即，水平軸為垂直對齊，垂直軸為水平對齊）。在下面的範例中，crossAlign 設定用於將 Y 軸上的標籤左對齊。

const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        ticks: {
          crossAlign: 'far',
        }
      }
    }
  }
};const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        ticks: {
          crossAlign: 'far',
        }
      }
    }
  }
};

注意

只有在滿足這些先決條件時，crossAlign 設定才有效

刻度旋轉為 0
軸位置為 'top'、'left'、'bottom' 或 'right'

# 軸 ID

dataset.xAxisID 或 dataset.yAxisID 屬性必須與 scales 屬性匹配。當使用多軸圖表時，尤其需要這樣做。

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            // This dataset appears on the first axis
            yAxisID: 'first-y-axis'
        }, {
            // This dataset appears on the second axis
            yAxisID: 'second-y-axis'
        }]
    },
    options: {
        scales: {
            'first-y-axis': {
                type: 'linear'
            },
            'second-y-axis': {
                type: 'linear'
            }
        }
    }
});

# 建立多個軸

對於笛卡爾軸，可以建立多個 X 和 Y 軸。為此，您可以將多個配置物件新增到 xAxes 和 yAxes 屬性。新增新軸時，請務必指定新軸的類型，因為在這種情況下**不會**使用預設類型。

在下面的範例中，我們建立了兩個 Y 軸。然後，我們使用 yAxisID 屬性將資料集對應到其正確的軸。

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [20, 50, 100, 75, 25, 0],
            label: 'Left dataset',
            // This binds the dataset to the left y axis
            yAxisID: 'left-y-axis'
        }, {
            data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
            label: 'Right dataset',
            // This binds the dataset to the right y axis
            yAxisID: 'right-y-axis'
        }],
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    options: {
        scales: {
            'left-y-axis': {
                type: 'linear',
                position: 'left'
            },
            'right-y-axis': {
                type: 'linear',
                position: 'right'
            }
        }
    }
});

← 軸類別軸 →