Angular 9-chartjs-plugin-annotation错误

问题描述

我正在尝试在ng2-charts图表上绘制一条垂直线。为了实现此目的，我安装了chartjs-plugin-annotation软件包。不幸的是，它无法正常工作，我无法找出问题所在。

我的配置基本上与the demo here相同。

import { Input } from '@angular/core';
import { Component,OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ChartDataSets,ChartOptions,ChartPoint } from 'chart.js';
import * as annotations from 'chartjs-plugin-annotation';
import { Color,Label } from 'ng2-charts';
import { STO } from 'src/app/models/STO';


    @Component({
      selector: 'app-sto-chart',templateUrl: './sto-chart.component.html',styleUrls: ['./sto-chart.component.css']
    })
    export class StochartComponent implements OnInit {
    
      @input() sto: STO;
      STOs: STO[];
      stochartData = new Array<ChartDataSets>();
      stochartLabels = new Array<Label>();
      // ***** HERE IS THE ISSUE **************************************
      stochartOptions: (ChartOptions & { annotation?: any }) = {
        responsive: true,annotation: {
          annotations: [
            {
              type: 'line',mode: 'vertical',scaleID: 'x-axis-0',value: '2020-10-05',borderColor: 'red',borderWidth: 2,label: {
                content: 'TODAY',enabled: true,position: 'top'
              }
            }
          ]
        }
      }; 
    
      stochartColors: Color[] = [
        {
          borderColor: 'black',},];
      stochartLegend = true;
      stochartType = 'line';
      stochartPlugins = [];
    
      constructor() {}
    
      ngOnInit(): void {
        // *** some code here ***
      } 
    
    }

问题出在 ChartOptions 中：我一直收到此错误：

Type '{ responsive: true; annotation: { annotations: { type: string; mode: string; scaleID: string; value: string; borderColor: string; borderWidth: number; label: { content: string; enabled: boolean; position: string; }; }[]; }; }' is not assignable to type 'ChartOptions & { annotation?: any; }'.
  Type '{ responsive: true; annotation: { annotations: { type: string; mode: string; scaleID: string; value: string; borderColor: string; borderWidth: number; label: { content: string; enabled: boolean; position: string; }; }[]; }; }' is not assignable to type 'ChartOptions'.
    The types of 'annotation.annotations' are incompatible between these types.
      Type '{ type: string; mode: string; scaleID: string; value: string; borderColor: string; borderWidth: number; label: { content: string; enabled: boolean; position: string; }; }[]' is not assignable to type 'Annotationoptions[]'.
        Type '{ type: string; mode: string; scaleID: string; value: string; borderColor: string; borderWidth: number; label: { content: string; enabled: boolean; position: string; }; }' is not assignable to type 'Annotationoptions'.
          Type '{ type: string; mode: string; scaleID: string; value: string; borderColor: string; borderWidth: number; label: { content: string; enabled: boolean; position: string; }; }' is not assignable to type 'LineAnnotationoptions'.
            Types of property 'type' are incompatible.
              Type 'string' is not assignable to type '"line"'.

值得注意的是，import * as annotations from 'chartjs-plugin-annotation';表示已声明'annotations'，但从未读取其值。

解决方法

根据ChartJS文档和Github上的Annotations自述文件，似乎需要将Annotations插件添加到“ ChartOptions”对象内的“ plugins”对象中。

我会尝试这样的事情：

stoChartOptions: (ChartOptions & { annotation?: any }) = {
    responsive: true,plugins: {
       annotation: {
          annotations: [
          {
            type: 'line',mode: 'vertical',scaleID: 'x-axis-0',value: '2020-10-05',borderColor: 'red',borderWidth: 2,label: {
              content: 'TODAY',enabled: true,position: 'top'
            }
          }
        ]
      }
    }
  }; 

此外，您正在将*导入为注释。在这种情况下，可能需要将其更改为注释，因为plugins数组中的第一项是插件的名称。

https://www.chartjs.org/docs/latest/developers/plugins.html

https://github.com/chartjs/chartjs-plugin-annotation#readme

,

我想我已经找出了问题所在。选中我已为此问题提供的the answer。显然，我不是唯一遇到 ng2-charts 问题的人。