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

Question

我有一个 Angular 7 应用程序，我想使用 ng2-charts绘制图表。我的申请可用here on GitHub .

我按照指南安装了可用的库 here :

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文件。
我在配置中遗漏了什么吗？
库的版本有问题吗？

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

祝你好运!