# @amcharts/amcharts3-react 中文文档

规范地址：https://npmcn.com/package/%40amcharts/amcharts3-react/

版本：3\.1\.1
npm 元数据更新时间：2022-12-31T19:52:50.666Z
中文译文更新时间：2026-11-06T00:14:21.072Z
软件包许可：SEE LICENSE IN LICENSE

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

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

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

- 包体积（解压后）：24.3 kB，5 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：1 个
- peer 依赖：react ^15\.0\.0 \|\| ^16\.0\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0，react-dom ^15\.0\.0 \|\| ^16\.0\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0
- 首次发布：2017-03-31T06:52:37.589Z
- 最新版本发布：2022-12-31T19:52:50.545Z
- 近 30 天下载量：13145（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：16（近 12 个月 0 个）

## 中文简介

如何安装 QQ

## 安装

```sh
npm install @amcharts/amcharts3-react
```

也可以使用：`pnpm add @amcharts/amcharts3-react`、`yarn add @amcharts/amcharts3-react`、`bun add @amcharts/amcharts3-react`

## README

# 如何安装

1.  创建一个 `package.json` 包含 `react`, (中文(简体) ), `react-dom`,以及 `@amcharts/amcharts3-react`数字 :
    
    ```json
    {
      "devDependencies": {
        "react": "^16.0.0",
        "react-dom": "^16.0.0",
        "@amcharts/amcharts3-react": "^3.0.0"
      }
    }
    ```
    
2.  运行 `npm install`
    
3.  使用 `<script>` 在 HTML 文件内加载安图的标记 :
    
    ```html
    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
    <script src="https://www.amcharts.com/lib/3/serial.js"></script>
    <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
    ```
    
4.  如果你使用捆绑器( 如 [网络软件包](https://webpack.js.org/),导入 `@amcharts/amcharts3-react` 插件 :
    
    ```js
    import AmCharts from "@amcharts/amcharts3-react";
    ```
    
    * * *
    
    使用时 `<script>` 标记,包括反应和 `amcharts3-react.js` hTML 中的文件 :
    
    ```html
    <script src="node_modules/react/umd/react.production.min.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.production.min.js"></script>
    <script src="node_modules/create-react-class/create-react-class.min.js"></script>
    <script src="node_modules/@amcharts/amcharts3-react/amcharts3-react.js"></script>
    ```
    

# 如何使用

```js
React.createElement(AmCharts.React, {
  className: "my-class",
  style: {
    width: "100%",
    height: "500px"
  },
  options: {
    "type": "serial",
    "theme": "light",
    "graphs": [...],
    "dataProvider": [...]
  }
})
```

或者如果你使用JSX:

```js
<AmCharts.React
  className="my-class"
  style={{
    width: "100%",
    height: "500px"
  }}
  options={{
    "type": "serial",
    "theme": "light",
    "graphs": [...],
    "dataProvider": [...]
  }} />
```

您也可以单独定义选项对象 :

```js
var config = {
  "type": "serial",
  "theme": "light",
  "graphs": [...],
  "dataProvider": [...]
};

<AmCharts.React options={config} />
```

这个 `options` 属性支持与配置完全相同的 [`AmCharts.makeChart`](https://docs.amcharts.com/3/javascriptcharts/AmCharts#makeChart) 方法,所以所有 [图表演示](https://www.amcharts.com/demos/) 一样的工作.

变动至 `options` 在渲染时自动被检测( 您这样做 ) _没有_ 需要打电话 [`validateNow`](https://docs.amcharts.com/3/javascriptcharts/AmSerialChart#validateNow) 或者说 [`validateData`](https://docs.amcharts.com/3/javascriptcharts/AmSerialChart#validateData)) (中文(简体) ).

此外,此插件自动生成一个 `id`,因此无需指定.

您可以在 `examples` 文件夹.

* * *

如果您想使用插件( 如 [数据加载器](https://github.com/amcharts/dataloader), (中文(简体) ), [导出](https://github.com/amcharts/export), (中文(简体) ), [响应](https://github.com/amcharts/responsive), (中文(简体) ), [动画](https://github.com/amcharts/animate))需要包括适当的 `<script>` 标签.

举个例子 [导出](https://github.com/amcharts/export) 插件 :

```html
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />

<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
```

您可以在 `examples/webpack-export` 文件夹。 它更新了图表 `dataProvider` 每三秒钟.

## 更改日志

### 3.1.1 国家

-   加入支持回放17和回放18.

### 3.1.0 (中文(简体) )

-   正在添加 `className` 为元素指定 CSS 类的属性.

### 3.0.3 信息技术

-   修改版本范围 `react` 财务报告和审定财务报表 `react-dom`

### 3.0.0 (单位:千美元)

-   与其直接通过配置,不如使用新配置通过配置 `options` 属性.
    
-   正在添加 `delay` 用于控制图表延迟的属性.
    

### 2.0.7 国家

-   恢复等待图表初始化的代码 .

### 2.0.6 联合国

-   它现在等待图表在更新之前初始化(这纠正了一些错误).

### 2.0.5 (中文(简体) )

-   恢复2.0.4

### 2.0.4 国家

-   使用 React 修正贬值警告 [(谢谢一泉)](https://github.com/amcharts/amcharts3-react/pull/49)
    
-   在窃听器周围工作 `groupToPeriods`
    

### 2.0.3 联合国

-   正在修复一个 [更新地图时出错](https://github.com/amcharts/amcharts3-react/issues/40)

### 2.0.2 (中文(简体) )

-   正在用 `React.createClass` [(谢谢一泉)](https://github.com/amcharts/amcharts3-react/pull/45)

### 2.0.0 (韩语)

-   主要突破更改: 此插件不再自动导入安图, 所以您必须使用 `<script>` 装入图的标签
    
-   重大突破更改: 您现在必须使用 `AmCharts.React` 而不是说 `AmCharts`
    

### 1.1.8 国家

-   用更新图表数据修复另一个错误

### 1.1.7 联合国

-   修改图表时不缩放的错误 `dataProvider`

### 1.1.6 联合国

-   在第一次更新时修补图表不会正确显示的错误

### 1.1.5 国家

-   修正导致股票图表无法正确更新的错误

### 1.1.4 国家

-   使用折旧 `AmCharts` 用Web包装,取而代之的是使用 `AmCharts.React`
-   在各种全球添加 `AmCharts` web 软件包属性

### 1.1.3 国家

-   修复一个导致 `listeners` 以多次触发

### 1.1.2 国家

-   正在修复一个 [使用时的问题 `amcharts3-react` 在服务器上](https://github.com/amcharts/amcharts3-react/issues/11)

### 1.1.1 (中文(简体) )

-   正在修复一个 [问题 `peerDependencies`](https://github.com/npm/npm/issues/3218)

### 1.1.0 国家

-   添加到 npm / Webpack 的支持中

### 1.0.0 (单位:千美元)

-   初步释放

## 常见问题

### @amcharts/amcharts3-react 是什么？

如何安装 QQ

### 如何安装 @amcharts/amcharts3-react？

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

### @amcharts/amcharts3-react 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/amcharts\_\_amcharts3-react 是否存在。

### @amcharts/amcharts3-react 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @amcharts/amcharts3-react 可以商用吗？

@amcharts/amcharts3-react 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @amcharts/amcharts3-react 的下载量有多少？

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

### @amcharts/amcharts3-react 还在维护吗？

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