PiecewiseColorLegendAPI

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

範例

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

圖表 - 圖例

導入

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

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

Props

名稱	類型	預設	描述
direction*	'column' \| 'row'	-	圖例版面配置方向。預設值取決於圖表。
position*	{ horizontal: 'left' \| 'middle' \| 'right', vertical: 'bottom' \| 'middle' \| 'top' }	-	圖例的位置。
axisDirection	'x' \| 'y' \| 'z'	'z'	包含要表示的顏色配置的座標軸方向。
axisId	number \| string	第一個座標軸項目。	具有要表示的顏色配置的座標軸項目的 ID。
classes	object	-	覆寫或擴展應用於組件的樣式。請參閱下方的 CSS 類別 API 以瞭解更多詳細資訊。
hideFirst	bool	false	隱藏圖例的第一個項目，對應於 [-infinity, min] 片段。
hideLast	bool	false	隱藏圖例的最後一個項目，對應於 [max, +infinity] 片段。
itemGap	number	10	兩個圖例項目之間的間距 (以 px 為單位)。
itemMarkHeight	number	20	項目標記的高度 (以 px 為單位)。
itemMarkWidth	number	20	項目標記的寬度 (以 px 為單位)。
labelFormatter	func	-	格式化圖例標籤。簽名：`function(params: PiecewiseLabelFormatterParams) => string \| null` `params` 要格式化的片段的邊界。返回：顯示的標籤，或 `null` 以跳過該項目。
labelStyle	object	theme.typography.subtitle1	應用於圖例標籤的樣式。
markGap	number	5	標記和標籤之間的間距 (以 px 為單位)。
onItemClick	func	-	當圖例項目被點擊時觸發的回呼。簽名：`function(event: React.MouseEvent, legendItem: PiecewiseColorLegendItemContext, index: number) => void` `event` 點擊事件。 `legendItem` 圖例項目資料。 `index` 被點擊的圖例項目的索引。
padding	number \| { bottom?: number, left?: number, right?: number, top?: number }	10	圖例內距 (以 px 為單位)。可以是單一數字，也可以是具有 top、left、bottom、right 屬性的物件。

此組件無法持有 ref。

CSS 類別

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

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

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

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

原始碼

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