Angular 2简单的饼图不起作用

Question

我正在尝试将我现有的jquery easy-pie-chart转换为Angular 2.当我发现很难完全重写整个代码时，我试图修改一点一滴。

现在转换现有代码我已经完成了这个（之前它是内部html但事件绑定在Angular 2中不起作用）。

<div class="col-md-2" style="text-align:center;" *ngFor="let piedata of piemasterData">
    <label (click)="getData(piedata[1])" > {{piedata[1]}} </label>

    <div class="chart" data-percent= piedata[7] >
        <span class="percent">
            {{piedata[7]}}
        </span>
    </div>
    <br/>

</div>

然后我打电话

$('.chart').easyPieChart({

})

现在问题是简单的饼图没有采用data-percent中设置的值。因此它只显示一个点。

。

例如，此处ABC应采用10.48并计算相同的值。在检查元素后，我看到了data-percent="piedata[7]"。我尝试了很多组合{{piedata[7]}}，但价值却没有反映出来。我不知道如何在Angular 2中解决这个问题。

Answer 1

由于我心情很好，这里有一个可以用来显示馅饼的指令：

import { Directive, Input, ElementRef, OnInit } from '@angular/core';
import * as EasyPieChart from '../vendors/easypiechart.min.js'

@Directive({
  selector: 'easy-pie-chart'
})
export class EasyPieChartDirective implements OnInit {

  private pie: any;
  private _percent: number;

  @Input()
  set percent(value) {
    this._percent = value;
    if (this.pie)
      this.pie.update(value);
  };
  get percent() { return this._percent };

  @Input()
  options: any;

  constructor(private element: ElementRef) {
  }

  ngOnInit() {
    this.pie = new EasyPieChart(this.element.nativeElement, this.options);
    this.pie.update(this.percent)
  }
}

您可以像这样使用它：

<easy-pie-chart [options]="{/*Your options goes here*/}" [percent]="piedata[7]">{{piedata[7]}}</easy-pie-chart>

如果piedata [7]发生变化，这也将实时更新图表。

您必须在tsconfig.json的编译器选项中添加"allowJs": true才能使其正常工作

Answer 2

如果您使用带有ng-2的简易饼图 以下是您的HTML代码的外观 - ＆gt;

<div class="pie-chart-item" class="centerthis">
  <div class="chart0" [attr.data-rel]="" data-percent="">
  </div>
<div class="description">
  <div class="description-stats black-text">{{this._percent}}%</div>
  </div>
</div>

所有工作都在你的打字稿文件中完成

要更新值，请在打字稿文件中进行以下更改 - ＆gt;

this._percent = value;
jQuery('.chart0').data('easyPieChart').update(this._percent);

要深入了解，可以在此模板上找到完整的工作参考。 看一看 https://github.com/akveo/ngx-admin/blob/ng2-admin/src/app/pages/dashboard/pieChart/pieChart.component.ts

Answer 3

您可以使用以下语法绑定非Angular属性：[attr.data-percent]="piedata[7]"