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>
)
}
用法
¥Usage
import { BarSegment, Chart, useChart } from "@chakra-ui/charts"<BarSegment.Root>
<BarSegment.Content>
<BarSegment.Value />
<BarSegment.Bar />
<BarSegment.Label />
</BarSegment.Content>
</BarSegment.Root>示例
¥Examples
条形大小
¥Bar Size
将 barSize 属性传递给 BarSegment.Root 组件，即可配置条形的大小。
¥Pass the barSize prop to the BarSegment.Root component to configure the size
of the bar.
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>
)
}
图例
¥Legend
使用 BarSegment.Legend 组件渲染图例。你可以传递 showPercent 和 showValue 来控制百分比和值的可见性。
¥Use the BarSegment.Legend component to render the legend. You can pass
showPercent and showValue to control the visibility of the percentage and
values.
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
将 tooltip 属性传递给 BarSegment.Bar 组件，以在鼠标悬停在柱状图上时显示工具提示。
¥Pass the tooltip prop to the BarSegment.Bar component to show a tooltip when
hovering over the 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>
)
}
参考
¥Reference
要在图表上引用特定值，请使用 BarSegment.Reference 组件。
¥To reference a specific value on the chart, use the BarSegment.Reference
component.
500K
200K
100K
80K
Target
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>
)
}