图表 - 饼图

饼图使用圆形内的弧或角度来表示整体的各部分。

基础知识

要绘制饼图，系列必须具有包含对象数组的 data 属性。这些对象应包含 value 属性。它们也可以具有 label 属性。

如果您计划更新/重新排序这些数据，则应添加用于 key props 的 id 属性。

颜色

可以通过两种方式自定义饼图颜色。

1. 您可以提供调色板。饼图的每个弧将根据此调色板着色。
2. 您可以在 data 对象中提供 color 属性，该属性将覆盖调色板。

<PieChart
  colors={['red', 'blue', 'green']} // Use palette
  series={[
    {
      data: [
        { value: 10, color: 'orange' }, // Use color property
        // ...
      ],
    },
  ]}
/>

尺寸

饼图系列的形状由多个属性描述

• innerRadius 中心与弧开始之间的半径。默认设置为 0。
• outerRadius 中心与弧结束之间的半径。默认值是绘图区域中可用的最大值。
• arcLabelRadius 中心与弧标签之间的半径。
• paddingAngle 两个弧之间的角度（以度为单位）。
• cornerRadius 类似于 CSS border-radius。
• startAngle/endAngle 饼图的角度范围。值以度为单位给出。
• cx/cy 饼图的中心。默认情况下是绘图区域的中间。

以下属性接受百分比字符串（例如 '50%'）。

• innerRadius/outerRadius/arcLabelRadius，其中 '100%' 等效于适合绘图区域的最大半径。
• cx，cy，其中 '100%' 等效于绘图区域的宽度/高度。

标签

您可以在弧上显示标签。为此，系列应获取 arcLabel 属性。它可以获取一个函数，该函数获取与弧关联的对象并返回标签。或者您可以传递以下值之一

• 'value' 显示弧的原始值。
• 'formattedValue' 显示弧的 valueFormatter 的返回值。
• 'label' 显示弧的 label 属性（如果提供）。

为避免在小弧上显示标签，您可以提供 arcLabelMinAngle 属性。角度小于该值（以度为单位）的弧将没有标签。

高亮

饼图系列可以获取 highlightScope 属性来管理元素高亮。其行为在专用页面中描述。

当元素被高亮或淡化时，可以使用专用的 CSS 类对其进行自定义：.MuiPieArc-faded 和 .MuiPieArc-highlighted。

CSS 非常适合修改 color、stroke-width 或 opacity。但是，要修改饼图弧的大小，您必须使用 highlighted 和 faded 属性，您可以使用它们在弧被高亮或淡化时覆盖 innerRadius、outerRadius 和 cornerRadius 的任何属性。

如果您不想提供绝对值，可以使用 additionalRadius，它将被添加到 outerRadius。此值可以为负数以减小弧的大小。

点击事件

饼图为处理特定饼图弧上的点击事件提供了 onItemClick 处理程序。它具有以下签名。

const onItemClick = (
  event, // The mouse event.
  params, // An object that identifies the clicked element.
) => {};

动画

要跳过图表创建和更新时的动画，您可以使用 skipAnimation 属性。当设置为 true 时，它会跳过由 @react-spring/web 驱动的动画。

图表容器已经使用来自 @react-spring/web 的 useReducedMotion 来跳过动画根据用户偏好。

// For a single component chart
<PieChart skipAnimation />

// For a composed chart
<ResponsiveChartContainer>
  <PiePlot skipAnimation />
</ResponsiveChartContainer>

API

请参阅下面的文档，以获得此处提及的组件的所有可用 props 和类的完整参考。

• <PieArc />
• <PieArcLabel />
• <PieArcLabelPlot />
• <PieArcPlot />
• <PieChart />
• <PiePlot />