如何在Angular 4上通过ChartJS使用Addon

古斯塔沃

我正在尝试使用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没有被调用/识别,我不确定为什么

ɢʀᴜɴᴛ

这是因为,Chart.PieceLabel.jsplugin没有任何导出的成员(既不是named也不是default)。它只是将自己注册到Chart.js插件服务中。

因此,您的import陈述应为:

import 'chart.piecelabel.js';

代替 :

import * as ChartPiece from 'chart.piecelabel.js'

旁注: 您无需在此插件脚本中angular-cli.json

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章