如何在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