如何在Angular中使用chartjs-plugin-annotation

Question

我在Angular项目中的版本是："chart.js"："^2.9.2"，"chartjs-plugin-annotation"："^0.5.7"，

在键入import语句时：

import * as ChartAnnotation from 'chartjs-plugin-annotation';

我把这个放在它上面

Could not find a declaration file for module 'chartjs-plugin-annotation'. 'c:/XRay/xray/node_modules/chartjs-plugin-annotation/src/index.js' implicitly has an 'any' type.
  Try `npm install @types/chartjs-plugin-annotation` if it exists or add a new declaration (.d.ts) file containing `declare module 'chartjs-plugin-annotation';`ts(7016)

我正试着用这个在我的散点图上画一条线

this.scatterChart = new Chart('myChart', {

        type: 'scatter',
        //plugins: [ChartAnnotation],
        data: {
            datasets: [{
                label: 'Scatter Dataset',
                pointBackgroundColor: ['yellow', 'blue', 'red', 'green', 'orange', 'indigo'],

                data: [
                  { x: -10, y: 0 }, 
                    { x: 0, y: 10 }, 
                    { x: 3, y: 8 }, 
                    { x: 1, y: 4 }, 
                    { x: 9, y: 1 }, 
                    { x: -1, y: 5 }
                ]
            }]
        },
        options: {
          legend: {
            display: false
          },

            scales: {
                xAxes: [{
                    type: 'linear',
                    position: 'bottom'
                }]
            },
            annotation:{
              drawTime: 'afterDatasetsDraw',
              annotations:[{
              type: 'line',
              id: 'vline',
              mode: 'horizontal',
              yscaleID: 'y-axis-0',
              value: 5,
              borderColor: 'green',
              borderWidth: 1,
              label: {
                enabled: false,
                content: 'Test label'
              }
            }]
          }
        } as ChartOptions


    });

Answer 1

在我将import语句更改为：

var ChartAnnotation=require('chartjs-plugin-annotation');

并将scaleID从x轴0更改为x轴1：

annotation: {
      annotations: [
          {
              type: 'line',
              mode: 'vertical',
              scaleID: 'x-axis-1',
              value: avgXValue,
              borderColor: 'red',
              borderWidth: 2,
          },
          {
            type: 'line',
              mode: 'horizontal',
              scaleID: 'y-axis-1',
              value: avgYValue,
              borderColor: 'red',
              borderWidth: 2,
          }
      ]
  }