useChart

此useChart hook 提供了一套实用工具，可高效地管理和格式化图表数据。它提供了多种帮助器，用于

• 聚合系列数据以计算总计、最小值、最大值和百分比等值
• 格式化数字和日期
• 查询 颜色、大小和间距 令牌

用法

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

const chart = useChart({
  data: [
    { date: "2024-01-01", revenue: 1000 },
    { date: "2024-01-02", revenue: 2000 },
    { date: "2024-01-03", revenue: 3000 },
  ],
  series: [{ name: "revenue", color: "blue.500" }],
})

系列

getKey

返回给定系列项的键。它是一个恒等函数，但提供了一种 类型安全 的方式来访问系列数据。

const key = chart.getKey("revenue")

聚合

getTotal

计算给定系列在所有条目中的 总和。

console.log(chart.getTotal("revenue")) // 6000

getMin

查找数据集中给定键的 最小值。

console.log(chart.getMin("revenue")) // 1000

getMax

查找数据集中给定键的 最大值。

console.log(chart.getMax("revenue")) // 3000

getValuePercent

计算值相对于数据集或给定域的 百分比。

const percentage = chart.getValuePercent("revenue", 5000)
console.log(percentage) // 0.5

格式化

formatNumber

使用来自 EnvironmentProvider 的当前语言环境以及提供的 Intl.NumberFormatOptions 格式化数字。

const format = chart.formatNumber({ style: "currency", currency: "USD" })
console.log(format(1000)) // "$1,000.00"

formatDate

根据 语言环境设置 格式化日期字符串。

const formatDate = chart.formatDate({ year: "numeric", month: "short" })
console.log(formatDate("2024-03-28")) // "Mar 2024"

设计令牌

颜色

检索 Chakra UI 颜色令牌。

const barColor = chart.color("blue.500") // var(--chakra-colors-blue-500)

大小

检索 Chakra UI 大小令牌。

const chartSize = chart.size("4") // var(--chakra-sizes-4)

间距

检索 Chakra UI 间距令牌。

const barColor = chart.color("blue.500") // var(--chakra-colors-blue-500)
const chartPadding = chart.spacing("4") // var(--chakra-spacing-4)

排序

根据指定的键和方向自动对图表数据进行排序。

const chart = useChart({
  data: [
    { date: "2024-01-01", revenue: 1000 },
    { date: "2024-01-02", revenue: 2000 },
    { date: "2024-01-03", revenue: 3000 },
  ],
  sort: { by: "date", direction: "asc" },
  series: [{ name: "revenue", color: "blue.500" }],
})

高亮显示

当与图表图例交互时，可以根据 click 或 hover 事件高亮显示系列。highlightedSeries 状态用于跟踪当前高亮显示的系列。

这在图表中有多个系列时特别有用。

highlightedSeries

跟踪当前高亮显示的系列。

setHighlightedSeries

设置高亮显示的系列。

chart.setHighlightedSeries("revenue")

isHighlightedSeries

检查系列是否高亮显示。

const isActive = chart.isHighlightedSeries("revenue")

API 表

帮助器	目的
getSeries(item)	查找系列项的详细信息
getSeriesOpacity(name, fallback)	控制系列不透明度
getTotal(key)	计算键的总和
getMin(key)	获取键的最小值
getMax(key)	获取键的最大值
getValuePercent(key, value, domain)	计算值的百分比
formatNumber(options)	根据语言环境格式化数字
formatDate(options)	根据语言环境格式化日期
color(key)	检索 Chakra UI 颜色令牌
size(key)	检索 Chakra UI 大小令牌
spacing(key)	检索 Chakra UI 间距令牌
data	解析后的图表数据
highlightedSeries	跟踪高亮显示的系列
setHighlightedSeries(name)	设置高亮显示的系列
isHighlightedSeries(name)	检查系列是否高亮显示