时间戳

首页 > 解决方案 > 如何在 Angular 中使用 chartjs-plugin-annotation

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

问题描述

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

在输入导入语句时：

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


    });

标签： angularchart.js

解决方案

在我将导入语句更改为：

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

并将 scaleID 从 x-axis-0 更改为 x-axis-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,
          }
      ]
  }

推荐阅读