javascript - 如何在 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 中包含此插件脚本