角9-图表-插件-注释错误

Question

我正试图在我的ng2-charts图表上画一条垂直线。为了实现这一点，我安装了chartjs-plugin-annotation包。不幸的是，它不起作用，我不知道出了什么问题。

我的配置基本上与这里的演示相同。

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';说“注释”是声明的，但它的值从未被读取过。

Answer 1

根据ChartJS文档和Github上的注释ReadMe，看起来注释插件需要添加到"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'
            }
          }
        ]
      }
    }
  }; 

此外，您还导入了*作为注释。在此上下文中，这可能需要更改为注释，因为插件数组中的第一项是插件的名称。

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

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

Answer 2

我想我已经知道问题出在哪里了。检查一下我为这个问题提供的答案。显然，我不是唯一一个在NG2图表上有这个问题的人。