"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Cell, Pie, PieChart, Tooltip } from "recharts"
const Demo = () => {
const chart = useChart({
data: [
{ name: "windows", value: 400, color: "blue.solid" },
{ name: "mac", value: 300, color: "orange.solid" },
{ name: "linux", value: 300, color: "pink.solid" },
{ name: "other", value: 200, color: "green.solid" },
],
})
return (
<Chart.Root boxSize="200px" chart={chart} mx="auto">
<PieChart>
<Tooltip
cursor={false}
animationDuration={100}
content={<Chart.Tooltip hideLabel />}
/>
<Pie
innerRadius={80}
outerRadius={100}
isAnimationActive={false}
data={chart.data}
dataKey={chart.key("value")}
nameKey="name"
>
{chart.data.map((item) => {
return <Cell key={item.name} fill={chart.color(item.color)} />
})}
</Pie>
</PieChart>
</Chart.Root>
)
}
用法
import { Chart, useChart } from "@chakra-ui/charts"
import { Cell, Pie, PieChart } from "recharts"<Chart.Root>
<PieChart>
<Pie>
<Cell />
</Pie>
</PieChart>
</Chart.Root>示例
点标签
要在图表上显示点标签，请使用 recharts 中的 PointLabel 组件。
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Cell, Pie, PieChart, Tooltip } from "recharts"
const Demo = () => {
const chart = useChart({
data: [
{ name: "windows", value: 400, color: "blue.solid" },
{ name: "mac", value: 300, color: "orange.solid" },
{ name: "linux", value: 300, color: "pink.solid" },
{ name: "other", value: 200, color: "green.solid" },
],
})
return (
<Chart.Root boxSize="200px" chart={chart} mx="auto">
<PieChart margin={{ left: 40 }}>
<Tooltip
cursor={false}
animationDuration={100}
content={<Chart.Tooltip hideLabel />}
/>
<Pie
innerRadius={80}
outerRadius={100}
isAnimationActive={false}
data={chart.data}
dataKey={chart.key("value")}
nameKey="name"
labelLine={{ strokeWidth: 1 }}
label={{
fill: chart.color("fg.muted"),
}}
>
{chart.data.map((item) => (
<Cell
key={item.name}
strokeWidth={2}
fill={chart.color(item.color)}
/>
))}
</Pie>
</PieChart>
</Chart.Root>
)
}
起始和结束角度
自定义 <Pie> 组件的 startAngle 和 endAngle 属性可以创建部分甜甜圈。
<Pie startAngle={180} endAngle={0}>
{/* ... */}
</Pie>"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Cell, Pie, PieChart, Tooltip } from "recharts"
const Demo = () => {
const chart = useChart({
data: [
{ name: "windows", value: 400, color: "blue.solid" },
{ name: "mac", value: 300, color: "orange.solid" },
{ name: "linux", value: 300, color: "pink.solid" },
{ name: "other", value: 200, color: "green.solid" },
],
})
return (
<Chart.Root boxSize="200px" chart={chart} mx="auto">
<PieChart>
<Tooltip
cursor={false}
animationDuration={100}
content={<Chart.Tooltip hideLabel />}
/>
<Pie
innerRadius={60}
outerRadius={100}
isAnimationActive={false}
data={chart.data}
dataKey={chart.key("value")}
nameKey="name"
startAngle={180}
endAngle={0}
>
{chart.data.map((item) => (
<Cell key={item.name} fill={chart.color(item.color)} />
))}
</Pie>
</PieChart>
</Chart.Root>
)
}
角度填充
要在片段之间添加一些空间，请使用 paddingAngle 属性。
专业提示： 要使片段的角变圆，请使用 cornerRadius 属性。
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Cell, Pie, PieChart, Tooltip } from "recharts"
const Demo = () => {
const chart = useChart({
data: [
{ name: "windows", value: 400, color: "blue.solid" },
{ name: "mac", value: 300, color: "orange.solid" },
{ name: "linux", value: 300, color: "pink.solid" },
],
})
return (
<Chart.Root boxSize="200px" chart={chart} mx="auto">
<PieChart>
<Tooltip
cursor={false}
animationDuration={100}
content={<Chart.Tooltip hideLabel />}
/>
<Pie
innerRadius={80}
outerRadius={100}
isAnimationActive={false}
data={chart.data}
dataKey={chart.key("value")}
paddingAngle={8}
cornerRadius={4}
>
{chart.data.map((item) => (
<Cell key={item.name} fill={chart.color(item.color)} />
))}
</Pie>
</PieChart>
</Chart.Root>
)
}
分离的片段
要创建活动片段被缩放并与其余片段分离的效果，请使用 activeIndex 属性和 activeShape 属性。
<Pie
innerRadius={60}
outerRadius={100}
activeIndex={0}
activeShape={<Sector outerRadius={120} />}
/>"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Cell, Pie, PieChart, Sector, Tooltip } from "recharts"
const Demo = () => {
const chart = useChart({
data: [
{ name: "windows", value: 400, color: "blue.solid" },
{ name: "mac", value: 300, color: "orange.solid" },
{ name: "linux", value: 300, color: "pink.solid" },
{ name: "other", value: 200, color: "green.solid" },
],
})
return (
<Chart.Root boxSize="200px" chart={chart} mx="auto">
<PieChart>
<Tooltip
cursor={false}
animationDuration={100}
content={<Chart.Tooltip hideLabel />}
/>
<Pie
innerRadius={60}
outerRadius={100}
isAnimationActive={false}
data={chart.data}
dataKey={chart.key("value")}
nameKey={chart.key("name")}
activeIndex={0}
activeShape={<Sector outerRadius={120} />}
strokeWidth={5}
>
{chart.data.map((item) => (
<Cell key={item.name} fill={chart.color(item.color)} />
))}
</Pie>
</PieChart>
</Chart.Root>
)
}
居中文本
使用 Chart.RadialText 组件在图表上显示居中文本，并可选择添加描述。
<Label
content={({ viewBox }) => (
<Chart.RadialText viewBox={viewBox} title={1200} description="users" />
)}
/>"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Cell, Label, Pie, PieChart, Tooltip } from "recharts"
const Demo = () => {
const chart = useChart({
data: [
{ name: "windows", value: 400, color: "blue.solid" },
{ name: "mac", value: 300, color: "orange.solid" },
{ name: "linux", value: 300, color: "pink.solid" },
{ name: "other", value: 200, color: "green.solid" },
],
})
return (
<Chart.Root boxSize="200px" chart={chart} mx="auto">
<PieChart>
<Tooltip
cursor={false}
animationDuration={100}
content={<Chart.Tooltip hideLabel />}
/>
<Pie
innerRadius={80}
outerRadius={100}
isAnimationActive={false}
data={chart.data}
dataKey={chart.key("value")}
nameKey="name"
>
<Label
content={({ viewBox }) => (
<Chart.RadialText
viewBox={viewBox}
title={chart.getTotal("value").toLocaleString()}
description="users"
/>
)}
/>
{chart.data.map((item) => (
<Cell key={item.color} fill={chart.color(item.color)} />
))}
</Pie>
</PieChart>
</Chart.Root>
)
}