# @automattic/charts 中文文档

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

版本：4\.15\.1
npm 元数据更新时间：2026-11-06T18:38:53.288Z
中文译文更新时间：2026-11-07T06:53:34.638Z
软件包许可：GPL-2\.0-or-later

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

原始 npm 页面：https://www.npmjs.com/package/%40automattic/charts
原文对照：https://npmcn.com/package/%40automattic/charts/?lang=original
项目主页：https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme
源码仓库：https://github.com/Automattic/charts

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

- 包体积（解压后）：5.2 MB，379 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.11\.0
- 运行依赖：31 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2024-12-20T05:48:27.716Z
- 最新版本发布：2026-11-06T11:23:00.240Z
- 近 30 天下载量：52453（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：150（近 12 个月 85 个）

## 中文简介

在自定义产品中显示图表.

## 安装

```sh
npm install @automattic/charts
```

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

## README

# 自动图

用于在Automattic产品中显示交互式数据可视化的综合图表库. 建于现代图书馆之上 `@visx/xychart` 并设计为无障碍、响应和方便使用.

探索现有图表及其文档 [故事书](https://automattic.github.io/jetpack-storybook/?path=/docs/js-packages-charts-library-introduction--docs)。 。 。 .

## 所需资源

-   **节点.js**页:1
-   **反应**: 18.x或19.x (中文(简体) )

## 快速启动

### 安装

```bash
npm install @automattic/charts
# or
pnpm add @automattic/charts
# or
yarn add @automattic/charts
```

### 导入组件

从主入口导入图表组件 :

```javascript
import { LineChart, BarChart, PieChart } from '@automattic/charts';
import '@automattic/charts/style.css';
```

现代捆绑者树摇未用 JavaScript 自动,所以只将您导入的图表组件包含在您的捆绑中 。 请注意: `style.css` 包括所有图表的样式.

#### 其他条目点

关于公用事业和辅助部件,有单独的切入点:

-   `@automattic/charts/hooks` - 反应钩
-   `@automattic/charts/providers` - 上下文提供者
-   `@automattic/charts/utils` - 共享图表工具功能
-   `@automattic/charts/visx/group` - Visx集团公用事业
-   `@automattic/charts/visx/legend` - 维斯克传说的公用事业
-   `@automattic/charts/visx/text` - Visx文本设施

#### 可用样式导入

-   `@automattic/charts/style.css` - 所有图表样式

### 基本用途示例

```javascript
import React from 'react';
import { LineChart } from '@automattic/charts';
import '@automattic/charts/style.css';

const data = [
    { date: new Date( '2024-01-01' ), value: 10 },
    { date: new Date( '2024-01-02' ), value: 90 }, // Sharp rise
    { date: new Date( '2024-01-03' ), value: 85 }, // Slight decline
    { date: new Date( '2024-01-04' ), value: 82 }, // Gradual decline
    { date: new Date( '2024-01-05' ), value: 5 }, // Sharp drop
    { date: new Date( '2024-01-06' ), value: 8 }, // Slight rise
    { date: new Date( '2024-01-07' ), value: 10 }, // Gradual rise
];

function MyComponent() {
    return <LineChart data={ data } width={ 400 } height={ 300 } />;
}
```

## 在您的 WordPress 插件中使用此软件包

如果您计划在 WordPress 插件中使用此软件包, 我们建议您使用 [自动装载机](https://packagist.org/packages/automattic/jetpack-autoloader) 作为你的自动装载器。 这将允许与其他也使用此软件包的插件实现最大限度的互操作性.

## 捐款

准备好了吗? 看看这个 [Jetpack 贡献指南](https://github.com/Automattic/jetpack/blob/trunk/docs/CONTRIBUTING.md) 编辑 [图表 AI 文档指南](https://github.com/Automattic/jetpack/blob/trunk/projects/js-packages/charts/docs/ai-documentation-guide.md) 关于增加新特点和文件的详细信息.

### 地方发展与故事书

为了在当地运行故事书,从单行本的根部遵循这些步骤:

1.  运行 `pnpm install` 以安装依赖.
2.  运行 `cd projects/js-packages/charts` 以导航图表包.
3.  运行 `pnpm run storybook` 启动故事本服务器.

## 警卫

需要报告安全弱点吗? 转到 [https://automattic.com/security/ (中文(中国大陆) )](https://automattic.com/security/) 或者直接到我们的安全漏洞赏金网站 [https://hackerone.com/自失常症](https://hackerone.com/automattic)。 。 。 .

## 许可证

图表根据 [GNU 通用公共许可证 v2( 或以后)](https://npmcn.com/package/%40automattic/charts/LICENSE.txt)

## 常见问题

### @automattic/charts 是什么？

在自定义产品中显示图表\.

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

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

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

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

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

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @automattic/charts 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.11\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

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

@automattic/charts 使用 GPL-2\.0-or-later 许可。强 Copyleft：分发包含该代码的软件时，整个作品需以兼容的 GPL 许可开源。仅在内部使用、不对外分发时不触发此义务。以上为概括，不构成法律意见，请以许可原文为准。

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

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

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

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