跳到主要內容

ChartsYAxisAPI

React ChartsYAxis 組件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

示範

匯入

import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
// or
import { ChartsYAxis } from '@mui/x-charts';
// or
import { ChartsYAxis } from '@mui/x-charts-pro';

請閱讀這份關於最小化套件大小的指南，以瞭解差異。

Props

名稱類型預設值描述
axisIdnumber
| string		-

要渲染的座標軸 ID。如果未定義，則將會是第一個已定義的座標軸。

classesobject-

覆寫或擴展應用於組件的樣式。

請參閱下方CSS 類別 API 以瞭解更多詳細資訊。

disableLineboolfalse

如果為 true，則停用座標軸線條。

disableTicksboolfalse

如果為 true，則停用刻度。

fillstring'currentColor'

座標軸文字的填滿顏色。

labelstring-

座標軸的標籤。

labelFontSizenumber14

座標軸標籤的字體大小。

labelStyleobject-

應用於座標軸標籤的樣式。

position'left'
| 'right'		-

座標軸的位置。

slotPropsobject{}

用於每個組件插槽的 props。

slotsobject{}

可覆寫的組件插槽。

請參閱下方Slots API 以瞭解更多詳細資訊。

strokestring'currentColor'

座標軸線條的筆觸顏色。

tickFontSizenumber12

座標軸刻度文字的字體大小。

tickInterval'auto'
| array
| func		'auto'

定義要顯示哪些刻度。其值可以是：- 'auto' 在這種情況下，刻度會根據座標軸比例和其他參數計算得出。- 格式為 (value, index) => boolean 的篩選函數，僅在座標軸具有「點」比例時可用。- 包含應顯示刻度值的陣列。

tickLabelInterval'auto'
| func		'auto'

定義哪些刻度會顯示其標籤。其值可以是：- 'auto' 在這種情況下，如果標籤不與前一個標籤重疊，則會顯示標籤。- 格式為 (value, index) => boolean 的篩選函數。警告：index 是刻度索引，而不是資料索引。

tickLabelPlacement'middle'
| 'tick'		'middle'

刻度標籤的放置位置。可以是帶狀的中間，或刻度位置。僅在比例為 'band' 時使用。

tickLabelStyleobject-

應用於刻度文字的樣式。

tickMaxStepnumber-

兩個刻度之間的最大步長。當使用時間資料時，該值假定以毫秒為單位。不支援類別座標軸（band、points）。

tickMinStepnumber-

兩個刻度之間的最小步長。當使用時間資料時，該值假定以毫秒為單位。不支援類別座標軸（band、points）。

tickNumbernumber-

刻度的數量。此數字不保證。不支援類別座標軸（band、points）。

tickPlacement'end'
| 'extremities'
| 'middle'
| 'start'		'extremities'

刻度相對於帶狀間隔的放置位置。僅在比例為 'band' 時使用。

tickSizenumber6

刻度的大小。

組件無法持有 ref。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於組件的插槽。

類別名稱規則名稱描述
.MuiChartsYAxis-bottombottom應用於底部座標軸的樣式。
.MuiChartsYAxis-directionXdirectionX應用於 x 軸的樣式。
.MuiChartsYAxis-directionYdirectionY應用於 y 軸的樣式。
.MuiChartsYAxis-labellabel應用於包含座標軸標籤的群組的樣式。
.MuiChartsYAxis-leftleft應用於左側座標軸的樣式。
.MuiChartsYAxis-lineline應用於主線條元素的樣式。
.MuiChartsYAxis-rightright應用於右側座標軸的樣式。
.MuiChartsYAxis-rootroot應用於根元素的樣式。
.MuiChartsYAxis-ticktick應用於刻度的樣式。
.MuiChartsYAxis-tickContainertickContainer應用於包含刻度及其標籤的群組的樣式。
.MuiChartsYAxis-tickLabeltickLabel應用於刻度標籤的樣式。
.MuiChartsYAxis-toptop應用於頂部座標軸的樣式。

您可以使用以下其中一種自訂選項來覆寫組件的樣式

原始碼

如果您在本頁中找不到資訊，請考慮查看組件的實作以取得更多詳細資訊。