条形列表

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

Storybook

ChatGPT

Google

Bing

直接

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>
  )
}

用法

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

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

示例

排序顺序

将 sort 键设置为 { by: "value", direction: "asc" } 可按升序排列条形图。

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

Yahoo

直接

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>
  )
}

格式化值

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

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

已创建

首次联系

已预订演示

已关闭

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>
  )
}

链接

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

<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 属性传递给 BarList.Bar 组件，以便在鼠标悬停在条形图上时显示工具提示。

搜索引擎

ChatGPT

Google

Bing

直接

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", 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>
  )
}

多个值

这是一个如何渲染条形图的值和百分比的示例。

搜索引擎

ChatGPT

Google

Bing

直接

Github

Yandex

Yahoo

下载量

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;}用法

示例

排序顺序

格式化值

标签

链接

工具提示

多个值

用法