# @adobe/react-spectrum-charts 中文文档

规范地址：https://npmcn.com/package/%40adobe/react-spectrum-charts/

版本：1\.53\.1
npm 元数据更新时间：2026-10-23T20:47:36.112Z
中文译文更新时间：2026-11-06T09:12:30.788Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40adobe/react-spectrum-charts
原文对照：https://npmcn.com/package/%40adobe/react-spectrum-charts/?lang=original
项目主页：https://github.com/adobe/react-spectrum-charts#readme
源码仓库：https://github.com/adobe/react-spectrum-charts

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

- 包体积（解压后）：529 kB，343 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：11 个
- peer 依赖：vega ^6\.2\.0，react \>= 17\.0\.2，react-dom \>= 17\.0\.2，vega-lite ^6\.4\.2，@adobe/react-spectrum \>=3\.23\.0
- 首次发布：2023-10-05T19:40:03.213Z
- 最新版本发布：2026-10-23T20:47:35.732Z
- 近 30 天下载量：3642（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：111（近 12 个月 39 个）

## 中文简介

React中用于编译Spectrum可视化的宣告库.

## 安装

```sh
npm install @adobe/react-spectrum-charts
```

也可以使用：`pnpm add @adobe/react-spectrum-charts`、`yarn add @adobe/react-spectrum-charts`、`bun add @adobe/react-spectrum-charts`

## README

