Angular 中的图表 2+

# 使用Angular中的图表2+创建动态数据可视化

bash
npm install --save ng2-charts chart.js

typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartsModule } from 'ng2-charts';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    
                    [datasets]="lineChartData"
              [labels]="lineChartLabels"
              [options]="lineChartOptions"
              [legend]="lineChartLegend"
              [chartType]="lineChartType">
      
    
  `,
})
export class AppComponent {
  public lineChartData = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
  ];
  public lineChartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  public lineChartOptions: any = {
    responsive: true
  };
  public lineChartLegend = true;
  public lineChartType = 'line';
}

typescript
public lineChartOptions: any = {
  responsive: true,
  scales: {
    x: { beginAtZero: true },
    y: { beginAtZero: true }
  }
};