Angular 11 中 ng2-charts 的注释问题答案

【问题标题】：Annotation problem with ng2-charts in Angular 11Angular 11 中 ng2-charts 的注释问题
【发布时间】：2023-03-21 00:07:01
【问题描述】：

我需要在我的图表中显示一条固定线（如图像中的“测试标签”）：

所以我在我的 Angular 11 项目中添加了 chartjs-plugin-annotation，所以我有这些版本：

"chart.js": "^2.9.3",
"chartjs-plugin-annotation": "^1.0.2",
"ng2-charts": "^2.3.0",

然后我添加了我的选项：

    this.chartOptions = {
      responsive: true,
      scales: {
        xAxes: [{}],
        yAxes: [
          {
            id: 'y-axis-0',
            position: 'left',
          }
        ]
      },
      annotation: {
        annotations: [{
          type: 'line',
          drawTime: 'afterDatasetsDraw',
          id: 'strip-line-1',
          mode: 'horizontal',
          scaleID: 'y-axis-0',
          value: tagvalue,
          borderColor: 'red', // '#feaf00',
          borderWidth: 3
        }]
      }
    };
  }

但是没有显示任何行...所以我发现我必须注册这个，但它不起作用

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

Chart.pluginService.register(ChartAnnotation);

我明白了：

TS2559: Type 'typeof import("C:/.../node_modules/chartjs-plugin-annotation/types/index")' has no properties in common with type 'Plugin'.

这是因为：

这是一个 chartjs-plugin-annotation 错误吗？我需要更改一些依赖项？

【问题讨论】：

标签： angular chart.js ng2-charts angular-chart chartjs-plugin-annotation

【解决方案1】：

如注释插件的documentation 中所述，如果您使用的是chart.js 版本2，则需要使用版本0.5.7

重要提示对于 Chart.js 2.4.0 到 2.9.x 的支持，请使用此插件的 0.5.7 版本 v0.5.7 的文档可以在 GitHub 上找到。

所以你需要删除注解插件并安装较低版本或更新到chart.js 版本3

npm uninstall chartjs-plugin-annotation

npm install chartjs-plugin-annotation@0.5.7

【讨论】：

嗨，感谢您的回复，我放了 v0.5.7 但文档非常不清楚，示例无法正常工作...我正在使用带有 ng2chart 的图表，而不是直接使用 ChartJs.. . 如果我更改注释然后删除 Chart.pluginService.register(ChartAnnotation);正如你所说，我从 TypeScript 选项类型中得到了一个错误，所以我把它作为 ChartAnnotation，但我仍然看不到我的条形图中的线......你有任何关于 ng2chart 和 bar 和这条固定线的工作示例吗？
我可以更改附加库，我只需要以某种方式在我的 ng2chart 中显示该行

【解决方案2】：

解决方法：

按照@LeeLenalee 的建议，npm install chartjs-plugin-annotation@0.5.7 之后：

import * as ChartAnnotation from 'chartjs-plugin-annotation';
import Chart from 'chart.js';




  ngOnInit(): void {
    Chart.pluginService.register(ChartAnnotation);
  }
    
  // ...
  this.myChartOptions = {
    responsive: true,
    scales: {
      xAxes: [{}],
      yAxes: [
        {
          id: 'y-axis-0',
          position: 'left'
        }
      ]
    },
    annotation: {
      annotations: [
        {
          drawTime: 'afterDatasetsDraw',
          id: 'hline',
          type: 'line',
          mode: 'horizontal',
          scaleID: 'y-axis-0',
          value: 50, // My value
          borderColor: 'red',
          borderWidth: 3,
          label: {
             backgroundColor: 'red',
             enabled: true
          }
        }
      ]
    }
  };

如果没有显示线条，您可以更新图表：

  import { BaseChartDirective } from 'ng2-charts';
  // ...

  @ViewChild(BaseChartDirective) chart: BaseChartDirective;

  // ...
  this.chart.update();

【讨论】：