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

Question

我有一个Angular 7（离子4）项目，在这里我尝试Chart.js，并且需要能够自定义在饼图上绘制一些标签，就像我问过here一样。

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

我有以下版本...

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

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

第一个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.`

有人对如何使它正常工作有任何想法吗？

谢谢！

Answer 1

您可以这样导入指令：

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

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

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

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

public barChartPlugins = [pluginDataLabels];

您可以看到here完成了。

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

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

这也解决了@NakulSharma遇到的问题。您可以看到插件选项here。