角度2の簡単な円グラフが機能しない

Question

私は、既存のjqueryの簡単な円グラフを角度2に変換しようとしています。コード全体を完全に書き換えるのが難しいことが分かりましたので、少しずつ修正しようとしています。

私はこれを行っています（以前はinner-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]}}しかし、まだ値が反映されていません。私はあなたがこの構文を使用して非角度属性をバインドできアンギュラ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) 
    } 
} 

あなたはこのようにそれを使用することができます。piedata場合、これはまた、ライブチャートを更新します

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

[7]に変更。

あなたはNG-2 ここにあなたのHTMLコードは次のようになります方法ですと簡単な円グラフを使用している場合、それは

Answer 2

でこれを修正する方法がわからないです：私は良い気分でいるので[attr.data-percent]="piedata[7]"

Answer 3

を動作させるためにtsconfig.jsonのコンパイラオプションで"allowJs": trueを追加する必要があります - > >

-

<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> 

そして、すべての作業

は

あなたtypescriptファイルに以下の変更を行い、値を更新するには、あなたのtypescriptファイルで行われます

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

深くダイビングするには、このテンプレートで完全な作業参照を見つけることができます。 見てください