条形列表

用于使用水平条显示分类数据，显示不同类别或项目之间的比较

Storybook

ChatGPT

Google

Bing

Direct

Github

Yandex

Yahoo

1.35M

1.2M

200K

100K

20K

"use client"

import { BarList, type BarListData, useChart } from "@chakra-ui/charts"

const Demo = () => {
  const chart = useChart<BarListData>({
    sort: { by: "value", direction: "desc" },
    data: [
      { name: "Google", value: 1200000 },
      { name: "Direct", value: 100000 },
      { name: "Bing", value: 200000 },
      { name: "Yahoo", value: 20000 },
      { name: "ChatGPT", value: 1345000 },
      { name: "Github", value: 100000 },
      { name: "Yandex", value: 100000 },
    ],
    series: [{ name: "name", color: "teal.subtle" }],
  })

  return (
    <BarList.Root chart={chart}>
      <BarList.Content>
        <BarList.Bar />
        <BarList.Value />
      </BarList.Content>
    </BarList.Root>
  )
}

用法

¥Usage

import { BarList, Chart, useChart } from "@chakra-ui/charts"

<BarList.Root>
  <BarList.Content>
    <BarList.Bar />
    <BarList.Value />
  </BarList.Content>
</BarList.Root>

示例

¥Examples

排序顺序

¥Sort Order

将 sort 键设置为 { by: "value", direction: "asc" }，以便按升序对柱状图进行排序。

¥Set the sort key to { by: "value", direction: "asc" } to sort the bars in ascending order.

const chart = useChart<BarListData>({
  sort: { by: "value", direction: "asc" },
  // ...
})

Yahoo

Direct

Github

Yandex

Bing

Google

ChatGPT

20K

100K

200K

1.2M

1.35M

"use client"

import { BarList, type BarListData, useChart } from "@chakra-ui/charts"

const Demo = () => {
  const chart = useChart<BarListData>({
    sort: { by: "value", direction: "asc" },
    data: [
      { name: "Google", value: 1200000 },
      { name: "Direct", value: 100000 },
      { name: "Bing", value: 200000 },
      { name: "Yahoo", value: 20000 },
      { name: "ChatGPT", value: 1345000 },
      { name: "Github", value: 100000 },
      { name: "Yandex", value: 100000 },
    ],
    series: [{ name: "name", color: "teal.subtle" }],
  })

  return (
    <BarList.Root chart={chart}>
      <BarList.Content>
        <BarList.Bar />
        <BarList.Value />
      </BarList.Content>
    </BarList.Root>
  )
}

格式值

¥Format Value

将 valueFormatter 属性传递给 BarList.Value 组件，以格式化条形的值。

¥Pass the valueFormatter prop to the BarList.Value component to format the value of the bars.

<BarList.Value valueFormatter={(value) => value.toLocaleString()} />

Created

Initial Contact

Booked Demo

Closed

120 (45%)

90 (34%)

45 (17%)

10 (4%)

"use client"

import { BarList, type BarListData, useChart } from "@chakra-ui/charts"

const Demo = () => {
  const chart = useChart<BarListData>({
    sort: { by: "value", direction: "desc" },
    data: [
      { name: "Created", value: 120 },
      { name: "Initial Contact", value: 90 },
      { name: "Booked Demo", value: 45 },
      { name: "Closed", value: 10 },
    ],
    series: [{ name: "name", color: "pink.subtle" }],
  })

  const getPercent = (value: number) =>
    chart.getValuePercent("value", value).toFixed(0)

  return (
    <BarList.Root chart={chart}>
      <BarList.Content>
        <BarList.Bar />
        <BarList.Value
          valueFormatter={(value) => `${value} (${getPercent(value)}%)`}
        />
      </BarList.Content>
    </BarList.Root>
  )
}

"use client"

import { BarList, type BarListData, useChart } from "@chakra-ui/charts"

const Demo = () => {
  const chart = useChart<BarListData>({
    sort: { by: "value", direction: "desc" },
    data: [
      { name: "Google", value: 1200000 },
      { name: "Direct", value: 100000 },
      { name: "Bing", value: 200000 },
      { name: "Yahoo", value: 20000 },
      { name: "ChatGPT", value: 1345000 },
      { name: "Github", value: 100000 },
      { name: "Yandex", value: 100000 },
    ],
    series: [{ name: "name", color: "teal.subtle" }],
  })

  return (
    <BarList.Root chart={chart}>
      <BarList.Content>
        <BarList.Label title="Search Engine" flex="1">
          <BarList.Bar />
        </BarList.Label>
        <BarList.Label title="Downloads" titleAlignment="end">
          <BarList.Value />
        </BarList.Label>
      </BarList.Content>
    </BarList.Root>
  )
}

