图表

使用 recharts 和 Chakra UI 创建精美图表

图表开箱即用，旨在美观显示，并与 Chakra UI 的主题系统无缝集成。这些图表是在recharts

安装

运行以下命令来安装图表及其对等依赖项。

npm i @chakra-ui/charts recharts

用法

导入图表组件

在大多数情况下，您需要从 @chakra-ui/charts 包中导入 Chart 和 useChart 钩子，然后将它们与 recharts 组件结合使用。

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, XAxis, YAxis } from "recharts"

定义图表数据

将图表数据传递给 useChart 钩子以创建图表实例。

了解更多关于 useChart 钩子的信息。

const chart = useChart({
  data: [
    { month: "January", value: 100 },
    { month: "February", value: 200 },
  ],
})

渲染图表

根据您从 recharts 库中需要的图表类型，将图表组件包装在 Chart.Root 组件中。

<Chart.Root chart={chart}>
  <BarChart data={chart.data}>
    {chart.series.map((item) => (
      <Bar
        key={item.name}
        dataKey={chart.key(item.name)}
        fill={chart.color(item.color)}
      />
    ))}
  </BarChart>
</Chart.Root>

自定义

图表组件构建在 Recharts 之上，因此您可以使用 Recharts 提供的所有自定义选项。

颜色

useChart 钩子提供了一个 color 函数，您可以使用它来从 recharts 查询图表组件的语义颜色。

<CartesianGrid stroke={chart.color("border.muted")} />

格式化器

useChart 钩子提供了 formatDate 和 formatNumber 函数，您可以分别用于格式化日期和数字。这对于格式化 x、y 轴标签和工具提示非常有用。

// format the x-axis labels
<XAxis tickFormatter={chart.formatDate({ month: "short", day: "2-digit" })} />

// format the y-axis labels
<YAxis tickFormatter={chart.formatNumber({ maximumFractionDigits: 1 })} />

主题

useChart