Angular中使用Chart.js和ng2-charts绘制图表教程

Angular 集成 Chart.js 与 ng2-charts 概述

Chart.js 是一款广受欢迎的 JavaScript 图表库，而 ng2-charts 则是专为 Angular 2 及以上版本设计的封装库，旨在简化 Chart.js 在 Angular 项目中的集成过程。接下来我们将探讨其基本使用方法。

安装与配置

安装

首先，需要在项目中安装 Chart.js 和 ng2-charts 依赖包：


# Yarn:
$ yarn add ng2-charts chart.js

# or npm 
$ npm install ng2-charts charts.js --save

如果你使用的是基于 Angular CLI 构建的项目，也可以通过修改 .angular-cli.json 配置文件来添加 Chart.js，从而将其与应用程序绑定：


//: .angular-cli.json (partial)
"script": [
 "../node_modules/chart.js/dist/Chart.min.js"
]

接下来，你需要在 app 模块或功能模块中导入 ng2-charts 提供的 ChartsModule：


//: app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartsModule } from '@angular/charts';

import { AppComponent } from './app.component';

@NgModule({
 declarations: [ AppComponent ],
 imports: [
  BrowserModule,
  ChartsModule
 ],
 providers: [],
 bootstrap: [ AppComponent ]
})
export class AppModule {}

基础图表组件使用

使用

ng2-charts 提供了一个名为 baseChart 的指令，可直接应用于 HTML 的 canvas 元素。以下示例展示了用于配置的输入选项以及该指令触发的 chartClick 事件：


//: app.component.html

<div style="width: 40%;">
 <canvas
   baseChart
   [chartType]="'line'"
   [datasets]="chartData"
   [labels]="chartLabels"
   [options]="chartOptions"
   [legend]="true"
   (chartClick)="onChartClick($event)">
 </canvas>
</div>

此时，组件类的代码结构如下所示：


//: app.component.ts

import { Component } from '@angular/core';

@Component({ ... })
export class AppComponent {
 chartOptions = {
  responsive: true
 };

 chartData = [
  { data: [330, 600, 260, 700], label: 'Account A' },
  { data: [120, 455, 100, 340], label: 'Account B' },
  { data: [45, 67, 800, 500], label: 'Account C' }
 ];

 chartLabels = ['January', 'February', 'Mars', 'April'];

 onChartClick(event) {
  console.log(event);
 }
}

图表配置选项详解

选项

以下是 ng2-charts 支持的各种可选输入属性：

chartType

用于设置图表的基本类型，可选值包括 pie、doughnut、bar、line、polarArea、radar 或 horizontalBar。

legend

这是一个布尔值，用于控制是否在图表上方显示图例。

datasets

这是一个对象数组，每个对象包含数据数组以及对应数据集的标签。

data

如果图表结构较为简单，仅包含单个数据集，你可以直接使用 data 属性代替 datasets。

labels

用于定义 X 轴上的标签集合。

options

这是一个包含图表配置选项的对象。有关可用选项的详细信息，请参考官方 Chart.js 文档。

在上述示例中，我们将图表配置为自适应模式，使其能够根据视口大小自动调整尺寸。

colors

虽然上述示例中未展示，但你可以通过传入包含特定值的对象字面量数组来定义自定义颜色：


myColors = [
 {
  backgroundColor: 'rgba(103, 58, 183, .1)',
  borderColor: 'rgb(103, 58, 183)',
  pointBackgroundColor: 'rgb(103, 58, 183)',
  pointBorderColor: '#fff',
  pointHoverBackgroundColor: '#fff',
  pointHoverBorderColor: 'rgba(103, 58, 183, .8)'
 },
 // ...colors for additional data sets
];

使用自定义颜色时，必须为每个数据集提供一个对应的颜色对象字面量。

事件处理机制

事件

ng2-charts 发出两个主要事件：chartClick 和 chartHover，允许开发者对与图表的用户交互做出响应。这两个事件的数据中会返回当前活动的点和标签信息。

动态更新数据集

Chart.js 的一大优势在于，图表可以轻松地通过动态更新或响应后端及用户输入的数据进行实时调整。

在下面的示例中，我们添加了一个新的数据点，代表 5 月份的数据：


//: app.component.ts(partial)

newDataPoint(dataArr = [100, 100, 100], label) {

 this.chartData.forEach((dataset, index) => {
  this.chartData[index] = Object.assign({}, this.chartData[index], {
   data: [...this.chartData[index].data, dataArr[index]]
  });
 });

 this.chartLabels = [...this.chartLabels, label];

}

该功能可以像这样被调用：


//: app.component.html(partial)

<button (click)="newDataPoint([900, 50, 300], 'May')">
 Add data point
</button>

你可能已经注意到，我们并没有直接修改图表的数据集，而是返回了一个包含先前数据和新数据的新对象。使用 Object.assign 可以方便地实现这一操作。

在这个特定的示例中，如果未提供参数，我们为 3 个数据集设定了默认值为 100。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

Angular 集成 Chart.js 与 ng2-charts 完整指南