gpt4 book ai didi

Angular 5 和 chart.js ts 错误

转载 作者:搜寻专家 更新时间:2023-10-30 21:48:36 24 4
gpt4 key购买 nike

在 Angular 5 中,我安装了 chartjs 及其类型,如下所示:

yarn 添加 chart.js --保存

yarn 添加@types/chartjs --dev

我有这样的图表,一切看起来都不错,但在终端中我有以下错误..我该如何解决这个问题,谢谢:

我的图表这段代码在 ngAfterinit 中:

import * as Chart from 'chart.js';


new Chart(<HTMLCanvasElement>document.getElementById("user-rev-chart"), {
type: 'horizontalBar',
data: {
labels: ["5 star", "4 start", "3 start", "2 star", "1 star"],
datasets: [
{
fill: true,
label: false,
backgroundColor: ["#a1a7b3", "#a1a7b3", "#a1a7b3", "#a1a7b3", "#a1a7b3"],
data: [10, 2, 5, 4, 5]
}
]
},
options: {
maintainAspectRatio: false,
responsive: false,
legend: {display: false},
title: {
display: false,
text: ''
},
scales:
{
yAxes: [{
// barPercentage: 0.4,
barThickness: 20,
barPercentage: .5,
categoryPercentage: .2,
isFixedWidth: true,
//Number - Pixel width of the bar
barWidth: 20,
gridLines: {
display: false
},
ticks: {
min: 0,
stepSize: 1,
fixedStepSize: 1,
}
}],
xAxes: [{
display: false,
gridLines: {
display: false
},
ticks: {
min: 0,
stepSize: 1,
fixedStepSize: 1,
}
}],
}
}
});

错误:

 ERROR in src/app/components/home/detail/detail.component.ts(253,77): error TS2345: Argument of type '{ type: string; data: { labels: string[]; datasets: { fill: true; label: boolean; backgroundColor...' is not assignable to parameter of type 'ChartConfiguration'.
Types of property 'data' are incompatible.
Type '{ labels: string[]; datasets: { fill: true; label: boolean; backgroundColor: string[]; data: numb...' is not assignable to type 'ChartData'.
Types of property 'datasets' are incompatible.
Type '{ fill: true; label: boolean; backgroundColor: string[]; data: number[]; }[]' is not assignable to type 'ChartDataSets[]'.
Type '{ fill: true; label: boolean; backgroundColor: string[]; data: number[]; }' is not assignable to type 'ChartDataSets'.
Types of property 'label' are incompatible.
Type 'boolean' is not assignable to type 'string'.

最佳答案

尝试 angular2-chartjs这是非常有用的 chartjs Angular 库

npm install angular2-chartjs chart.js --save
npm install @types/chart.js --save

在app.module.ts中导入并声明ChartModule

...
import { ChartModule } from 'angular2-chartjs';

@NgModule({
imports: [..., ChartModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})

AppComponent.ts中声明图表图表、类型、数据、选项属性并在ngOnInit方法中赋值

...
@ViewChild(ChartComponent) chart: ChartComponent;
type;
data;
options;
...

ngOnInit() {

this.type = 'horizontalBar';
this.data = {
labels: ["5 star", "4 start", "3 start", "2 star", "1 star"],
datasets: [
{
fill: true,
label: false,
backgroundColor: ["#a1a7b3", "#a1a7b3", "#a1a7b3", "#a1a7b3", "#a1a7b3"],
data: [10, 2, 5, 4, 5]
}
]
}
this.options = {
maintainAspectRatio: false,
responsive: false,
legend: { display: false },
title: {
display: false,
text: ''
},
scales:
{
yAxes: [{
// barPercentage: 0.4,
barThickness: 20,
barPercentage: .5,
categoryPercentage: .2,
isFixedWidth: true,
//Number - Pixel width of the bar
barWidth: 20,
gridLines: {
display: false
},
ticks: {
min: 0,
stepSize: 1,
fixedStepSize: 1,
}
}],
xAxes: [{
display: false,
gridLines: {
display: false
},
ticks: {
min: 0,
stepSize: 1,
fixedStepSize: 1,
}
}],
}
}
}

AppComponent.html模板中包含chart标签

...
<chart #chart [type]="type" [data]="data" [options]="options" style="height: 100%"></chart>

执行单杠的预览链接 https://stackblitz.com/edit/angular-geq984

关于Angular 5 和 chart.js ts 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50094649/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com