ng2-charts 开源项目教程
1. 项目的目录结构及介绍
ng2-charts 是一个基于 Angular 的图表库,它利用 Chart.js 来创建各种图表。项目的目录结构如下:
ng2-charts/
├── src/
│ ├── lib/
│ │ ├── charts/
│ │ ├── directives/
│ │ ├── index.ts
│ │ └── types.ts
│ ├── schematics/
│ │ ├── collection.json
│ │ └── ng-add/
│ ├── public-api.ts
│ ├── index.ts
│ └── package.json
├── angular.json
├── package.json
├── tsconfig.json
└── README.md
目录结构介绍
src/lib/
:包含库的核心代码。charts/
:包含图表组件的实现。directives/
:包含图表指令的实现。index.ts
:库的入口文件。types.ts
:类型定义文件。
src/schematics/
:包含 Angular schematics 的实现,用于项目初始化和添加。collection.json
:schematics 的配置文件。ng-add/
:ng add 命令的实现。
public-api.ts
:库的公共 API 入口。index.ts
:项目的入口文件。package.json
:项目的依赖和脚本配置。angular.json
:Angular 项目的配置文件。tsconfig.json
:TypeScript 的配置文件。README.md
:项目的说明文档。
2. 项目的启动文件介绍
ng2-charts 的启动文件主要是 src/public-api.ts
,这个文件导出了库的所有公共 API,使得其他项目可以导入和使用这些 API。
/* src/public-api.ts */
/* Directives */
export * from './lib/directives/base-chart.directive';
/* Services */
export * from './lib/services/charts-manager.service';
/* Types */
export * from './lib/types';
3. 项目的配置文件介绍
angular.json
angular.json
是 Angular 项目的配置文件,包含了项目的构建、测试和运行等配置。
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ng2-charts": {
"projectType": "library",
"root": "projects/ng2-charts",
"sourceRoot": "projects/ng2-charts/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"project": "projects/ng2-charts/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/ng2-charts/tsconfig.lib.prod.json"
},
"development": {
"tsConfig": "projects/ng2-charts/tsconfig.lib.json"
}
},
"defaultConfiguration": "production"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/ng2-charts/src/test.ts",
"tsConfig": "projects/ng2-charts/tsconfig.spec.json",
"karmaConfig": "projects/ng2-charts/karma.conf.js"
}
}
}
}
}
}
package.json
package.json
包含了项目的依赖、脚本和其他元数据。
{
"name": "ng2-charts",
"version": "6.0.1",
"description": "Reactive, responsive, beautiful charts for Angular2+ based on Chart.js",
"author": "Valor Software",
"license": "