Question

我正在尝试在Angular 7项目中使用Chart.js。我将chart.js和ng2-chart安装到我的应用程序中。请在下面查看我的代码：

angular.json

"scripts": [
              "./node_modules/chart.js/dist/Chart.min.js",
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/signalr/jquery.signalR.min.js"
            ],

应用模块

import { ChartsModule } from 'ng2-charts';
imports: [
 ...
 ChartsModule
]

component.ts

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

@Component({
  selector: 'app-usage-cpu',
  templateUrl: './usage-cpu.component.html',
  styleUrls: ['./usage-cpu.component.css']
})
export class UsageCpuComponent implements OnInit {

  public pieChartLabels:string[] = ["Pending", "InProgress", "OnHold", "Complete", "Cancelled"];
  public pieChartData:number[] = [21, 39, 10, 14, 16];
  public pieChartType:string = 'pie';
  public pieChartOptions:any = {'backgroundColor': [
               "#FF6384",
            "#4BC0C0",
            "#FFCE56",
            "#E7E9ED",
            "#36A2EB"
            ]}

  constructor() { }

  ngOnInit() {
  }

    // events on slice click
    public chartClicked(e:any):void {
      console.log(e);
    }

   // event on pie chart slice hover
    public chartHovered(e:any):void {
      console.log(e);
    }

}

html

<h2 class="text-center">PIE chart using Chartjs and Angular</h2>
<canvas
  baseChart
  [data]="pieChartData"
  [labels]="pieChartLabels"
  [chartType]="pieChartType"
  [options]="pieChartOptions"
  (chartHover)="chartHovered($event)"
  (chartClick)="chartClicked($event)"
>
</canvas>

使用所有这些代码，都会出现此错误：

> Uncaught TypeError: Object(...) is not a function
>     at ng2-charts.js:230
>     at Module../node_modules/ng2-charts/fesm5/ng2-charts.js (ng2-charts.js:232)
>     at __webpack_require__ (bootstrap:78)
>     at Module../src/app/app.module.ts (app.component.ts:8)
>     at __webpack_require__ (bootstrap:78)
>     at Module../src/main.ts (main.ts:1)
>     at __webpack_require__ (bootstrap:78)
>     at Object.0 (main.ts:12)
>     at __webpack_require__ (bootstrap:78)
>     at checkDeferredModules (bootstrap:45)

能否请您告诉我如何正确执行此操作。谢谢。

Answer 1

在angular.json中删除它：

   "./node_modules/chart.js/dist/Chart.min.js",

Answer 2

我不知道 angular 7 的具体细节，但在 8 中，我能够通过一些导入进行设置。从 npm 安装后，您需要进行一些导入以集成它。您可以在 chartjs 文档页面的迁移部分中找到它，如下所示：

<块引用>

Chart.js 3 是可摇树的。因此，如果您将它用作项目中的 npm 模块并希望使用此功能，则需要导入并注册您想要使用的控制器、元素、比例和插件，以获得所有可用项目的列表。进口见整合。如果通过脚本标签或从自动注册路径作为 npm 模块导入 Chart.js，您将不必调用 register，在这种情况下，您将无法获得摇树的好处。

对我有用的导入是这样的：

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

图表JS无法在Angular 7项目上工作

2 个答案: