angular - 模块 '"../../@types/chart.js"' 在 chartjs-plugin-annotation 中没有导出成员 'Color'

Question

我必须在角度应用程序中使用 chartjs-plugin-annotation。我已经安装了这个插件，但出现以下错误

扩充中的模块名称无效。模块“chart.js”解析为“/node_modules/chart.js/dist/Chart.js”处的无类型模块，无法扩充

我已经用谷歌搜索了，我可以使用

npm install @types/chart.js

这解决了以前的错误，但会产生新的错误，例如

模块 '"../../@types/chart.js"' 没有导出的成员 'Color'。

模块 '"../../@types/chart.js"' 没有导出的成员 'FontSpec'。

模块 '"../../@types/chart.js"' 没有导出的成员 'Plugin'。

我在这里做错了什么？

我的代码是

import { Component, OnInit } from '@angular/core';
import { Chart, ChartOptions} from 'chart.js';

import annotationPlugin from 'chartjs-plugin-annotation';

@Component({
  selector: 'app-financial-chart',
  templateUrl: './financial-chart.component.html',
  styleUrls: ['./financial-chart.component.css']
})
export class FinancialChartComponent implements OnInit {
  Linechart = [];
  constructor() { }

  ngOnInit() {
    
    Chart.plugins.register(annotationPlugin);
    
    
        const config = {
            type: 'line',
            data: {
              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
              datasets: [{
                label: 'My First Dataset',
                data: [65, 59, 80, 81, 56, 55, 40],
                fill: false,
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1
              }]
            },
            options: {
              plugins: {
                autocolors: false,
                annotation: {
                  annotations: {
                    box1: {
                      // Indicates the type of annotation
                      type: 'box',
                      xMin: 1,
                      xMax: 2,
                      yMin: 50,
                      yMax: 70,
                      backgroundColor: 'rgba(255, 99, 132, 0.25)'
                    }
                  }
                }
              }
            }
          };
    
    
this.Linechart.push( new Chart('canvas',config));

  }

}

我的 package.json 在下面

标签： angulartypescriptchart.js