useChart

useChart 钩子提供了一组实用程序，可高效地管理和格式化图表数据。它提供了各种帮助函数：

¥The useChart hook provides a set of utilities to manage and format data for charts efficiently. It offers various helpers for:

• 聚合系列数据以计算总计、最小值、最大值和百分比等值

• 格式化数字和日期

• 查询颜色、大小和间距标记

用法

¥Usage

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

系列

¥Series

getKey

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

¥Returns the key for a given series item. It's an identity function but provides a typesafe way to access the series data.

const key = chart.getKey("revenue")

聚合

¥Aggregation

getTotal

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

¥Computes the total sum of a given series across all entries.

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

getMin

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

¥Finds the minimum value for a given key in the dataset.

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

getMax

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

¥Finds the maximum value for a given key in the dataset.

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

getValuePercent

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

¥Calculates the percentage of a value relative to the dataset or a given domain.

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

格式化

¥Formatting

formatNumber

使用提供的 EnvironmentProvider 和 Intl.NumberFormatOptions 中的当前语言环境格式化数字。

¥Formats numbers using the current locale from EnvironmentProvider and Intl.NumberFormatOptions provided.

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

formatDate

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

¥Formats a date string based on locale settings.

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

设计标记

¥Design Tokens

color

获取 Chakra UI 颜色令牌。

¥Retrieves a Chakra UI color token.

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

size

获取 Chakra UI 大小令牌。

¥Retrieves a Chakra UI size token.

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

spacing

获取 Chakra UI 间距令牌。

¥Retrieves a Chakra UI spacing token.

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

排序

¥Sorting

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

¥Automatically sorts the chart data based on a specified key and direction.

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

高亮

¥Highlighting

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

¥When interacting with the chart legends, the series can be highlighted based on click or hover events. The highlightedSeries state is used to track which series is currently highlighted.

当图表中有多个系列时，此功能非常有用。

highlightedSeries

跟踪当前高亮的系列。

¥Tracks which series is currently highlighted.

setHighlightedSeries

设置高亮显示系列。

¥Sets the highlighted series.

chart.setHighlightedSeries("revenue")

isHighlightedSeries

检查某个系列是否高亮。

¥Checks if a series is highlighted.

const isActive = chart.isHighlightedSeries("revenue")

API 表

¥API Table

助手	目的
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)	检查某个系列是否高亮