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';

通过阅读这篇关于最小化 bundle size 的指南，了解它们之间的区别。

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
series*	Array<object>	-	要在饼图中显示的 series。 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	{}	用于每个组件插槽的 props。
slots	object	{}	可覆盖的组件插槽。有关更多详细信息，请参阅下面的插槽 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 对象的数组。
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 对象的数组。

ref 被转发到根元素。

主题默认 Props

您可以使用 MuiPieChart 通过主题更改此组件的默认 props。

插槽

插槽名称	默认组件	描述
axisContent	`DefaultChartsAxisTooltipContent`	用于在由轴事件触发时显示工具提示内容的自定义组件。
axisLabel	`ChartsText`	轴标签的自定义组件。
axisLine	`'line'`	轴主线的自定义组件。
axisTick	`'line'`	轴刻度的自定义组件。
axisTickLabel	`ChartsText`	刻度标签的自定义组件。
itemContent	`DefaultChartsItemTooltipContent`	用于在由项目事件触发时显示工具提示内容的自定义组件。
legend	`DefaultChartsLegend`	图例的自定义渲染。
loadingOverlay	`ChartsLoadingOverlay`	当图表处于加载状态时渲染的覆盖组件。
noDataOverlay	`ChartsNoDataOverlay`	当图表没有数据要显示时渲染的覆盖组件。
pieArc
pieArcLabel
popper	`ChartsTooltipRoot`	工具提示 popper 的自定义组件。

源代码

如果您在此页面中找不到所需信息，请考虑查看组件的实现以获取更多详细信息。