Angular 2简单的饼图不工作

问题描述：

我想将现有的jQuery容易饼图转换为Angular 2.由于我发现很难完全重写整个代码，因此我试图修改一些代码段。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]}}但仍然没有反映价值。我不知道如何解决这个角2

答

因为我心情很好，这里是你可以用它来显示馅饼指令：

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使其如果您正在使用易饼图与NG-2 这是你的HTML代码应该怎么看起来像工作

非常感谢，它终于奏效了。 – Dibshare

答

您可以使用此语法结合非角属性：[attr.data-percent]="piedata[7]"

是的我试过了，现在值显示为'data-percent'。但仍然没有工作。 – Dibshare

嗯，我认为你的插件在角度改变之前正在读取属性。 Mayby你应该使用easyPieChart这个选项来更新百分比：'$（'。chart'）。data（'easyPieChart'）。update（piedata [7]）;' –

为什么'.data（'easyPieChart'）'不是肯定有关 – Dibshare

答

- >

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

而且所有的工作都在您的打字稿文件中完成

要更新的价值，使你的打字稿文件中的以下变化 - >

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

Angular 2简单的饼图不工作

相关推荐