angular 5 chart.js 数据标签插件答案

【问题标题】：angular 5 chart.js datalabels pluginangular 5 chart.js 数据标签插件
【发布时间】：2022-02-10 20:20:48
【问题描述】：

我在让数据标签插件在我的 Angular 5 应用程序中与我的图表一起正常工作时遇到问题。

图表按预期显示，但插件未创建任何标签。也没有生成控制台错误，这看起来很奇怪。

我的导入部分如下所示：

import {Chart} from 'chart.js';
import 'chartjs-plugin-datalabels';

我的图表创建部分如下所示：

ngAfterViewInit() {
    this.canvas = document.getElementById(this.chartID);
    this.canvas.height = this.graphHeight;
    this.ctx = this.canvas.getContext('2d');


    this.myChart = new Chart(this.ctx, {
      type: 'horizontalBar',
      data: {
          labels: this.chartLabels,
          datasets: [{
              label: 'Percentage',
              data: this.chartValues,
              borderWidth: 1,
              backgroundColor: '#a32d31',
              datalabels: {
                align: 'end',
                anchor: 'start'
              }
          }]
      },
      options: {
        legend: {
          display: false
        },
        maintainAspectRatio: false,
        plugins: {
          datalabels: {
            color: 'white',
            font: {
              weight: 'bold'
            },
            formatter: Math.round
          }
        }
      }
    });

  }

在某些时候是否需要一个单独的步骤来注册插件（提供的示例没有显示）。有什么想法或建议可以让它工作吗？图表本身看起来不错，只是插件输出不存在。

【问题讨论】：

标签： javascript chart.js angular5

【解决方案1】：

通过

安装chartjs-plugin-datalabel

npm install chartjs-plugin-datalabels --save

然后在组件中导入同样的内容

import ChartDataLabels from 'chartjs-plugin-datalabels';

并添加

labels:[]
..
datasets[]
..
plugin:[ChartDataLabels]

这对我有用。希望它会起作用。

【讨论】：

你添加了@types/chart.js 吗？？
是的，它也对我有用。非常感谢你。但是，我遇到的问题是我有多个图表，我只想在选定的图表中显示标签。但它显示在所有图表中。

【解决方案2】：

我知道这与 OP 遇到的问题并不完全相同，但 我在 Angular CLI 正确编译代码时遇到了一些麻烦。

angular.json:

{
  "projects": {
    "myProject": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js"`

创建index.d.ts 包含内容的文件：

declare module 'chartjs-plugin-datalabels'

导入如下：

import ChartDataLabels from 'chartjs-plugin-datalabels';

【讨论】：

我也遇到了 Angular 7 的问题...即我得到[ng] ERROR in node_modules/chartjs-plugin-datalabels/types/index.d.ts(5,16): error TS2665: Invalid module name in augmentation. Module 'chart.js' resolves to an untyped module at 'D:/dev/ionic/chartjstest/node_modules/chart.js/dist/Chart.js', which cannot be augmented. （所以我不知道这对其他人是否有用？？）。在您的指示中，where do you put the index.d.ts`?

【解决方案3】：

希望这对其他人有所帮助：

错误是轴最小值未默认为零的结果。一旦将其应用于轴，所有功能都按预期进行。

【讨论】：

【解决方案4】：

好的，我正在使用带有 chart.js v 3.7 和 chartjs-plugin-datalabels v 2 的 Angular V13。我费了很大劲才让事情正常进行。问题不是错误，而是标签没有出现。原来我必须将 .default 添加到插件引用中：

public chartPlugins = [pluginDataLabels.default];

现在您可以将此 chartPlugins 变量绑定到画布：

 <canvas baseChart
 [data]="lineChartData"
 [options]="lineChartOptions"
 [type]="lineChartType"
 [plugins]="chartPlugins"
 (chartHover)="chartHovered($event)"
 (chartClick)="chartClicked($event)"></canvas>

然后它就起作用了！

【讨论】：