chart.js没有名为“ChartDataSets”的导出成员,您的意思是“ChartDataset”吗?ts(2724)

gblwokeq  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(199)

导入ChartDataSets时,line-chart.component.ts上出现错误消息

  1. 'chart.js' has no exported member named 'ChartDataSets'. Did you mean 'ChartDataset'?

我不明白问题出在哪里?我忘记安装库了?
我的代码在line-chart.component.ts上是这样显示的

  1. import { Component, } from '@angular/core';
  2. import { ChartDataSets, ChartOptions } from 'chart.js';
  3. import { Color, Label } from 'ng2-charts';
  4. @Component({
  5. selector: 'app-line-chart',
  6. templateUrl: './line-chart.component.html',
  7. styleUrls: ['./line-chart.component.css']
  8. })
  9. export class LineChartComponent {
  10. lineChartData: ChartDataSets[] = [
  11. { data: [85, 72, 78, 75, 77, 75], label: 'Crude oil prices' },
  12. ];
  13. lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June'];
  14. lineChartOptions = {
  15. responsive: true,
  16. };
  17. lineChartColors: Color[] = [
  18. {
  19. borderColor: 'black',
  20. backgroundColor: 'rgba(255,255,0,0.28)',
  21. },
  22. ];
  23. lineChartLegend = true;
  24. lineChartPlugins = [];
  25. lineChartType = 'line';
  26. }

line-chart.component.html上,我有以下代码:

  1. <div class="chart-wrapper">
  2. <canvas baseChart
  3. [datasets]="lineChartData"
  4. [labels]="lineChartLabels"
  5. [options]="lineChartOptions"
  6. [colors]="lineChartColors"
  7. [legend]="lineChartLegend"
  8. [chartType]="lineChartType"
  9. [plugins]="lineChartPlugins">
  10. </canvas>
  11. </div>

然后在app.module.ts

  1. import { NgModule } from '@angular/core';
  2. import { BrowserModule } from '@angular/platform-browser';
  3. import { ChartsModule } from 'ng2-charts';
  4. import { AppComponent } from './app.component';
  5. import { LineChartComponent } from './line-chart/line-chart.component';
  6. @NgModule({
  7. declarations: [
  8. AppComponent,
  9. LineChartComponent
  10. ],
  11. imports: [
  12. BrowserModule,
  13. ChartsModule
  14. ],
  15. providers: [],
  16. bootstrap: [AppComponent]
  17. })
  18. export class AppModule { }

我预先感谢你的帮助。

3zwtqj6y

3zwtqj6y1#

发生这种情况是因为版本不兼容。请尝试将ChartDataSets更改为ChartDataSet
这是StackBlitz上的工作示例
您还可以看到this

juud5qan

juud5qan2#

“ng 2图表”:“^2.4.2”,"chart.js": "^2.9.3",

相关问题