如何在Angular 4上使用带有ChartJS的插件

Question

我正在尝试使用PieceLabel插件来显示图形内部的标签，但它不起作用。 图形显示正常，这是我的代码：

TS

import * as Chart from 'chart.js'
import * as ChartPiece from 'chart.piecelabel.js'

ngAfterViewInit() {
  this.canvas2 = document.getElementById('myChartPie');
  this.ctx2 = this.canvas2.getContext('2d');
  let myChartPie = new Chart(this.ctx2, {
    type: 'pie',
    data: {
        labels: ["one", "two", "three", "four"],
        datasets: [{
            label: '# of Score',
            data: [11,21,31,41],
            backgroundColor: [
                'red',
                'blue',
                'orange',
                'green'
            ]
        }]
    },
    options: {
            responsive: false,
      display:true,
      pieceLabel: {
    mode: 'value'
  }
    }
  });
}

我用npm install --save安装了Chart.js和Chart.piecelabel.js。 我试着将它添加到.angular-cli.json文件中，但似乎没有任何效果：

"scripts": [
        "../node_modules/chart.piecelabel.js/build/Chart.PieceLabel.min.js"
      ]

HTML

<canvas id="myChartPie" width="650px"></canvas>

看起来我的PieceLabel.min.js没有被调用/识别，我不知道为什么

Answer 1

这是因为， Chart.PieceLabel.js插件没有任何导出的成员（既没有命名也没有默认 ）。 它只是将自己注册到Chart.js插件服务中。

所以，你的import语句应该是：

import 'chart.piecelabel.js';

代替 ：

import * as ChartPiece from 'chart.piecelabel.js'

旁注： 您不需要在angular-cli.json包含此插件脚本

Answer 2

从组件中删除导入“chart.piecelabel.js”，并在ng2-charts之后将其添加到app.module.ts中，如下所示：

import { ChartsModule } from "ng2-charts";
import "chart.piecelabel.js";