时间戳

首页 > 解决方案 > 如何将 Chart.js chartjs-plugin-datalabels npm 包导入 Angular 7 项目

javascript - 如何将 Chart.js chartjs-plugin-datalabels npm 包导入 Angular 7 项目

问题描述

我有一个 Angular 7 (Ionic 4) 项目，我在其中尝试 Chart.js 并且需要能够自定义在饼图上绘制一些标签，正如我在这里所问的那样。

有人告诉我我需要为此使用单独的包，但我无法使用 npm 包为 Angular 项目导入工作。

我有以下版本...

"chart.js": "^2.8.0",
"chartjs-plugin-datalabels": "^0.6.0",
....
"@angular/*": "^7.2.2",
"typescript": "~3.1.6"

我已经按照这里的建议进行了尝试，但出现了两个错误。

首先vscode给出以下错误...

在此处输入图像描述

此外，添加了额外的描述here

在其他地方，据说导入如下..

import 'chartjs-plugin-datalabels';

但是我得到编译错误..

    `[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.`

有谁知道如何让这个工作？

提前致谢！

标签： javascriptangularionic-frameworkchart.js

解决方案

您可以像这样导入指令：

import * as pluginDataLabels from 'chartjs-plugin-datalabels';

您可以ChartOptions像这样使用插件：

chartOptions: ChartOptions = {
  ...
  plugins: {
    pluginDataLabels 
  }

另一种方法是在图表中调用它：

public barChartPlugins = [pluginDataLabels];

你可以在这里看到它。

但是，两种方式都在全局范围内声明它。我能弄清楚在所有图表中都看不到它们的唯一方法是不显示它们。

chartOptions: ChartOptions = {
  ...
  plugins: {
    datalabels: {
      display: false
    }, 
  }

这也解决了@NakulSharma 的问题。您可以在此处查看插件选项。

推荐阅读