如何在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這個插件腳本