Angular 2 einfach Kreisdiagramm funktioniert nicht

Ich versuche, meine vorhandene jquery easy-pie-Diagramm in Angular 2. Wie ich es schwierig finde, den gesamten Code komplett neu zu schreiben, versuche ich in Bits und Stücken zu ändern.Angular 2 einfach Kreisdiagramm funktioniert nicht

Jetzt, um vorhandenen Code zu konvertieren, habe ich dies getan (früher war es inner-HTML, aber Ereignisbindung funktioniert nicht in 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>

Dann bin ich

Aufruf

$('.chart').easyPieChart({ 

})

Nun das Problem ist das einfach Tortendiagramm nicht den Wert in data-percent gesetzt nimmt. Daher zeigt es nur einen Punkt.

Zum Beispiel sollte hier ABC 10.48 nehmen und den gleichen Wert messen. Weiter nach dem Inspizieren sah ich die data-percent="piedata[7]". Ich habe viele Kombinationen {{piedata[7]}} ausprobiert, aber der Wert spiegelt nicht wider. Ich bin nicht sicher, wie dies zu beheben in Angular 2.em

Quelle

2017-04-03 Dibshare

Da ich in einer guten Stimmung bin, hier ist ein Direktive Sie verwenden können, Torten angezeigt :

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

Man könnte es wie folgt verwenden:

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

Dies wird auch das Diagramm leben aktualisieren, wenn piedata [7] geändert.

Sie haben "allowJs": true in den Compiler-Optionen von tsconfig.json hinzufügen, um es

funktioniert

Quelle

2017-04-03 16:12:54

Vielen Dank endlich hat es funktioniert. – Dibshare

Sie binden nicht-Angular Attribut mit folgenden Syntax: [attr.data-percent]="piedata[7]"

Quelle

2017-04-03 12:03:03

Ja, ich habe es versucht, und jetzt zeigt Wert für "Daten-Prozent". Aber immer noch funktioniert das Messgerät nicht. – Dibshare

Nun, ich denke, dass Ihr Plugin das Attribut liest, bevor es geändert wurde. Vielleicht sollten Sie diese Option von easyPieChart verwenden, um den Prozentsatz zu aktualisieren: '$ ('. Chart'). Data ('easyPieChart'). Update (piedata [7]);' –

Warum '.data ('easyPieChart')' nicht sicher darüber – Dibshare

Wenn Sie einfach Tortendiagramm mit ng-2 Hier verwenden ist, wie Sie Ihre HTML-Code aussehen sollte ->

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

Und die ganze Arbeit ist in Ihrer Typoskript Datei

getan

den Wert zu aktualisieren, die folgenden Änderungen in Ihrer Typoskript-Datei vornehmen ->

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

Um tiefer zu tauchen, kann eine vollständige Arbeitsreferenz auf dieser Vorlage gefunden werden. Schauen Sie https://github.com/akveo/ngx-admin/blob/ng2-admin/src/app/pages/dashboard/pieChart/pieChart.component.ts

Quelle

2017-09-25 05:09:56

Angular 2 einfach Kreisdiagramm funktioniert nicht

Antwort

Verwandte Themen