[英]D3 Pie in Angular 2?
如何在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, [Validators.required]),
loantenure: new FormControl(null, [Validators.required]),
});
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>₹</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>₹</i>{{emi.toFixed(2)}} / Month</h5>
</div>
<div class= "col-md-4">
<h5><i>₹</i>{{(emi*loantenure-loanamount).toFixed(2)}}</h5>
</div>
<div class= "col-md-4">
<h5><i>₹</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 /
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.