500K
200K
100K
100K
Google
Bing
Direct
Yandex
"use client"
import { BarSegment, useChart } from "@chakra-ui/charts"
const Demo = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 500000, color: "teal.solid" },
{ name: "Direct", value: 100000, color: "blue.solid" },
{ name: "Bing", value: 200000, color: "orange.solid" },
{ name: "Yandex", value: 100000, color: "purple.solid" },
],
})
return (
<BarSegment.Root chart={chart}>
<BarSegment.Content>
<BarSegment.Value />
<BarSegment.Bar />
<BarSegment.Label />
</BarSegment.Content>
</BarSegment.Root>
)
}
用法
import { BarSegment, Chart, useChart } from "@chakra-ui/charts"<BarSegment.Root>
<BarSegment.Content>
<BarSegment.Value />
<BarSegment.Bar />
<BarSegment.Label />
</BarSegment.Content>
</BarSegment.Root>示例
条形大小
将 barSize 属性传递给 BarSegment.Root 组件以配置条形的大小。
Ruby
35%JavaScript
23%React
17%HTML
13%CSS
12%"use client"
import { BarSegment, useChart } from "@chakra-ui/charts"
const Demo = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Ruby", value: 450000, color: "green.solid" },
{ name: "CSS", value: 150000, color: "yellow.solid" },
{ name: "JavaScript", value: 300000, color: "orange.solid" },
{ name: "HTML", value: 175000, color: "purple.solid" },
{ name: "React", value: 225000, color: "blue.solid" },
],
})
return (
<BarSegment.Root chart={chart} barSize="3">
<BarSegment.Content>
<BarSegment.Bar gap="0.5" />
</BarSegment.Content>
<BarSegment.Legend gap="2" textStyle="xs" showPercent />
</BarSegment.Root>
)
}
图例
使用 BarSegment.Legend 组件渲染图例。您可以传递 showPercent 和 showValue 来控制百分比和值的可见性。
500K
200K
100K
100K
Bing
22%Direct
11%Yandex
11%"use client"
import { BarSegment, useChart } from "@chakra-ui/charts"
const Demo = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 500000, color: "teal.solid" },
{ name: "Direct", value: 100000, color: "blue.solid" },
{ name: "Bing", value: 200000, color: "orange.solid" },
{ name: "Yandex", value: 100000, color: "purple.solid" },
],
})
return (
<BarSegment.Root chart={chart}>
<BarSegment.Content>
<BarSegment.Value />
<BarSegment.Bar />
</BarSegment.Content>
<BarSegment.Legend showPercent />
</BarSegment.Root>
)
}
工具提示
将 tooltip 属性传递给 BarSegment.Bar 组件，以便在鼠标悬停在条形上时显示工具提示。
Bing
22%Direct
11%Yandex
11%"use client"
import { BarSegment, useChart } from "@chakra-ui/charts"
const Demo = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 500000, color: "teal.solid" },
{ name: "Direct", value: 100000, color: "blue.solid" },
{ name: "Bing", value: 200000, color: "orange.solid" },
{ name: "Yandex", value: 100000, color: "purple.solid" },
],
})
return (
<BarSegment.Root chart={chart}>
<BarSegment.Content>
<BarSegment.Bar tooltip />
</BarSegment.Content>
<BarSegment.Legend showPercent />
</BarSegment.Root>
)
}
参考
要在图表上引用特定值，请使用 BarSegment.Reference 组件。
500K
200K
100K
80K
目标
Google
Bing
Direct
Yandex
"use client"
import { BarSegment, useChart } from "@chakra-ui/charts"
const Demo = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 500000, color: "teal.solid" },
{ name: "Direct", value: 100000, color: "blue.solid" },
{ name: "Bing", value: 200000, color: "orange.solid" },
{ name: "Yandex", value: 80000, color: "purple.solid" },
],
})
return (
<BarSegment.Root chart={chart}>
<BarSegment.Content>
<BarSegment.Value />
<BarSegment.Bar>
<BarSegment.Reference label="Target" value={200000} />
</BarSegment.Bar>
<BarSegment.Label />
</BarSegment.Content>
</BarSegment.Root>
)
}