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