ChartsAxisAPI
React ChartsAxis 組件的 API 參考文件。了解此導出模組的 props、CSS 和其他 API。
範例
匯入
import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
// or
import { ChartsAxis } from '@mui/x-charts';
// or
import { ChartsAxis } from '@mui/x-charts-pro';透過閱讀這份關於最小化套件大小的指南，了解它們之間的差異。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| bottomAxis | object | string | xAxisIds[0] 第一個提供的軸的 id | 指示要顯示圖表底部的哪個軸。可以是字串（軸的 id）或物件 |
| leftAxis | object | string | yAxisIds[0] 第一個提供的軸的 id | 指示要顯示圖表左側的哪個軸。可以是字串（軸的 id）或物件 |
| rightAxis | object | string | null | 指示要顯示圖表右側的哪個軸。可以是字串（軸的 id）或物件 |
| slotProps | object | {} | 用於每個組件插槽的 props。 |
| slots | object | {} | 可覆寫的組件插槽。 請參閱下方的插槽 API 以了解更多詳細資訊。 |
| topAxis | object | string | null | 指示要顯示圖表頂部的哪個軸。可以是字串（軸的 id）或物件 |
此組件無法持有 ref。
這些類別名稱對於使用 CSS 設定樣式很有用。它們在觸發特定狀態時應用於組件的插槽。
| 類別名稱 | 規則名稱 | 描述 |
|---|---|---|
| .MuiChartsAxis-bottom | bottom | 應用於底部軸的樣式。 |
| .MuiChartsAxis-directionX | directionX | 應用於 x 軸的樣式。 |
| .MuiChartsAxis-directionY | directionY | 應用於 y 軸的樣式。 |
| .MuiChartsAxis-label | label | 應用於包含軸標籤的群組的樣式。 |
| .MuiChartsAxis-left | left | 應用於左側軸的樣式。 |
| .MuiChartsAxis-line | line | 應用於主線條元素的樣式。 |
| .MuiChartsAxis-right | right | 應用於右側軸的樣式。 |
| .MuiChartsAxis-root | root | 應用於根元素的樣式。 |
| .MuiChartsAxis-tick | tick | 應用於刻度的樣式。 |
| .MuiChartsAxis-tickContainer | tickContainer | 應用於包含刻度和其標籤的群組的樣式。 |
| .MuiChartsAxis-tickLabel | tickLabel | 應用於刻度標籤的樣式。 |
| .MuiChartsAxis-top | top | 應用於頂部軸的樣式。 |
您可以使用以下自訂選項之一來覆寫組件的樣式
- 使用全域類別名稱。
- 在自訂主題中使用規則名稱作為組件的
styleOverrides屬性的一部分。
原始碼
如果您在此頁面中找不到資訊，請考慮查看組件的實作以了解更多詳細資訊。