当我导入
ChartDataSets
时,我在 line-chart.component.ts
上收到一条错误消息
'chart.js' has no exported member named 'ChartDataSets'. Did you mean 'ChartDataset'?
不明白问题出在哪里?我忘记安装库了?
我的代码在
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';
}
在
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>
然后
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 { }
我预先感谢您的帮助。
发生这种情况是因为版本不兼容。尝试将
ChartDataSets
更改为 ChartDataSet
。
也尝试安装
npm install @types/chart.js
这是 StackBlitz
的工作示例你还可以看到这个
“ng2-charts”:“^2.4.2”,
"chart.js": "^2.9.3",
安装类型表
npm install @types/chart.js
您需要升级版本:
"chart.js": "^4.0.0",
"react-chartjs-2": "^5.0.0",
打包 JSON 文件。