# @canvasjs/charts 中文文档

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

版本：3\.17\.9
npm 元数据更新时间：2026-10-26T04:33:25.708Z
中文译文更新时间：2026-11-09T01:28:26.977Z
软件包许可：SEE LICENSE IN \<LICENSE\>

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

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

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

- 包体积（解压后）：546 kB，4 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2023-05-15T13:07:28.274Z
- 最新版本发布：2026-10-26T04:33:25.510Z
- 近 30 天下载量：47316（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：157（近 12 个月 41 个）

## 中文简介

CanvasJS JavaScript 图表 - 官方

## 安装

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

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

## README

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

# CanvasJS JavaScript 图表 - 官方

CanvasJS是一个 [JavaScript 图表库](https://canvasjs.com/javascript-charts/) 为您的网页创建交互式图表。 库支持多种图表类型,包括栏,行,区,派,甜甜圈图等. 图表与React,Angular,jQuery,PHP等所有受欢迎的技术与框架合作.  
  

[![JavaScript Charts](https://canvasjs.com/wp-content/uploads/images/npm/javascript-chart-types.jpg)](https://canvasjs.com/javascript-charts/)  
  

### 浏览器支持

| ![Chrome](https://canvasjs.com/wp-content/uploads/images/browser-icons/chrome.png)  
颜色 | ![Edge](https://canvasjs.com/wp-content/uploads/images/browser-icons/edge.png)  
边缘 | ![Firefox](https://canvasjs.com/wp-content/uploads/images/browser-icons/firefox.png)  
火花 | ![Safari](https://canvasjs.com/wp-content/uploads/images/browser-icons/safari.png)  
萨法里 | ![IE](https://canvasjs.com/wp-content/uploads/images/browser-icons/ie9-11.png)  
IE9 + 软件 | ![IE8](https://canvasjs.com/wp-content/uploads/images/browser-icons/ie8.png)  
综合环境8 |
| :-: | :-: | :-: | :-: | :-: | :-: |
| 4+ | 12+ | 3.6+ | 4+ | 9+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ | 第8条 |

  

## 重要链接

-   [官方网站](https://canvasjs.com/)
-   [JavaScript 图解析](https://canvasjs.com/javascript-charts/)
-   [下载 CanvasJS](https://canvasjs.com/download-html5-charting-graphing-library/)
-   [图表文档](https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/)
-   [CanvasJS 支持论坛](https://canvasjs.com/forums/)  
      
    

## 安装 CavasJS JavaScript 图表

安装CanvasJS JavaScript Charts有多种方法. 您可以直接添加脚本标签以包含从 [CDN或从官方网站下载](https://canvasjs.com/download-html5-charting-graphing-library/) 或从 [国家预防机制登记册](https://npmjs.org/package/@canvasjs/charts)请参考 [文档页面](https://canvasjs.com/docs/charts/intro/installation/) 更多信息.

#### 通过国家预防机制安装图表

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

见 [npm 文档](https://docs.npmjs.com/) 更了解npm的用法. 在CanvasJS脚本被安装后,可以使用AMD,CommonJS等不同的模块格式来导入.

```
//Load CanvasJS Charts
import * as CanvasJS from "@canvasjs/charts";
//var CanvasJS = require("@canvasjs/charts");

//Intantiate Chart
var chart = new CanvasJS.Chart("container", {
    //Chart Options - Check https://canvasjs.com/docs/charts/chart-options/
    title:{
        text: "Basic Column Chart in JavaScript"              
    },
    data: [{
      type: "column",
      dataPoints: [
        { label: "apple",  y: 10  },
        { label: "orange", y: 15  },
        { label: "banana", y: 25  },
        { label: "mango",  y: 30  },
        { label: "grape",  y: 28  }
      ]
    }]
});
//Render Chart
chart.render();
```

  
  
![JavaScript Column Chart](https://canvasjs.com/wp-content/uploads/images/npm/javascript-column-chart.jpg)

#### 通过 CDN 使用 CanvasJS 图表

你可以直接从我们的CDN访问 CanvasJS Charts.

```
<script src="https://cdn.canvasjs.com/ga/canvasjs.min.js"></script>
```

#### 从官方网站下载

您可以下载 JavaScript 图表库以及我们官方提供的例子 [下载页面](https://canvasjs.com/download-html5-charting-graphing-library/)。将其保存在您的工程目录中,并在应用程序中添加.

```
<script src="canvasjs.min.js"></script>
```

  

#### 交互式 Java 脚本图

[![JavaScript Interactive Charts](https://canvasjs.com/wp-content/uploads/images/npm/chart-interactivity.gif)](https://canvasjs.com/javascript-charts/column-line-area-chart/)

  

#### 带有多 Y 轴的 JavaScript 图表

[![JavaScript Chart with Multiple Y-axes](https://canvasjs.com/wp-content/uploads/images/npm/mulitple-y-axes.gif)](https://canvasjs.com/javascript-charts/multiple-axis-column-chart/)

  

#### JavaScript 图表, 有缩放/ 平放

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

  
  

### 相关图表软件包

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

  

## 许可证

CanvasJS的商业用途 图表需要商业许可证。 没有商业许可证,您可以将其用于评估(或示范/测试)目的。 学生、教育机构、使用CanvasJS进行非商业用途的个人网站有资格获得免费许可证。 检查出来 [许可证页](https://canvasjs.com/license/) 更了解执照.

## 常见问题

### @canvasjs/charts 是什么？

CanvasJS JavaScript 图表 - 官方

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

在项目目录运行 npm install @canvasjs/charts，或使用 pnpm add / yarn add / bun add。

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

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

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

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

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

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

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

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

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

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