ng2-charts 开源项目教程

ng2-charts 开源项目教程

ng2-chartsBeautiful charts for Angular based on Chart.js项目地址:https://gitcode.com/gh_mirrors/ng/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": "

ng2-chartsBeautiful charts for Angular based on Chart.js项目地址:https://gitcode.com/gh_mirrors/ng/ng2-charts