如何添加Chart.js类型定义?

Question

我有一个chart组件来创建新的图表:

import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
import Chart, { ChartConfiguration } from 'chart.js/auto';
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.scss']
})
export class ChartComponent implements AfterViewInit {
@ViewChild('chart') chartEl: ElementRef<HTMLCanvasElement>
@Input() chart: any;
constructor() { }
ngAfterViewInit(): void {
new Chart(this.chartEl.nativeElement, this.createChartConfig(this.chart))
}
private createChartConfig(chart): ChartConfiguration<"line">{
return {
type: chart?.type,
data: chart?.data,
options: chart?.options,
}
}
}

我想用一个类型来定义我的@Input() chart: any;，而不是任何类型。我已经安装了类型定义，虽然我不确定它是否需要在chart.js v3:

"chart.js": "^3.8.0",
"@types/chart.js": "^2.9.37",

最后我有一个图表数据集:

export const charts: Array<any> = [
{
type: 'line',
data: {
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
},
{
label: 'My Second dataset',
backgroundColor: 'rgb(123, 24, 201)',
borderColor: 'rgb(100, 99, 132)',
data: [5, 60, 15, 8, 20, 45, 45],
}
]
},
},
{
type: 'bar',
data: {
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
],
datasets: [
{
label: 'Dataset 1',
data: [5, 60, 15, 8, 20, 45],
backgroundColor: 'red',
},
{
label: 'Dataset 2',
data: [2, 30, 215, 18, 33, 90],
backgroundColor: 'green'
},
{
label: 'Dataset 3',
data: [3, 0, 25, 23, 25, 95],
backgroundColor: 'purple',
},
]
},
options: {
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
},
]

Answer 1

也许我已经找到了答案:

// chart component
import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
import Chart, { ChartConfiguration, ChartItem } from 'chart.js/auto';
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.scss']
})
export class ChartComponent implements AfterViewInit {
@ViewChild('chart') chartEl: ElementRef<ChartItem>
@Input() chart: ChartConfiguration;
ngAfterViewInit(): void {
new Chart(this.chartEl.nativeElement, {...this.chart})
}
}

// chart data set
import { ChartConfiguration } from "chart.js";
export const charts: Array<ChartConfiguration> = [
{
type: 'line',
data: {
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
},
{
label: 'My Second dataset',
backgroundColor: 'rgb(123, 24, 201)',
borderColor: 'rgb(100, 99, 132)',
data: [5, 60, 15, 8, 20, 45, 45],
}
]
},
},
{
type: 'bar',
data: {
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
],
datasets: [
{
label: 'Dataset 1',
data: [5, 60, 15, 8, 20, 45],
backgroundColor: 'red',
},
{
label: 'Dataset 2',
data: [2, 30, 215, 18, 33, 90],
backgroundColor: 'green'
},
{
label: 'Dataset 3',
data: [3, 0, 25, 23, 25, 95],
backgroundColor: 'purple',
},
]
},
options: {
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
},
]