npm 包 ng4-charts 使用教程

ng4-charts 是一个基于 Chart.js 的可复用 Angular 组件库，用于在 Angular 应用程序中快速创建美观的图表和可视化效果。本教程将介绍如何安装和使用 ng4-charts。

安装 ng4-charts

安装 ng4-charts 可以使用 npm 包管理器：

npm install ng2-charts chart.js --save

导入模块

要使用 ng4-charts，需要在 app.module.ts 中导入它：

// www.javascriptcn.com code example
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { ChartsModule } from 'ng4-charts';

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

创建图表组件

在创建组件前，需要在组件中引入图表类型及其数据：

// www.javascriptcn.com code example
import { Component } from '@angular/core';
import { ChartType } from 'ng4-charts';
import { ChartDataSets, ChartOptions } from 'chart.js';

@Component({
  selector: 'app-chart',
  template: `
    <div style="display: block">
      <canvas baseChart
              [datasets]="lineChartData"
              [labels]="lineChartLabels"
              [options]="lineChartOptions"
              [colors]="lineChartColors"
              [legend]="lineChartLegend"
              [chartType]="lineChartType"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)"></canvas>
    </div>
  `
})
export class ChartComponent {
  public lineChartData: ChartDataSets[] = [
    { data: [85, 72, 78, 75, 77, 75], label: '数据1' },
    { data: [75, 92, 88, 85, 87, 85], label: '数据2' }
  ];
  public lineChartLabels: string[] = ['一月', '二月', '三月', '四月', '五月', '六月'];
  public lineChartOptions: (ChartOptions & { annotation: any }) = {
    responsive: true,
    scales: {
      // 纵坐标最小值为0
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };
  public lineChartColors: Array<any> = [
    { // 红
      backgroundColor: 'rgba(255,99,132,0.2)',
      borderColor: 'rgba(255,99,132,1)',
      pointBackgroundColor: 'rgba(255,99,132,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(255,99,132,0.8)'
    },
    { // 蓝
      backgroundColor: 'rgba(46, 204, 113,0.2)',
      borderColor: 'rgba(46, 204, 113,1)',
      pointBackgroundColor: 'rgba(46, 204, 113,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(46, 204, 113,0.8)'
    }
  ];
  public lineChartLegend = true;
  public lineChartType: ChartType = 'line';

  public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void {
    console.log(event, active);
  }

  public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void {
    console.log(event, active);
  }
}

显示图表

要在模板中显示图表，只需将组件放在 app.component.html 中：

// www.javascriptcn.com code example
import { Component } from '@angular/core';
import { ChartType } from 'ng4-charts';
import { ChartDataSets, ChartOptions } from 'chart.js';

@Component({
  selector: 'app-root',
  template: `
    <h1> ng4-Charts Demo </h1>
    <app-chart></app-chart>
  `
})
export class AppComponent { }

现在，您可以运行您的 Angular 应用程序，并在浏览器中看到一个带有标签的折线图。

总结

以上是一个简单的使用 ng4-charts 创建图表的教程。这样的组件库可以大幅提高开发效率，节省大量开发时间。希望这个教程对初学者有所帮助。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6005700981e8991b448e7cb2