"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Cell, Pie, PieChart } 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" mx="auto" chart={chart}>
<PieChart>
<Pie
isAnimationActive={false}
data={chart.data}
dataKey={chart.key("value")}
>
{chart.data.map((item) => (
<Cell key={item.name} fill={chart.color(item.color)} />
))}
</Pie>
</PieChart>
</Chart.Root>
)
}
用法
import { Chart, useChart } from "@chakra-ui/charts"
import { Pie, PieChart } from "recharts"<Chart.Root>
<PieChart>
<Pie />
</PieChart>
</Chart.Root>示例
内部标签
在 Pie 内部渲染来自 recharts 的 LabelList，以在饼图中显示标签。
<Pie>
<LabelList dataKey="name" position="inside" />
</Pie>"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Cell, LabelList, 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="320px" mx="auto" chart={chart}>
<PieChart>
<Tooltip
cursor={false}
animationDuration={100}
content={<Chart.Tooltip hideLabel />}
/>
<Pie
isAnimationActive={false}
data={chart.data}
dataKey={chart.key("value")}
>
<LabelList position="inside" fill="white" stroke="none" />
{chart.data.map((item) => (
<Cell key={item.name} fill={chart.color(item.color)} />
))}
</Pie>
</PieChart>
</Chart.Root>
)
}
外部标签
将 label 属性传递给 Pie 组件，以在饼图外部显示标签。
<Pie labelLine={false} label={({ name, value }) => `${name}: ${value}`}>
{/* ... */}
</Pie>"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Cell, Pie, PieChart } 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" mx="auto" chart={chart}>
<PieChart>
<Pie
isAnimationActive={false}
data={chart.data}
dataKey={chart.key("value")}
outerRadius={100}
innerRadius={0}
labelLine={false}
label={({ name, index }) => {
const { value } = chart.data[index ?? -1]
const percent = value / chart.getTotal("value")
return `${name}: ${(percent * 100).toFixed(1)}%`
}}
>
{chart.data.map((item) => {
return <Cell key={item.name} fill={chart.color(item.color)} />
})}
</Pie>
</PieChart>
</Chart.Root>
)
}
移除描边
将 stroke 属性设置为 none 以移除饼图的描边。
"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" mx="auto" chart={chart}>
<PieChart>
<Tooltip
cursor={false}
animationDuration={100}
content={<Chart.Tooltip hideLabel />}
/>
<Pie
isAnimationActive={false}
data={chart.data}
dataKey={chart.key("value")}
nameKey="name"
stroke="none"
>
{chart.data.map((item) => (
<Cell key={item.name} fill={chart.color(item.color)} />
))}
</Pie>
</PieChart>
</Chart.Root>
)
}
图例
渲染 Chart.Legend 组件以显示饼图的图例。
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Cell, Legend, Pie, PieChart } from "recharts"
const Demo = () => {
const chart = useChart({
data: [
{ name: "windows", value: 400, color: "teal.solid" },
{ name: "mac", value: 300, color: "orange.solid" },
{ name: "linux", value: 300, color: "blue.solid" },
],
})
return (
<Chart.Root boxSize="200px" mx="auto" chart={chart}>
<PieChart>
<Legend content={<Chart.Legend />} />
<Pie
isAnimationActive={false}
data={chart.data}
dataKey={chart.key("value")}
nameKey="name"
>
{chart.data.map((item) => (
<Cell key={item.name} fill={chart.color(item.color)} />
))}
</Pie>
</PieChart>
</Chart.Root>
)
}
点标签
这是一个如何添加点标签的示例。
"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="320px" mx="auto" chart={chart}>
<PieChart>
<Tooltip
cursor={false}
animationDuration={100}
content={<Chart.Tooltip hideLabel />}
/>
<Pie
isAnimationActive={false}
data={chart.data}
dataKey={chart.key("value")}
labelLine={{ stroke: chart.color("border.emphasized") }}
label={{
fill: chart.color("fg.muted"),
style: { fontWeight: "600" },
}}
>
{chart.data.map((item) => (
<Cell key={item.name} fill={chart.color(item.color)} />
))}
</Pie>
</PieChart>
</Chart.Root>
)
}
起始角度
将 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: "typescript", value: 400, color: "blue.solid" },
{ name: "javascript", value: 120, color: "orange.solid" },
{ name: "python", value: 300, color: "pink.solid" },
{ name: "rust", value: 278, color: "purple.solid" },
],
})
return (
<Chart.Root boxSize="320px" mx="auto" chart={chart}>
<PieChart>
<Tooltip
cursor={false}
animationDuration={100}
content={<Chart.Tooltip hideLabel />}
/>
<Pie
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>
)
}