圖表 - 圓餅圖

圓餅圖使用圓弧或角度來表示整體的各個部分。

基本用法

若要繪製圓餅圖，序列必須具有包含物件陣列的 data 屬性。這些物件應包含 value 屬性。它們也可以具有 label 屬性。

如果您計劃更新/重新排序這些數據，則應新增一個 id 屬性，用於 key props。

<PieChart
  series={[
    {
      data: [
        { id: 0, value: 10, label: 'series A' },
        { id: 1, value: 15, label: 'series B' },
        { id: 2, value: 20, label: 'series C' },
      ],
    },
  ]}
  width={400}
  height={200}
/>

<PieChart
  series={[
    {
      data: [
        { id: 0, value: 10, label: 'series A' },
        { id: 1, value: 15, label: 'series B' },
        { id: 2, value: 20, label: 'series C' },
      ],
    },
  ]}
  width={400}
  height={200}
/>

按下 Enter 鍵開始編輯

顏色

圓餅圖的顏色可以透過兩種方式自訂。

您可以提供調色盤。圓餅圖的每個圓弧將根據此調色盤著色。
您可以在 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 圓餅圖的中心點。預設為繪圖區域的中心。

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

<PieChart
  series={[
    {
      data: [ ... ],
      innerRadius: 30,
      outerRadius: 100,
      paddingAngle: 5,
      cornerRadius: 5,
      startAngle: -45,
      endAngle: 225,
      cx: 150,
      cy: 150,
    }
  ]}
/>

互動範例

innerRadius

outerRadius

paddingAngle

cornerRadius

startAngle

endAngle

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

innerRadius/outerRadius/arcLabelRadius，'100%' 等同於適合繪圖區域的最大半徑。
cx、cy，'100%' 等同於繪圖區域的寬度/高度。

醒目提示

圓餅圖序列可以取得 highlightScope 屬性來管理元素醒目提示。其行為在專門頁面中描述。

當元素被醒目提示或淡化時，可以使用專用的 CSS 類別進行自訂：.MuiPieArc-faded 和 .MuiPieArc-highlighted。

CSS 非常適合修改 color、stroke-width 或 opacity。但是，若要修改圓餅圖圓弧的大小，您必須使用 highlighted 和 faded 屬性，透過它們，您可以在圓弧被醒目提示或淡化時覆蓋任何 innerRadius、outerRadius 和 cornerRadius 屬性。

如果您不想提供絕對值，可以使用 additionalRadius，它將被新增到 outerRadius。此值可以是負數以縮小圓弧大小。

<PieChart
  series={[
    {
      data: desktopOS,
      highlightScope: { fade: 'global', highlight: 'item' },
      faded: { innerRadius: 30, additionalRadius: -30, color: 'gray' },
      valueFormatter,
    },
  ]}
  height={200}
/>

<PieChart
  series={[
    {
      data: desktopOS,
      highlightScope: { fade: 'global', highlight: 'item' },
      faded: { innerRadius: 30, additionalRadius: -30, color: 'gray' },
      valueFormatter,
    },
  ]}
  height={200}
/>

按下 Enter 鍵開始編輯

點擊事件

圓餅圖提供 onItemClick 處理器，用於處理特定圓餅圖圓弧的點擊。它具有以下簽名。

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

點擊圖表

// Data from item click
// The data will appear here

動畫

若要在圖表的建立和更新時跳過動畫，您可以使用 skipAnimation prop。當設定為 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 和類別的完整參考。