PieChartAPI

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

示範

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

匯入

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

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

Props

原生組件的 props 也可用。

名稱	類型	預設	描述
series*	Array<object>	-	要在圓餅圖中顯示的 series。 PieSeriesType 物件的陣列 PieSeriesType。
axisHighlight	{ x?: 'band' \| 'line' \| 'none', y?: 'band' \| 'line' \| 'none' }	{ x: 'none', y: 'none' }	座標軸醒目提示的配置。請參閱醒目提示文件以瞭解更多詳細資訊。
bottomAxis	object \| string	null	指示要顯示圖表底部的哪個軸。可以是字串（軸的 ID）或 `ChartsXAxisProps` 物件。
colors	Array<string> \| func	blueberryTwilightPalette	用於為多個 series 上色的調色盤。
dataset	Array<object>	-	物件陣列，可用於使用其 `dataKey` 屬性來填入 series 和軸資料。
disableAxisListener	bool	false	如果為 `true`，圖表將不會監聽滑鼠移動事件。這可能會破壞互動式功能，但會提高效能。
height	number	-	圖表的 px 高度。如果未定義，則會採用父元素的高度。
highlightedItem	{ dataIndex?: number, seriesId?: number \| string }	-	目前醒目提示的項目。將醒目提示變成受控的 prop。
leftAxis	object \| string	null	指示要顯示圖表左側的哪個軸。可以是字串（軸的 ID）或 `ChartsYAxisProps` 物件。
legend	{ classes?: object, direction?: 'column' \| 'row', hidden?: bool, itemGap?: number, itemMarkHeight?: number, itemMarkWidth?: number, labelStyle?: object, markGap?: number, onItemClick?: func, padding?: number \| { bottom?: number, left?: number, right?: number, top?: number }, position?: { horizontal: 'left' \| 'middle' \| 'right', vertical: 'bottom' \| 'middle' \| 'top' }, slotProps?: object, slots?: object }	{ direction: 'column', position: { vertical: 'middle', horizontal: 'right' } }	圖例的 props。已棄用－考慮改用 `slotProps.legend`。
loading	bool	false	如果為 `true`，則會顯示載入覆蓋。
margin	{ bottom?: number, left?: number, right?: number, top?: number }	object 取決於圖表類型。	SVG 和繪圖區域之間的邊界。它用於為額外資訊（例如 x 軸和 y 軸或圖例）保留一些空間。接受具有可選屬性的物件：`top`、`bottom`、`left` 和 `right`。
onHighlightChange	func	-	當醒目提示的項目變更時觸發的回呼。簽名：`function(highlightedItem: HighlightItemData \| null) => void` `highlightedItem` 新醒目提示的項目。
onItemClick	func	-	當圓餅圖弧形被點擊時觸發的回呼。
resolveSizeBeforeRender	bool	false	圖表將嘗試等待父容器解析其大小，然後再首次呈現。這在某些情況下可能很有用，在這些情況下，圖表在首次呈現後似乎會成長，例如在網格內使用時。
rightAxis	object \| string	null	指示要顯示圖表右側的哪個軸。可以是字串（軸的 ID）或 `ChartsYAxisProps` 物件。
skipAnimation	bool	-	如果為 `true`，則會跳過動畫。如果未設定或為 `false`，則動畫會尊重使用者的 `prefers-reduced-motion` 設定。
slotProps	object	{}	用於每個組件 slot 的 props。
slots	object	{}	可覆寫的組件 slot。請參閱下方的Slots API以瞭解更多詳細資訊。
tooltip	{ axisContent?: elementType, classes?: object, itemContent?: elementType, slotProps?: object, slots?: object, trigger?: 'axis' \| 'item' \| 'none' }	{ trigger: 'item' }	工具提示的配置。請參閱工具提示文件以瞭解更多詳細資訊。
topAxis	object \| string	null	指示要顯示圖表頂部的哪個軸。可以是字串（軸的 ID）或 `ChartsXAxisProps` 物件。
width	number	-	圖表的 px 寬度。如果未定義，則會採用父元素的寬度。
xAxis	Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, fill?: string, hideTooltip?: bool, id?: number \| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date \| number, min?: Date \| number, position?: 'bottom' \| 'top', reverse?: bool, scaleType?: 'band' \| 'linear' \| 'log' \| 'point' \| 'pow' \| 'sqrt' \| 'time' \| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func \| object \| bool> \| func \| object, tickFontSize?: number, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, valueFormatter?: func }>	-	x 軸的配置。如果未提供，則會使用預設軸配置。 AxisConfig 物件的陣列 AxisConfig。
yAxis	Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, fill?: string, hideTooltip?: bool, id?: number \| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date \| number, min?: Date \| number, position?: 'left' \| 'right', reverse?: bool, scaleType?: 'band' \| 'linear' \| 'log' \| 'point' \| 'pow' \| 'sqrt' \| 'time' \| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func \| object \| bool> \| func \| object, tickFontSize?: number, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, valueFormatter?: func }>	-	y 軸的配置。如果未提供，則會使用預設軸配置。 AxisConfig 物件的陣列 AxisConfig。

ref 會傳遞到根元素。

主題預設 props

您可以使用 MuiPieChart 透過主題變更此組件的預設 props。

Slots

Slot 名稱	預設組件	描述
axisContent	`DefaultChartsAxisTooltipContent`	用於在由軸事件觸發時顯示工具提示內容的自訂組件。
axisLabel	`ChartsText`	軸標籤的自訂組件。
axisLine	`'line'`	軸主線的自訂組件。
axisTick	`'line'`	軸刻度的自訂組件。
axisTickLabel	`ChartsText`	刻度標籤的自訂組件。
itemContent	`DefaultChartsItemTooltipContent`	用於在由項目事件觸發時顯示工具提示內容的自訂組件。
legend	`DefaultChartsLegend`	圖例的自訂呈現。
loadingOverlay	`ChartsLoadingOverlay`	當圖表處於載入狀態時呈現的覆蓋組件。
noDataOverlay	`ChartsNoDataOverlay`	當圖表沒有資料可顯示時呈現的覆蓋組件。
pieArc
pieArcLabel
popper	`ChartsTooltipRoot`	工具提示 popper 的自訂組件。

原始碼

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