我有一个用于创建新图表的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
              }
            }
        }
    },
]