Question

我试图使用PieceLabel插件来显示图形内的标签，但它不起作用。图形显示正常，这是我的代码：

TS

// the frame A - Frame B translation and Rotation
Eigen::Vector3f trans = Eigen::Vector3f(xt,yt,zt);
Eigen::Quaternionf quat = Eigen::Quaternionf (xr,yr,zr,wr);
quat.normalize();
Eigen::Transform<float,3,Eigen::Affine> static_transform = Eigen::Translation<float,3>(trans) * quat;
// this the point in the frame A
Eigen::Vector3f newPoint (xp,yp,zp);

我使用npm install --save安装了Chart.js和Chart.piecelabel.js。我试图将它添加到.angular-cli.json文件中，但它似乎没有任何效果：

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

HTML

"scripts": [
        "../node_modules/chart.piecelabel.js/build/Chart.PieceLabel.min.js"
      ]

看起来我的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-chart之后的app.module.ts中，如下所示：

import { ChartsModule } from "ng2-charts";
import "chart.piecelabel.js";

如何在Angular 4上使用带有ChartJS的插件

2 个答案: