Chart.js 没有名为“ChartDataSets”的导出成员。您指的是“ChartDataset”吗?TS(2724)

Ali*_*son 11 typescript chart.js angular

当我导入时,ChartDataSets我收到一条错误消息line-chart.component.ts

'chart.js' has no exported member named 'ChartDataSets'. Did you mean 'ChartDataset'?
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

我不明白问题出在哪里?我忘记安装库了?

我的代码是这样呈现的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 {

  lineChartData: ChartDataSets[] = [
    { 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';
  
}
Run Code Online (Sandbox Code Playgroud)

我有line-chart.component.html这个:

<div class="chart-wrapper">
    <canvas baseChart 
        [datasets]="lineChartData" 
        [labels]="lineChartLabels" 
        [options]="lineChartOptions"
        [colors]="lineChartColors" 
        [legend]="lineChartLegend" 
        [chartType]="lineChartType" 
        [plugins]="lineChartPlugins">
    </canvas>
</div>
Run Code Online (Sandbox Code Playgroud)

然后在app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartsModule } from 'ng2-charts';

import { AppComponent } from './app.component';
import { LineChartComponent } from './line-chart/line-chart.component';

@NgModule({
  declarations: [
    AppComponent,
    LineChartComponent
  ],
  imports: [
    BrowserModule,
    ChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Run Code Online (Sandbox Code Playgroud)

我预先感谢您的帮助。

Ali*_*adi 6

发生这种情况是因为版本不兼容。尝试更改ChartDataSetsChartDataSet.

也尝试安装npm install @types/chart.js

这是StackBlitz的工作示例

你也可以看到这个

  • 我设法解决了从“ChartDataSets”切换到“ChartDataset”的问题 (4认同)
  • 谢谢阿里雷扎。我将使用你的图表。有关信息:“ChartDataSets”至“ChartDataSet”。不要改变任何东西。 (3认同)

Raj*_*nga 2

安装类型图表

npm install @types/chart.js
Run Code Online (Sandbox Code Playgroud)