# 反应光谱图

 [![npm](https://img.shields.io/npm/v/@adobe/react-spectrum-charts.svg?style=flat-square)](https://www.npmjs.com/package/@adobe/react-spectrum-charts)[![npm](https://img.shields.io/npm/dt/@adobe/react-spectrum-charts?style=flat-square) ](https://www.npmjs.com/package/@adobe/react-spectrum-charts)[![](https://img.shields.io/github/contributors/adobe/react-spectrum-charts)](https://github.com/adobe/react-spectrum-charts/graphs/contributors)

![Scatter plot of penguin bill dimensions by species and body mass](https://github.com/adobe/react-spectrum-charts/wiki/images/penguins.png)

## 文档

[反应光谱图](https://opensource.adobe.com/react-spectrum-charts/docs)

## 目录

-   [反应光谱图](https://npmcn.com/package/%40adobe/react-spectrum-charts/#readme-react-spectrum-charts)
    -   [目录](https://npmcn.com/package/%40adobe/react-spectrum-charts/#readme-table-of-contents)
    -   [概览](https://npmcn.com/package/%40adobe/react-spectrum-charts/#readme-overview)
        -   [关键特性 :](https://npmcn.com/package/%40adobe/react-spectrum-charts/#readme-key-features)
    -   [安装](https://npmcn.com/package/%40adobe/react-spectrum-charts/#readme-installation)
        -   [无](https://npmcn.com/package/%40adobe/react-spectrum-charts/#readme-npm)
        -   [线条](https://npmcn.com/package/%40adobe/react-spectrum-charts/#readme-yarn)
    -   [使用量](https://npmcn.com/package/%40adobe/react-spectrum-charts/#readme-usage)
        -   [示例](https://npmcn.com/package/%40adobe/react-spectrum-charts/#readme-example)
    -   [光谱( Adobe 设计系统) 集成](https://npmcn.com/package/%40adobe/react-spectrum-charts/#readme-spectrum-adobe-design-system-integration)
    -   [API 密码](https://npmcn.com/package/%40adobe/react-spectrum-charts/#readme-api)
    -   [故事书](https://npmcn.com/package/%40adobe/react-spectrum-charts/#readme-storybook)
    -   [支助](https://npmcn.com/package/%40adobe/react-spectrum-charts/#readme-support)
    -   [捐款](https://npmcn.com/package/%40adobe/react-spectrum-charts/#readme-contributing)
    -   [许可证](https://npmcn.com/package/%40adobe/react-spectrum-charts/#readme-license)
        -   [Apache 许可证 2.0 摘要](https://npmcn.com/package/%40adobe/react-spectrum-charts/#readme-apache-license-20-summary)
    -   [路线图](https://npmcn.com/package/%40adobe/react-spectrum-charts/#readme-roadmap)

## 概览

`react-spectrum-charts` 是一个用于在React中编译图表的宣示性图表库。 它使你能够按照Adobe的设计系统,不费力地绘制视觉惊艳的图表([光谱](https://spectrum.adobe.com/)) 有最小代码. 不需要了解图形的语法或D3或Vega等下层库.

### 关键特性 :

-   **直观**:开发者经验在API设计中居于首位. 声明式API取消了理解高级数据可视化概念的需要. 密码读起来就像你会向别人解释图表一样.
    
-   **可配置**:基于组件的构件使您能够构建解决您的使用大小写的图表。 模块化设计使得用简单易懂的代码来作曲复杂的可视化.
    
-   **证明**:利用光谱[Adobe 光谱设计系统](https://spectrum.adobe.com/))你得到美丽的图表 支持的研究,用户测试,和行业最佳做法.
    
-   **国际**: 支持 30+ 日期/ 数字 地块, 以便用户能够以预期的格式查看数据 .
    

## 安装

#### 无

```bash
npm install @adobe/react-spectrum-charts @adobe/react-spectrum vega vega-lite
```

#### 线条

```bash
yarn add @adobe/react-spectrum-charts @adobe/react-spectrum vega vega-lite
```

## 使用量

`react-spectrum-charts` 其设计方式使图表的编组与JSX中的任何其他应用内容的编组类似.

每个图表都被包裹在 `<Chart/>` 组件。 儿童部件及其道具控制图表的内容.

### 示例

```ts
import React from 'react';
import {Axis, Bar, Legend, Chart} from '@adobe/react-spectrum-charts';

const MyChart: FC<MyChartProps> = (props) => {
    ...

    return (
        <Chart data={myChartData}>
            <Axis position="bottom" />
            <Axis position="left" />
            <Bar type="stacked" color="series" />
            <Legend />
        </Chart>
    )
}
```

## 光谱( Adobe 设计系统) 集成

Adobe的设计系统有绘制基本图的详细指南,图的颜色选择以及主图组件的设计指南.

`react-spectrum-charts` 执行本准则时的反应.

-   [基本要素](https://spectrum.adobe.com/page/data-visualization-fundamentals/)
-   [颜色](https://spectrum.adobe.com/page/color-for-data-visualization/)
-   构成部分
    -   [区域](https://spectrum.adobe.com/page/area-chart/)
    -   [栏](https://spectrum.adobe.com/page/bar-chart/)
    -   [线条](https://spectrum.adobe.com/page/line-chart/)

## API 密码

[API 文档](https://github.com/adobe/react-spectrum-charts/wiki)

## 故事书

这个图书馆有一大堆 [故事书](http://opensource.adobe.com/react-spectrum-charts/) 每一个组件和大多数道具都有故事 您可以使用故事书中的控制标签来更改组件道具并查看这如何实时地改变图表.

还可以通过选择"Docs"分页来查看任何故事的源代码,向想要的故事滚动并再选择"显示代码". 这有利于在故事书中看到任何故事的完整API.

"故事本"可能包含自每次向主推而被重建后尚未发行的组件或道具,而不仅仅是npm发行后.

## 支助

遇到任何问题、有问题或需要援助的人 **反应-光谱-图**,获得支持的方法有几种:

1.  **文档**: 检查 [正式文件](https://github.com/adobe/react-spectrum-charts/wiki) 例如,API文档和开发者文件.
    
2.  **GitHub 问题**: 如果您认为您已识别出一个错误或有特性请求或有一般反馈, 请审查列表 [未决问题](https://github.com/adobe/react-spectrum-charts/issues) 以查看是否有其他人已经提交了一个类似问题,您可以加入。 如果不存在问题,请使用正确的模板提交新问题([创建一个新问题](https://github.com/adobe/react-spectrum-charts/issues/new/choose)) (中文(简体) ).
    

请在寻求支持时尊重并体谅. 在报告问题时尽可能提供背景,并遵循GitHub问题一节所指明的任何准则或模板。 你的反馈和贡献受到高度重视.

## 捐款

[贡献准则](https://npmcn.com/package/%40adobe/react-spectrum-charts/CONTRIBUTING.md)

## 许可证

**反应-光谱-图** 是在“软件”下发布的开源软件 [Apache 许可证 2.0](https://www.apache.org/licenses/LICENSE-2.0)您可以在 [自由主义](https://npmcn.com/package/%40adobe/react-spectrum-charts/LICENSE) 包含在工程中的文件 .

### Apache 许可证 2.0 摘要

-   **权限**: 您获得使用、修改、分发和分版软件的广泛许可。 可以作商业用途.
    
-   **条件**:您必须包含原始版权通知和免责声明. 您无法使用项目的商标, 但没有适当的归属 .
    
-   **限制**:许可证不是保证书,软件是"照样"提供的. 项目的出资人不承担任何损失.
    
-   **更多信息**:关于Apache许可证2.0的完整而详细的解释,请参见: [正式许可证文件](https://www.apache.org/licenses/LICENSE-2.0)。 。 。 .
    

通过使用 **反应-光谱-图**,你同意遵守 Apache 许可证2.0的条款和条件.

请审查 [自由主义](https://npmcn.com/package/%40adobe/react-spectrum-charts/LICENSE) 证书的完整文本.

## 路线图

Github项目跟踪了该项目的路线图。 你一定是Adobe Org的成员 看路线图.

[路线图](https://github.com/orgs/adobe/projects/46)

## 常见问题

### @adobe/react-spectrum-charts 是什么？

React中用于编译Spectrum可视化的宣告库\.

### 如何安装 @adobe/react-spectrum-charts？

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

### @adobe/react-spectrum-charts 支持 TypeScript 吗？

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

### @adobe/react-spectrum-charts 支持 ESM 还是 CommonJS？

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

### @adobe/react-spectrum-charts 可以商用吗？

@adobe/react-spectrum-charts 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @adobe/react-spectrum-charts 的下载量有多少？

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

### @adobe/react-spectrum-charts 还在维护吗？

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