0
200
VistasEl gráfico circular fácil de Angular 2 no funciona
Estoy tratando de convertir mi gráfico circular jquery existente a Angular 2. Como me resulta difícil reescribir completamente el código completo, estoy tratando de modificarlo en partes.
Ahora, para convertir el código existente, hice esto (anteriormente era HTML interno pero el enlace de eventos no funcionaba en 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>Entonces estoy llamando
$('.chart').easyPieChart({ }) Ahora el problema es que el gráfico circular fácil no toma el valor establecido en data-percent . Por lo tanto, solo muestra un punto.
.
Por ejemplo, aquí ABC debería tomar 10.48 y medir el mismo valor. Además, después de inspeccionar los elementos, vi data-percent="piedata[7]" . Probé muchas combinaciones {{piedata[7]}} pero aún así el valor no se refleja. No estoy seguro de cómo solucionar esto en Angular 2.
3 Respuestas
Responde la pregunta0
Como estoy de buen humor, aquí hay una directiva que puede usar para mostrar pasteles:
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) } }Podrías usarlo así:
<easy-pie-chart [options]="{/*Your options goes here*/}" [percent]="piedata[7]">{{piedata[7]}}</easy-pie-chart>Esto también actualizará el gráfico en vivo si piedata[7] cambió.
Deberá agregar "allowJs": true en las opciones del compilador de tsconfig.json para que funcione
0
Si está utilizando un gráfico circular fácil con ng-2, así es como debería verse su código HTML ->
<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>Y todo el trabajo se realiza en su archivo mecanografiado
Para actualizar el valor, realice los siguientes cambios en su archivo mecanografiado ->
this._percent = value; jQuery('.chart0').data('easyPieChart').update(this._percent);Para profundizar más, se puede encontrar una referencia de trabajo completa en esta plantilla. Eche un vistazo https://github.com/akveo/ngx-admin/blob/ng2-admin/src/app/pages/dashboard/pieChart/pieChart.component.ts
0
Puede vincular atributos no angulares usando esta sintaxis: [attr.data-percent]="piedata[7]"