# @canvasjs/angular-charts 中文文档

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

版本：1\.2\.0
npm 元数据更新时间：2024-03-05T11:29:30.228Z
中文译文更新时间：2026-11-09T01:30:29.920Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40canvasjs/angular-charts
原文对照：https://npmcn.com/package/%40canvasjs/angular-charts/?lang=original
项目主页：https://canvasjs.com/angular-charts/

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

- 包体积（解压后）：53.2 kB，15 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/common \>=12\.0\.0，@angular/core \>=12\.0\.0，@canvasjs/charts ^3\.7\.5
- 首次发布：2023-05-22T12:40:43.307Z
- 最新版本发布：2024-03-05T11:29:29.817Z
- 近 30 天下载量：9768（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：10（近 12 个月 0 个）

## 中文简介

CanvasJS 角图 - 官方

## 安装

```sh
npm install @canvasjs/angular-charts
```

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

## README

[![CanvasJS](https://canvasjs.com/wp-content/uploads/images/logo/canvasjs-logo-240x100.png)](https://www.npmjs.com/~canvasjs)

# CanvasJS 角图 - 官方

彩相画 [角图](https://canvasjs.com/angular-charts/) 为您的网页创建交互式图表的组件。 图书馆支持多种图表类型,包括栏,行,区,派,甜甜圈等.

  
[![CanvasJS Angular Charts](https://canvasjs.com/wp-content/uploads/images/npm/angular/angular-charts.jpg)](https://canvasjs.com/angular-charts/)  

## 重要链接

-   [官方网站](https://canvasjs.com/)
-   [角图](https://canvasjs.com/angular-charts/)
-   [下载 CanvasJS](https://canvasjs.com/download-html5-charting-graphing-library/)
-   [角图集成](https://canvasjs.com/docs/charts/integration/angular/)
-   [图表文档](https://canvasjs.com/docs/charts/chart-options/)
-   [CanvasJS 支持论坛](https://canvasjs.com/forums/)

## 安装 CanvasJS 角图

在您的 Angular app 中安装 CanvasJS 角图包

```
npm install @canvasjs/angular-charts
```

见 [npm 文档](https://docs.npmjs.com/) 更了解npm的用法.

##### 导入角图模块并注册它

将 Angular 图表模块导入您的 Angular 应用程序( app. community. ts) 并注册它 .

```
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, CanvasJSAngularStockChartsModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }
```

##### 设置图表选项创建图表( C)

在 app. 组件. ts 中设置图表选项并使用“ canvasjs- chart” 选择器在 app. 组件中创建图表 。 (简体中文)

```
//app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, CanvasJSAngularStockChartsModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
    chartOptions = {
      title: {
          text: "Basic Column Chart in Angular"
      },
      data: [{
        type: "column",
        dataPoints: [
        { label: "Apple",  y: 10  },
        { label: "Orange", y: 15  },
        { label: "Banana", y: 25  },
        { label: "Mango",  y: 30  },
        { label: "Grape",  y: 28  }
        ]
      }]                
    };
}
  
  
//app.component.html
<div>
    <canvasjs-chart [options]="chartOptions"></canvasjs-chart>
</div>
```

  

[![Angular Column Chart](https://canvasjs.com/wp-content/uploads/images/npm/angular/angular-column-chart.png)](https://canvasjs.com/angular-charts/column-with-numeric-axis/)

  

#### 角同步图

[![Angular Synchronized Charts](https://canvasjs.com/wp-content/uploads/images/npm/angular/angular-synchronized-charts.gif)](https://canvasjs.com/angular-charts/synchronized-chart/)

  

#### 动画图表

[![Angular Animated Pie Chart](https://canvasjs.com/wp-content/uploads/images/npm/angular/angular-animated-pie-chart.gif)](https://canvasjs.com/angular-charts/chart-with-animation/)

  

#### 带有缩放/平面的角图

[![Angular Chart with Zooming / Panning](https://canvasjs.com/wp-content/uploads/images/npm/angular/angular-charts-zoom-pan.gif)](https://canvasjs.com/angular-charts/chart-zoom-pan/)

  

### 相关图表软件包

-   [Java 脚本图](https://www.npmjs.com/package/@canvasjs/charts)
-   [反应图表](https://www.npmjs.com/package/@canvasjs/react-charts)
-   [Vue 图表](https://www.npmjs.com/package/@canvasjs/vue-charts)
-   [j 查询图表](https://www.npmjs.com/package/@canvasjs/jquery-charts)

## 常见问题

### @canvasjs/angular-charts 是什么？

CanvasJS 角图 - 官方

### 如何安装 @canvasjs/angular-charts？

在项目目录运行 npm install @canvasjs/angular-charts，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/common（\>=12\.0\.0）、@angular/core（\>=12\.0\.0）、@canvasjs/charts（^3\.7\.5）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @canvasjs/angular-charts 支持 TypeScript 吗？

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

### @canvasjs/angular-charts 支持 ESM 还是 CommonJS？

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

### @canvasjs/angular-charts 可以商用吗？

@canvasjs/angular-charts 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @canvasjs/angular-charts 的下载量有多少？

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

### @canvasjs/angular-charts 还在维护吗？

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