类型 'string' 不可分配给类型 'ChartType'
Type 'string' is not assignable to type 'ChartType'
html 文件
<div style="width: 100%; display: block">
<canvas
*ngIf="loaded"
baseChart
[data]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
>
</canvas>
</div>
ts.file
barChartOptions: any = {
scaleShowVerticalLines: false,
responsive: true
};
barChartLabels: string[] =[];
barChartType: string = 'horizontalBar';
barChartLegend: boolean = true;
barChartData: any[] =[];
loaded = false;
this.service.Salescount(form).subscribe((data) => {
this.name = data.result;
this.barChartLabels = this.name.map((item) => item.name);
this.barChartData = this.name.map((item) => item.sales);
this.loaded = true;
})
barchart.labels 和 barchartdata 中有 4 个值。虽然 运行 我收到错误消息,因为“类型 'string' 不可分配给类型 'ChartType'”
而且我还在 app.module.ts
中导入了 ChartModules
也许如果您将 Char Type 数据类型更改为任意?
将您的 barChartType
类型从 string
更改为 ChartType
并从 chart.js 导入它。
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
public barChartType: ChartType = 'bar';
演示:https://stackblitz.com/edit/ng2-charts-bar-template?file=src%2Fapp%2Fapp.component.ts
html 文件
<div style="width: 100%; display: block">
<canvas
*ngIf="loaded"
baseChart
[data]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
>
</canvas>
</div>
ts.file
barChartOptions: any = {
scaleShowVerticalLines: false,
responsive: true
};
barChartLabels: string[] =[];
barChartType: string = 'horizontalBar';
barChartLegend: boolean = true;
barChartData: any[] =[];
loaded = false;
this.service.Salescount(form).subscribe((data) => {
this.name = data.result;
this.barChartLabels = this.name.map((item) => item.name);
this.barChartData = this.name.map((item) => item.sales);
this.loaded = true;
})
barchart.labels 和 barchartdata 中有 4 个值。虽然 运行 我收到错误消息,因为“类型 'string' 不可分配给类型 'ChartType'”
而且我还在 app.module.ts
中导入了 ChartModules也许如果您将 Char Type 数据类型更改为任意?
将您的 barChartType
类型从 string
更改为 ChartType
并从 chart.js 导入它。
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
public barChartType: ChartType = 'bar';
演示:https://stackblitz.com/edit/ng2-charts-bar-template?file=src%2Fapp%2Fapp.component.ts