ChartsLegendAPI

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

範例

如需此 React 組件用法的範例和詳細資訊，請造訪組件示範頁面

圖表 - 圖例

Import

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

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

Props

名稱	類型	預設值	描述
classes	object	-	覆寫或擴展應用於組件的樣式。請參閱下方CSS 類別 API 以瞭解更多詳細資訊。
direction	'column' \| 'row'	-	圖例佈局的方向。預設值取決於圖表。
hidden	bool	false	設定為 true 以隱藏圖例。
itemGap	number	10	兩個圖例項目之間的間距（以像素為單位）。
itemMarkHeight	number	20	項目標記的高度（以像素為單位）。
itemMarkWidth	number	20	項目標記的寬度（以像素為單位）。
labelStyle	object	theme.typography.subtitle1	應用於圖例標籤的樣式。
markGap	number	5	標記和標籤之間的間距（以像素為單位）。
onItemClick	func	-	當點擊圖例項目時觸發的回呼函數。簽名：`function(event: React.MouseEvent, legendItem: SeriesLegendItemContext, index: number) => void` `event` 點擊事件。 `legendItem` 圖例項目資料。 `index` 點擊的圖例項目的索引。
padding	number \| { bottom?: number, left?: number, right?: number, top?: number }	10	圖例內距（以像素為單位）。可以是單一數字，也可以是具有 top、left、bottom、right 屬性的物件。
position	{ horizontal: 'left' \| 'middle' \| 'right', vertical: 'bottom' \| 'middle' \| 'top' }	-	圖例的位置。
slotProps	object	{}	用於每個組件插槽的 props。
slots	object	{}	可覆寫的組件插槽。請參閱下方插槽 API 以瞭解更多詳細資訊。

組件無法持有 ref。

插槽

插槽名稱	類別名稱	預設組件	描述
legend		`DefaultChartsLegend`	圖例的自訂渲染。

CSS 類別

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

類別名稱	規則名稱	描述
.MuiChartsLegend-column	column	應用於具有欄佈局的圖例的樣式。
.MuiChartsLegend-itemBackground	itemBackground	應用於項目背景的樣式。
.MuiChartsLegend-label	label	應用於系列標籤的樣式。
.MuiChartsLegend-mark	mark	應用於系列標記元素的樣式。
.MuiChartsLegend-root	root	應用於根元素的樣式。
.MuiChartsLegend-row	row	應用於具有列佈局的圖例的樣式。
.MuiChartsLegend-series	series	應用於系列元素的樣式。

您可以使用以下自訂選項之一覆寫組件的樣式

使用全域類別名稱。
在自訂主題中使用規則名稱作為組件的 styleOverrides 屬性的一部分。

原始碼

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