ChartsXAxisAPI
React ChartsXAxis 組件的 API 參考文件。了解此匯出模組的 props、CSS 和其他 API。
示範
匯入
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
// or
import { ChartsXAxis } from '@mui/x-charts';
// or
import { ChartsXAxis } from '@mui/x-charts-pro';請閱讀此關於最小化套件大小的指南，以了解差異。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| axisId | number | string | - | 要呈現的軸的 ID。如果未定義，則將會是第一個定義的軸。 |
| classes | object | - | 覆寫或擴展應用於組件的樣式。 請參閱下方 CSS 類別 API 以了解更多詳細資訊。 |
| disableLine | bool | false | 如果為 true，則軸線會停用。 |
| disableTicks | bool | false | 如果為 true，則刻度會停用。 |
| fill | string | 'currentColor' | 軸文字的填滿顏色。 |
| label | string | - | 軸的標籤。 |
| labelFontSize | number | 14 | 軸標籤的字體大小。 |
| labelStyle | object | - | 應用於軸標籤的樣式。 |
| position | 'bottom' | 'top' | - | 軸的位置。 |
| slotProps | object | {} | 用於每個組件插槽的 props。 |
| slots | object | {} | 可覆寫的組件插槽。 請參閱下方 Slots API 以了解更多詳細資訊。 |
| stroke | string | 'currentColor' | 軸線的筆觸顏色。 |
| tickFontSize | number | 12 | 軸刻度文字的字體大小。 |
| tickInterval | 'auto' | array | func | 'auto' | 定義要顯示哪些刻度。其值可以是：- 'auto' 在這種情況下，刻度會根據軸比例和其他參數計算得出。- 形式為 |
| tickLabelInterval | 'auto' | func | 'auto' | 定義哪些刻度會顯示其標籤。其值可以是：- 'auto' 在這種情況下，如果標籤不與前一個標籤重疊，則會顯示標籤。- 形式為 (value, index) => boolean 的篩選函式。警告：索引是刻度索引，而不是資料索引。 |
| tickLabelPlacement | 'middle' | 'tick' | 'middle' | 刻度標籤的放置位置。可以是 band 的中間，或是刻度位置。僅在比例為 'band' 時使用。 |
| tickLabelStyle | object | - | 應用於刻度文字的樣式。 |
| tickMaxStep | number | - | 兩個刻度之間的最大步長。當使用時間資料時，該值假定為毫秒。不支援類別軸（band、points）。 |
| tickMinStep | number | - | 兩個刻度之間的最小步長。當使用時間資料時，該值假定為毫秒。不支援類別軸（band、points）。 |
| tickNumber | number | - | 刻度的數量。此數字無法保證。不支援類別軸（band、points）。 |
| tickPlacement | 'end' | 'extremities' | 'middle' | 'start' | 'extremities' | 刻度相對於 band 間隔的放置位置。僅在比例為 'band' 時使用。 |
| tickSize | number | 6 | 刻度的大小。 |
這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於組件的插槽。
| 類別名稱 | 規則名稱 | 描述 |
|---|---|---|
| .MuiChartsXAxis-bottom | bottom | 應用於底部軸的樣式。 |
| .MuiChartsXAxis-directionX | directionX | 應用於 x 軸的樣式。 |
| .MuiChartsXAxis-directionY | directionY | 應用於 y 軸的樣式。 |
| .MuiChartsXAxis-label | label | Styles applied to the group containing the axis label. |
| .MuiChartsXAxis-left | left | 應用於左側軸的樣式。 |
| .MuiChartsXAxis-line | line | 應用於主線元素的樣式。 |
| .MuiChartsXAxis-right | right | 應用於右側軸的樣式。 |
| .MuiChartsXAxis-root | root | 應用於根元素的樣式。 |
| .MuiChartsXAxis-tick | tick | 應用於刻度的樣式。 |
| .MuiChartsXAxis-tickContainer | tickContainer | 應用於包含刻度及其標籤的群組的樣式。 |
| .MuiChartsXAxis-tickLabel | tickLabel | 應用於刻度標籤的樣式。 |
| .MuiChartsXAxis-top | top | 應用於頂部軸的樣式。 |
您可以使用以下自訂選項之一來覆寫組件的樣式
- 使用全域類別名稱。
- 使用規則名稱作為自訂主題中組件的
styleOverrides屬性的一部分。
原始碼
如果您在此頁面中找不到資訊，請考慮查看組件的實作以取得更多詳細資訊。