导入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 { }
我预先感谢你的帮助。
2条答案
按热度按时间3zwtqj6y1#
发生这种情况是因为版本不兼容。请尝试将
ChartDataSets
更改为ChartDataSet
。这是StackBlitz上的工作示例
您还可以看到this
juud5qan2#
“ng 2图表”:“^2.4.2”,
"chart.js": "^2.9.3",