圖表 - 圓餅圖示範

此頁面包含使用圓餅圖的示範。

TwoLevelPieChart

StraightAnglePieChart

<PieChart
  series={[
    {
      startAngle: -90,
      endAngle: 90,
      data,
    },
  ]}
  height={300}
/>

<PieChart
  series={[
    {
      startAngle: -90,
      endAngle: 90,
      data,
    },
  ]}
  height={300}
/>

按下 Enter 鍵開始編輯

TwoSimplePieChart

PieChartWithCustomizedLabel

<PieChart
  series={[
    {
      outerRadius: 80,
      data,
      arcLabel: getArcLabel,
    },
  ]}
  sx={{
    [`& .${pieArcLabelClasses.root}`]: {
      fill: 'white',
      fontSize: 14,
    },
  }}
  {...sizing}
/>

<PieChart
  series={[
    {
      outerRadius: 80,
      data,
      arcLabel: getArcLabel,
    },
  ]}
  sx={{
    [`& .${pieArcLabelClasses.root}`]: {
      fill: 'white',
      fontSize: 14,
    },
  }}
  {...sizing}
/>

按下 Enter 鍵開始編輯

PieChartWithPaddingAngle

PieChartWithCenterLabel

<PieChart series={[{ data, innerRadius: 80 }]} {...size}>
  <PieCenterLabel>Center label</PieCenterLabel>
</PieChart>

<PieChart series={[{ data, innerRadius: 80 }]} {...size}>
  <PieCenterLabel>Center label</PieCenterLabel>
</PieChart>

按下 Enter 鍵開始編輯

OnSeriesItemClick

item id: undefined

item identifier:
  undefined

API

請參閱以下文件，以完整參考此處提及的組件可用的所有 props 和類別。