链接

¥Link

要使栏渲染链接，请将 label 属性传递给 BarList.Bar 组件。

¥To make the bars render a link, pass the label prop to the BarList.Bar component.

<BarList.Bar
  label={({ payload }) => <a href={payload.href}>{payload.name}</a>}
/>

120

"use client"

import { BarList, type BarListData, useChart } from "@chakra-ui/charts"

const Demo = () => {
  const chart = useChart<BarListData>({
    sort: { by: "value", direction: "desc" },
    data: [
      { name: "Created", value: 120, href: "#" },
      { name: "Initial Contact", value: 90, href: "#" },
      { name: "Booked Demo", value: 45, href: "#" },
      { name: "Closed", value: 10, href: "#" },
    ],
    series: [{ name: "name", color: "pink.subtle" }],
  })

  return (
    <BarList.Root chart={chart}>
      <BarList.Content>
        <BarList.Bar
          label={({ payload }) => <a href={payload.href}>{payload.name}</a>}
        />
        <BarList.Value />
      </BarList.Content>
    </BarList.Root>
  )
}

工具提示

¥Tooltip

将 tooltip 属性传递给 BarList.Bar 组件，以在鼠标悬停在柱状图上时显示工具提示。

¥Pass the tooltip prop to the BarList.Bar component to show a tooltip when hovering over the bar.

Search Engine

ChatGPT

Google

Bing

Direct

Github

Yandex

Yahoo

Downloads

1.35M

1.2M

200K

100K

20K

"use client"

import { BarList, type BarListData, useChart } from "@chakra-ui/charts"

const Demo = () => {
  const chart = useChart<BarListData>({
    sort: { by: "value", direction: "desc" },
    data: [
      { name: "Google", value: 1200000 },
      { name: "Direct", value: 100000 },
      { name: "Bing", value: 200000 },
      { name: "Yahoo", value: 20000 },
      { name: "ChatGPT", value: 1345000 },
      { name: "Github", value: 100000 },
      { name: "Yandex", value: 100000 },
    ],
    series: [{ name: "name", color: "teal.subtle", label: "Search Engine" }],
  })

  return (
    <BarList.Root chart={chart}>
      <BarList.Content>
        <BarList.Label title="Search Engine" flex="1">
          <BarList.Bar tooltip />
        </BarList.Label>
        <BarList.Label title="Downloads" titleAlignment="end">
          <BarList.Value />
        </BarList.Label>
      </BarList.Content>
    </BarList.Root>
  )
}

多个值

¥Multiple values

以下是如何渲染条形的值和百分比的示例。

¥Here's an example of how to render the value and percent of the bars.

Search Engine

ChatGPT

Google

Bing

Direct

Github

Yandex

Yahoo

Downloads

1.35M

1.2M

200K

100K

20K

43.88%

39.15%

6.53%

3.26%

0.65%

"use client"

import { BarList, type BarListData, useChart } from "@chakra-ui/charts"

const Demo = () => {
  const chart = useChart<BarListData>({
    sort: { by: "value", direction: "desc" },
    data: [
      { name: "Google", value: 1200000 },
      { name: "Direct", value: 100000 },
      { name: "Bing", value: 200000 },
      { name: "Yahoo", value: 20000 },
      { name: "ChatGPT", value: 1345000 },
      { name: "Github", value: 100000 },
      { name: "Yandex", value: 100000 },
    ],
    series: [{ name: "name", color: "teal.subtle" }],
  })

  const getPercent = (value: number) =>
    chart.getValuePercent("value", value).toFixed(2)

  return (
    <BarList.Root chart={chart}>
      <BarList.Content>
        <BarList.Label title="Search Engine" flex="1">
          <BarList.Bar />
        </BarList.Label>
        <BarList.Label title="Downloads" minW="16" titleAlignment="end">
          <BarList.Value />
        </BarList.Label>
        <BarList.Label title="%" minW="16" titleAlignment="end">
          <BarList.Value valueFormatter={(value) => `${getPercent(value)}%`} />
        </BarList.Label>
      </BarList.Content>
    </BarList.Root>
  )
}

柱状图

条形片段

条形列表

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}用法

示例

排序顺序

格式值

标签

链接

工具提示

多个值

用法