# @adecore/charts 中文文档

规范地址：https://npmcn.com/package/%40adecore/charts/

版本：0\.57\.0
npm 元数据更新时间：2026-11-07T16:46:40.568Z
中文译文更新时间：2026-11-05T22:09:13.803Z
软件包许可：FSL-1\.1-MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40adecore/charts
原文对照：https://npmcn.com/package/%40adecore/charts/?lang=original
项目主页：https://adecore.dev/charts/
源码仓库：https://github.com/basmilius/adecore

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：576 kB，117 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：react ^19\.3\.0，i18next ^26\.4\.2，react-dom ^19\.3\.0，@adecore/ui ^0\.57\.0，react-i18next ^17\.0\.15
- 首次发布：2026-10-24T12:24:32.364Z
- 最新版本发布：2026-11-07T16:46:40.232Z
- 近 30 天下载量：13877（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：92（近 12 个月 92 个）

## 中文简介

以@adecore/ui为主题的系列图表,散相,热映射,跟踪时间和火花线,由键盘和屏幕阅读器可读取.

## 安装

```sh
npm install @adecore/charts
```

也可以使用：`pnpm add @adecore/charts`、`yarn add @adecore/charts`、`bun add @adecore/charts`

## README

# @ addore/ 图表

主题中的图表 [`@adecore/ui`](https://adecore.dev/ui/):行,行和列随时间或每个类别而分出,以多系列的传说,热映射,痕量时间和火花线来分出,并有标记和波段,工具提示,传说和数值表. 沿其容器宽度并取用整像素的图表。 它需要一个制表站和一个屏幕阅读器逐桶读取. `d3-scale` 财务报告和审定财务报表 `d3-shape` 做数学.

**[文档](https://adecore.dev/charts/)**

## 安装

```sh
bun add @adecore/charts
```

`@adecore/ui`,反应19, `react-dom`, (中文(简体) ), `i18next` 财务报告和审定财务报表 `react-i18next` 是同伴的依赖关系。 让 Tailwind 扫描旁边的包 `@adecore/ui`,并添加 `charts` 应用程序 i18 的命名空间 :

```css
@import "tailwindcss";
@import "@adecore/ui/theme.css";
@source "../node_modules/@adecore/ui/dist";
@source "../node_modules/@adecore/charts/dist";
```

```ts
import { CHARTS_NAMESPACE, CHARTS_RESOURCES } from '@adecore/charts';

for (const [language, words] of Object.entries(CHARTS_RESOURCES)) {
    i18n.addResourceBundle(language, CHARTS_NAMESPACE, words);
}
```

## 使用

```tsx
import { Chart } from '@adecore/charts';

<Chart.Root data={buckets} x="at" xScale="time" label="Events per hour" height={220}>
    <Chart.Grid />
    <Chart.XAxis />
    <Chart.YAxis />
    <Chart.Area value="errors" label="Errors" tone="error" />
    <Chart.Line value="warnings" label="Warnings" tone="needsYou" />
    <Chart.Tooltip />
    <Chart.Legend />
</Chart.Root>
```

`Timeline` 绘制一行相叠的一行树的痕量的跨度,每行的长度以一轴为一栏:

```tsx
import { Timeline } from '@adecore/charts';

<Timeline.Root data={spans} kinds={kinds} label="Spans of GET /orders">
    <Timeline.Legend />
    <Timeline.Axis heading="Span" />
    <Timeline.Rows />
</Timeline.Root>
```

## 许可证

FSL-1.1-MIT,见 [自由主义](https://npmcn.com/package/%40adecore/charts/LICENSE)。 。 。 .

## 常见问题

### @adecore/charts 是什么？

以@adecore/ui为主题的系列图表,散相,热映射,跟踪时间和火花线,由键盘和屏幕阅读器可读取\.

### 如何安装 @adecore/charts？

在项目目录运行 npm install @adecore/charts，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.3\.0）、i18next（^26\.4\.2）、react-dom（^19\.3\.0）、@adecore/ui（^0\.57\.0）、react-i18next（^17\.0\.15）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @adecore/charts 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @adecore/charts 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @adecore/charts 可以商用吗？

@adecore/charts 使用 FSL-1\.1-MIT 许可。声明的许可为 FSL-1\.1-MIT，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @adecore/charts 的下载量有多少？

根据 npm 官方下载统计，@adecore/charts 在 2026/10/05 – 2026/11/03 这 30 天内被下载 13,877 次，日均约 463 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @adecore/charts 还在维护吗？

最新版本 0\.57\.0 发布于 2026/11/08（今天）；至今共发布 92 个版本，其中过去 12 个月发布了 92 个；首次发布于 2026/10/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。