如何在Angular 4上使用ChartJS插件4

Question

我试图使用PieceLabel插件来显示图形内的标签，但它不工作。该图形显示OK，这里是我的代码：

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' 
    } 
    } 
    }); 
} 

我安装了chart.js之和Chart.piecelabel.js与故宫安装--save。我尝试添加到.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这个插件脚本