1

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

我的配置和这里的demo基本一样。

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

4

2 回答 2

2

根据 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'
            }
          }
        ]
      }
    }
  };

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

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

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

于 2020-10-07T05:40:40.033 回答
0

我想我已经弄清楚了问题所在。检查我提供给这个问题的答案。显然，我不是唯一遇到ng2-charts问题的人。

于 2020-10-07T11:34:03.140 回答