角饼2中的D3 Pie？

发布时间：2020-12-17 07:16:26 所属栏目：安全来源：网络整理

导读：如何在Angular 2中创建d3饼图如果我想计算EMI.我已经为EMI计算创建了应用程序.现在我想显示关于计算的PIE图表这是emi.component.ts import { Component } from '@angular/core';import { FormGroup,FormControl,Validators } from '@angular/forms'import *

如何在Angular 2中创建d3饼图如果我想计算EMI.我已经为EMI计算创建了应用程序.现在我想显示关于计算的PIE图表

这是emi.component.ts

import { Component } from '@angular/core';
import { FormGroup,FormControl,Validators } from '@angular/forms'
import * as D3 from 'd3';


@Component({
    selector: 'emi-app',templateUrl: 'app/emi/emi.component.html',styleUrls:['app/emi/emi.component.css']
})
export class EmiComponent  { 
    loanamount:number
    interestrate:number
    loantenure:number
    emi:number
    newemi:number


    emiForm = new FormGroup({
        loanamount: new FormControl(null,[Validators.required]),interestrate: new FormControl(null,loantenure: new FormControl(null,});

    calculateEmi() {

        if(this.loanamount && this.interestrate && this.loantenure) {
            let interestPerMonth = this.interestrate/12/100;
            let numerator = Math.pow((1+interestPerMonth),this.loantenure);
            let denominator = numerator - 1;
            this.emi = ((this.loanamount * interestPerMonth) * 
            numerator/denominator);
            var newemi = this.emi.toFixed(2) ;
            console.log(newemi);
          }
        var pie = new d3pie()


    }
}

这是emi.component.html

<div class="container">
    <h1> EMI Calculator</h1>

  <form [formGroup]="emiForm" name="calc">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group currency">
                <!--<label>Loan Amount:</label><i>&#x20b9;</i>
                <input type= "number" class = "form-control" formControlName = 
    "loanamount" [(ngModel)]="loanamount">  
        </div>

        <div class="form-group ">
            <label>Intrest Rate:</label>
            <i>%</i><input type="number" class="form-control" formControlName="interestrate"  [(ngModel)]="interestrate">
        </div>

        <div class="form-group ">
            <label>Loan Tenure:</label>
            <input type="number" class="form-control" formControlName="loantenure"  [(ngModel)]="loantenure">
        </div>
        <button (click)="calculateEmi()" class="btn btn-primary">Submit</button>
     </div>
     <div class="col-md-8">
        <div id="pieChart"></div>
     </div>
     </div>
    </form>

    <hr/>
        <div class="row" *ngIf="emi">
            <div class= "col-md-4"> 
                <h5>EMI</h5>
            </div>
            <div class= "col-md-4"> 
                   <h5>Total Payable Interest</h5>      
            </div>
            <div class= "col-md-4"> 
                    <h5>Total Payment(Principal amount + Interest)</h5>     
            </div>
        </div>
        <div class="row" *ngIf="emi">
            <div class= "col-md-4">
                <h5><i>&#x20b9;</i>{{emi.toFixed(2)}} / Month</h5>
            </div>
            <div class= "col-md-4">
                <h5><i>&#x20b9;</i>{{(emi*loantenure-loanamount).toFixed(2)}}</h5>
            </div>
            <div class= "col-md-4">
                <h5><i>&#x20b9;</i>{{(emi*loantenure).toFixed(2)}}</h5>
            </div>  
        </div>

    </div>

现在我是Angular 2和d3的新手所以如果有人能够帮助我,我会很高兴

解决方法

您应该使用Angular的生命周期钩子,以便OnInit可以调用calculateEmi().在那一刻,您设置所需的所有值.
然后构建实现AfterContentInit的D3饼图.

检查https://angular.io/guide/lifecycle-hooks
和http://www.palador.com/2017/02/28/create-a-pie-chart-with-dynamic-data-using-d3-js-angular-2/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!