logo标签列表

Angular 2中的D3饼图？

angulard3.jsd3pie.js
7

如果我想计算 EMI，怎样在 Angular 2 中创建 d3 饼状图呢？我已经为 EMI 计算创建了应用程序。现在，我想展示关于计算的饼状图。

这是 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>&#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，如果有人能够帮我解决问题，我会非常感激。

{btsdaf} - Sangwin Gawande
1
{btsdaf} - Martino Bordin
1个回答
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接