# @amcharts/amcharts3-angular 中文文档

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

版本：3\.0\.8
npm 元数据更新时间：2025-12-23T10:37:01.672Z
中文译文更新时间：2026-11-06T00:12:25.079Z
软件包许可：未声明

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

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

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

- 包体积（解压后）：139 kB，16 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/core ^12\.2\.0 \|\| ^13\.0\.0 \|\| ^14\.0\.0 \|\| ^15\.0\.0 \|\| ^16\.0\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0 \|\| ^20\.0\.0 \|\| ^21\.0\.0
- 首次发布：2017-05-19T02:12:19.818Z
- 最新版本发布：2025-12-23T10:37:01.430Z
- 近 30 天下载量：13881（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：26（近 12 个月 1 个）

## 中文简介

Amcharts V3 的官方角 2 插件

## 安装

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

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

## README

Amcharts V3 的官方角插件

# 安装

-   如果您使用角 12 或更高 :
    
    ```
    npm install @amcharts/amcharts3-angular --save
    ```
    
-   如果您使用角5到11:
    
    ```
    npm install @amcharts/amcharts3-angular^2.2.5 --save
    ```
    
-   如果你在使用角2到4:
    
    ```
    npm install @amcharts/amcharts3-angular@^1.5.0 --save
    ```
    

# 如何使用

1.  在你身边 `index.html` 文件,使用 `<script>` 标记 :

```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>
```

如果你使用股票图表,你应该使用这些 `<script>` 标记代替 :

```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/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
```

如果你使用地图,你应该使用这些 `<script>` 标记代替 :

```html
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
```

如果您使用其他图表类型, 您应该更改 `serial.js` 到您使用的图表类型 :

```html
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
```

* * *

2.  在您的应用程序组件中,导入 `AmChartsModule` 模块并添加到 `imports`数字 :

```typescript
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { AmChart, AmChartsService, AmChartsModule } from '@amcharts/amcharts3-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  // Add the import here
  imports: [CommonModule, RouterOutlet, AmChartsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
```

* * *

3.  输入 `AmChartsService` ,创建 `<div>` 元素,带有 `id`,然后使用 `makeChart` 创建图表的方法 :

```html
<div id="chartdiv" [style.width.%]="100" [style.height.px]="500"></div>
```

```typescript
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { AmChart, AmChartsService, AmChartsModule } from '@amcharts/amcharts3-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  // Add the import here
  imports: [CommonModule, RouterOutlet, AmChartsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  private chart: AmChart | undefined;

  // Inject the service here
  constructor(private AmCharts: AmChartsService) {}

  ngAfterViewInit() {
    this.chart = this.AmCharts.makeChart("chartdiv", {
      "type": "serial",
      "theme": "light",
      "dataProvider": []
      ...
    });
  }

  ngOnDestroy() {
    if (this.chart) {
      this.AmCharts.destroyChart(this.chart);
    }
  }
}
```

第一条理由 `makeChart` 一定和我们一样 `<div>`是因为 `id`编辑 `id` 可以是任意的,但如果显示多个图表,每个图表必须有一个不同的 `id`

完成图表后,必须拨打 `destroyChart` 方法。 把这个放进去就好了 `ngOnDestroy` 方法.

* * *

4.  如果您要在图表创建后更改图表, 您必须使用 `updateChart` 方法 :

```typescript
// This must be called when making any changes to the chart
this.AmCharts.updateChart(this.chart, () => {
  // Change whatever properties you want
  this.chart.dataProvider = [];
});
```

* * *

5.  如果您想要添加事件听众, 请使用 `addListener` 方法 :

```typescript
this.AmCharts.addListener(this.chart, "init", (e) => {
  // Do stuff when the event happens
});
```

这个 `addListener` 方法返回一个函数,如果您想要停止对事件的监听,可以调用该函数:

```typescript
const stop = this.AmCharts.addListener(this.chart, "init", (e) => {
  // Do stuff when the event happens
});

// Call the stop function when you want to stop listening to the event
stop();
```

* * *

6.  而不是使用 `AmChartsService` 您可以使用 `<amCharts>` 在模板中标记 :

```typescript
@Component({
  template: `<amCharts id="chartdiv" [options]="options" [style.width.%]="100" [style.height.px]="500"></amCharts>`
})
export class AppComponent {
  public options = {
    "type": "serial",
    "theme": "light",
    "dataProvider": []
    ...
  };
}
```

这比使用 `AmChartsService`,但你不能打电话 `AmCharts` 方法,而且很难改变图表选项,因此对于不改变的图表,它最有效.

* * *

你可以看到一些例子 `examples` 目录.

## 更改日志

### 3.0.8 (简体中文)

-   增加支持角20和21

### 3.0.7 (中文(简体) )

-   添加支持角19

### 3.0.6 (中文(简体) )

-   添加支持角 18

### 3.0.5 (中文(简体) )

-   添加支持角 17

### 3.0.4 (中文(简体) )

-   增加支持角16

### 3.0.3 信息技术

-   添加支持角 15

### 3.0.2 国家

-   添加支持角14

### 3.0.1 (中文(简体) )

-   添加支持角13

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

-   添加支持Angular 12 Ivy

### 2.2.5 国家

-   升级为角 9 - 12

### 2.2.4 国家

-   升级到角 8

### 2.2.3 国家

-   升级到角7

### 2.2.1 联合国

-   正在添加 `StockEvent` 财务报告和审定财务报表 `StockLegend` 动态添加股票事件/列车的构造器.

### 2.2.0 (中文(简体) )

-   正在添加 `StockPanel` 财务报告和审定财务报表 `StockGraph` 动态地添加股票面板/图的构造器.

### 2.1.0 国家

-   正在添加 `addInitHandler`, (中文(简体) ), `addPrefix`, (中文(简体) ), `clear`, (中文(简体) ), `formatDate`, (中文(简体) ), `formatNumber`,以及 `stringToDate` 方法 `AmChartsService`

### 2.0.0 (韩语)

-   升级到角 5
-   删除快速启动种子示例

### 1.5.0 (中文(简体) )

-   正在添加 `addListener` 方法

### 1.4.0 (中文(简体) )

-   取消折旧 `AmChartsDirective`
-   正在添加 `delay` 选项 `AmChartsDirective`

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

-   在所有全球增加 `AmCharts` 属性 `AmChartsService`

### 1.2.1 国家

-   更新到 Angular 编译器的最新版本

### 1.2.0 (中文(简体) )

-   添加支持角4
-   折旧 `<amCharts>` 用于支持新的 `AmChartsService`

### 1.1.0 国家

-   各种修正
-   添加示例

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

-   初步释放

## 常见问题

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

Amcharts V3 的官方角 2 插件

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

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

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

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

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

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

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

@amcharts/amcharts3-angular 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

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

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

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

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