将ng2-charts添加到Angular 7应用程序

Question

我有一个Angular 7应用程序，我想使用ng2-charts来绘制图表。 我的应用程序在GitHub上可用。

我按照安装库的指南进行了操作，该指南在这里提供：

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

我创建了一个组件并添加了以下代码：
模板

    <div style="display: block;" class="chart">
  <canvas baseChart

          [datasets]="labelMFL"
          [labels]="lineChartLabels"
          [options]="lineChartOptions"
          [chartType]="lineChartType"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>
</div>

组件类：

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


@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.less']
})
export class BarChartComponent {

  public SystemName: string = "MF1";
  firstCopy = false;

  // data
  public lineChartData: Array<number> = [ 1,8,49,50,51];

  public labelMFL: Array<any> = [
      { data: this.lineChartData,
        label: this.SystemName
      }
  ];
  // labels
  public lineChartLabels: Array<any> = ["2018-01-29 10:00:00", "2018-01-29 10:27:00", "2018-01-29 10:28:00", "2018-01-29 10:29:00", "2018-01-29 10:30:00" ];

  constructor(  ) { }

  public lineChartOptions: any = {
    responsive: true,
    scales : {
      yAxes: [{
        ticks: {
          max : 60,
          min : 0,
        }
      }],
      xAxes: [{
        min: '2018-01-29 10:08:00', // how to?
      //  max: '2018-01-29 10:48:00', // how to?
        type: 'time',
        time: {
          unit: 'minute',
          unitStepSize: 10,
          displayFormats: {
            'second': 'HH:mm:ss',
            'minute': 'HH:mm:ss',
            'hour': 'HH:mm',
          },
        },
        }],
    },
  };

   _lineChartColors:Array<any> = [{
       backgroundColor: 'red',
        borderColor: 'red',
        pointBackgroundColor: 'red',
        pointBorderColor: 'red',
        pointHoverBackgroundColor: 'red',
        pointHoverBorderColor: 'red'
      }];



  public lineChartType = 'line';

  public chartClicked(e: any): void {
    console.log(e);
  }
  public chartHovered(e: any): void {
    console.log(e);
  }

}

然后我在另一个组件中实例化它：

<app-card title="Graph" showTextContent="false">
          <app-bar-chart></app-bar-chart>
      </app-card>

当我启动应用程序时，出现以下错误： 我认为可能与chart.js有关，但我不确定是否需要在某个地方添加它，比如angular.json文件中。 配置中是否还缺少一些东西？ 库的版本是否存在问题？

- A. Wolf

Answer 1

我遇到了同样的问题。事实证明，系统非常挑剔关于匹配图表包版本的问题。在执行与您相同的安装后，我的package.json文件如下所示：

"chart.js": "^2.8.0",
"core-js": "^2.6.9",
"ng2-charts": "^2.3.0", (or something greater than 2.0.0)

我的Angular模块都是7.2.0。我试图回滚ng2-charts：

npm install ng2-charts@2.0.0

这样就解决了问题。我不得不尝试几个版本。

这个页面很有帮助： https://github.com/valor-software/ng2-charts/issues/750 祝好运！

- jbartas

---

非常感谢！没有你的帮助我完全弄不明白 :) 奇怪的是官方文档或GitHub上没有指出这一点..再次感谢 :) - A. Wolf

谢谢，很高兴能帮到你。我对整个node/angular世界还很陌生，但似乎我的问题有一半都与版本相关。我想这就是我们为了快速开发优秀的免费工具所付出的代价;-) - jbartas

Answer 2

使用ng2-charts在Angular 9/8中绘制图表

完整教程源链接

步骤1）安装ng2-charts

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

步骤2）导入App模块。保留HTML代码，不进行解释。

// app.module.ts
...
...
import { ChartsModule } from 'ng2-charts';

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

第三步）在组件中使用

模板

<div class="chartjs-container">
    <canvas baseChart 
        [datasets]="lineChartData" 
        [labels]="lineChartLabels" 
        [options]="lineChartOptions"
        [colors]="lineChartColors" 
        [legend]="lineChartLegend" 
        [chartType]="lineChartType" 
        [plugins]="lineChartPlugins"
        (chartHover)="chartHovered($event)" 
        (chartClick)="chartClicked($event)">
    </canvas>
</div>

类

// line-chart.component.ts
import { Component } from '@angular/core';
import { ChartDataSets, ChartOptions } from 'chart.js';
import { Color, Label } from 'ng2-charts';

@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent {

  // Array of different segments in chart
  lineChartData: ChartDataSets[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Product A' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Product B' }
  ];

  //Labels shown on the x-axis
  lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

  // Define chart options
  lineChartOptions: ChartOptions = {
    responsive: true
  };

  // Define colors of chart segments
  lineChartColors: Color[] = [

    { // dark grey
      backgroundColor: 'rgba(77,83,96,0.2)',
      borderColor: 'rgba(77,83,96,1)',
    },
    { // red
      backgroundColor: 'rgba(255,0,0,0.3)',
      borderColor: 'red',
    }
  ];

  // Set true to show legends
  lineChartLegend = true;

  // Define type of chart
  lineChartType = 'line';

  lineChartPlugins = [];

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

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

}

- Code Spy