如何用图表和角度制作图表？

Question

我正试着用ChartJS做一个图表，但我找不到.

我已经学习了很多教程，但我总是遇到同样的问题。

这是我的app.module

import { ChartsModule } from 'ng2-charts/ng2-charts';

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

这是我的angular.json

"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/@popperjs/core/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
    "node_modules/apexcharts/dist/apexcharts.min.js"
]

我的component.ts

import { Component, OnInit } from '@angular/core';
import { ChartDataset } from 'chart.js';
import { Color, Label } from 'ng2-charts';

@Component({
  selector: 'app-stadistics',
  templateUrl: './stadistics.component.html',
  styleUrls: ['./stadistics.component.css']
})

export class LineChartComponent {

  lineChartData: ChartDataset[] = [
    { data: [85, 72, 78, 75, 77, 75], label: 'Crude oil prices' },
  ];

  lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June'];

  lineChartOptions = {
    responsive: true,
  };

  lineChartColors: Color[] = [
    {
      borderColor: 'black',
      backgroundColor: 'rgba(255,255,0,0.28)',
    },
  ];

  lineChartLegend = true;
  lineChartPlugins = [];
  lineChartType = 'line';
  
}

export class StadisticsComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

最后，我的html组件，其中我得到了以下错误：

​

​

我不知道会发生什么，但我找不到解决办法.

我怎么才能解决这个问题？

谢谢!

编辑

我分享我的package.json

{
  "name": "foro-front",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.0.9",
    "@angular/common": "~11.0.9",
    "@angular/compiler": "~11.0.9",
    "@angular/core": "~11.0.9",
    "@angular/forms": "~11.0.9",
    "@angular/platform-browser": "~11.0.9",
    "@angular/platform-browser-dynamic": "~11.0.9",
    "@angular/router": "~11.0.9",
    "@popperjs/core": "^2.9.1",
    "apexcharts": "^3.26.0",
    "bootstrap": "^4.5.3",
    "chart.js": "^3.1.0",
    "jquery": "^3.6.0",
    "mdb-ui-kit": "^3.3.0",
    "moment": "^2.29.1",
    "ng-apexcharts": "^1.5.9",
    "ng2-charts": "^2.4.2",
    "ngx-pagination": "^5.0.0",
    "rxjs": "~6.6.0",
    "save": "^2.4.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.7",
    "@angular/cli": "~11.0.7",
    "@angular/compiler-cli": "~11.0.9",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

Answer 1

我认为ng2-charts可能不能很好地使用chart.js版本3.0.0+，尝试安装一个旧版本：npm install chart.js@2.9.4 --save。

此外，我不确定您的html是否添加了baseChart指令(因为图片是用错误剪切的)，它应该如下所示：

<canvas 
  baseChart 
  [datasets]="barChartData" 
  [labels]="barChartLabels" 
  [options]="barChartOptions"
  [legend]="barChartLegend" 
  [chartType]="barChartType">
</canvas>

最后，下面是一个将chart.js添加到应用程序的最小示例- stackblitz

Answer 2

您不能仅仅将数据绑定到画布上并认为它会工作，您要么必须正确地使用裸库，因为我非常确信chart.js没有公开一个名为ChartDatasetsee integration (https://www.chartjs.org/docs/latest/getting-started/integration.html)和use (https://www.chartjs.org/docs/latest/getting-started/usage.html)的导出来入门。

或者，您可以使用角包装器，它只是一个组件，您可以将数据提供给(https://valor-software.com/ng2-charts/)。

Answer 3

npm install ng2-charts

当我们想要安装上面的命令时，只需写-强制 npm install ng2-charts --force 在角13命令提示符转到package.json我的版本号是=“NG2-图表”："^2.4.3"，