DefaultChartsLegendAPI
React DefaultChartsLegend 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。
範例展示
Import
import { DefaultChartsLegend } from '@mui/x-charts/ChartsLegend';
// or
import { DefaultChartsLegend } from '@mui/x-charts';
// or
import { DefaultChartsLegend } from '@mui/x-charts-pro';閱讀關於最小化 bundle size 的指南，以瞭解差異。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| direction* | 'column' | 'row' | - | 圖例版面配置的方向。預設值取決於圖表。 |
| position* | { horizontal: 'left' | 'middle' | 'right', vertical: 'bottom' | 'middle' | 'top' } | - | 圖例的位置。 |
| classes | object | - | 覆寫或擴充套用至元件的樣式。 請參閱下方的CSS 類別 API 以瞭解更多詳細資訊。 |
| itemGap | number | 10 | 兩個圖例項目之間的間距（以 px 為單位）。 |
| itemMarkHeight | number | 20 | 項目標記的高度（以 px 為單位）。 |
| itemMarkWidth | number | 20 | 項目標記的寬度（以 px 為單位）。 |
| labelStyle | object | theme.typography.subtitle1 | 套用至圖例標籤的樣式。 |
| markGap | number | 5 | 標記和標籤之間的間距（以 px 為單位）。 |
| onItemClick | func | - | 在點擊圖例項目時觸發的回呼。 簽名： function(event: React.MouseEvent
|
| padding | number | { bottom?: number, left?: number, right?: number, top?: number } | 10 | 圖例內距（以 px 為單位）。可以是單一數字，也可以是具有 top、left、bottom、right 屬性的物件。 |
元件無法持有 ref。
這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的插槽。
| 類別名稱 | 規則名稱 | 描述 |
|---|---|---|
| .MuiDefaultChartsLegend-column | column | 套用至具有直欄式版面配置的圖例的樣式。 |
| .MuiDefaultChartsLegend-itemBackground | itemBackground | 套用至項目背景的樣式。 |
| .MuiDefaultChartsLegend-label | label | 套用至系列標籤的樣式。 |
| .MuiDefaultChartsLegend-mark | mark | 套用至系列標記元素的樣式。 |
| .MuiDefaultChartsLegend-root | root | 套用至根元素的樣式。 |
| .MuiDefaultChartsLegend-row | row | 套用至具有橫列式版面配置的圖例的樣式。 |
| .MuiDefaultChartsLegend-series | series | 套用至系列元素的樣式。 |
您可以使用以下自訂選項之一覆寫元件的樣式
- 使用全域類別名稱。
- 使用規則名稱作為自訂主題中元件的
styleOverrides屬性的一部分。
原始碼
如果您在此頁面中找不到資訊，請考慮查看元件的實作以瞭解更多詳細資訊。