无法使用Ionic 3和nvd3绘制图形

Question

我试图在Ionic 3中绘制条形图。我从我操纵的Rest API中获取数据
并使用它来绘制图形。我面临的问题是我无法使用数据绘制图形。 代码是这样的。我附上了该图的图像。它应该针对四所不同的大学进行绘图，但只显示其中一所。

import { Component,OnInit, ViewEncapsulation,ViewChild,NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA,Injectable } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { DatabaseProvider } from '../../providers/database/database';
import { HttpClient } from '@angular/common/http';
import { Chart } from 'chart.js';
import { NvD3Module } from 'ngx-nvd3';
import { BehaviorSubject } from "rxjs/BehaviorSubject";
declare let d3: any;
/**
 * Generated class for the ReportsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-reports',
  templateUrl: 'reports.html',
})
export class ReportsPage {
  
  @ViewChild('barCanvas') barCanvas;
 // @ViewChild('barCanvas') barCanvas1;
  @ViewChild('barCanvas') barCanvas2;
  barChart : any;
  barChart1: any;
  barChart2 : any;
  public itemList : Array<Object>;
  public newArrayObj : Array<Object>;
  subscription :any = [] ;
  studentid: any;
  emailid: any;
  reports : any;
  subscriptions: any = [];
  subscriptionsValue:any = [];
  notedownloadskey: any = [];
  noteviews: any = [];
  subscriptionkeys: any = [];
  noteviewskey: any = [];
  noteviewsvalue: any = [];
  reports1: any;
  options:any;
  data:any;
  newSubscriptionData: any = [];
  newSubscriptionDataKey : any = [];
  newSubscriptionDataValue : any = [];
  newArray : any = [];
  dataArray: any = [];
  newValue : string;
  constructor(public navCtrl: NavController, public navParams: NavParams,public database: DatabaseProvider,public http: HttpClient) {
    this.itemList = [];
    this.newArrayObj = [];
    this.studentid = '';
    this.emailid = '';
    this.reports = '';
    this.data = [];
    this.reports1 = '';
    this.newArray = '';
    this.newSubscriptionData = [] ;
 //   this.dataArray = [12.11,23.45,56.72,82.2];
    this.newValue = '';
    this.newSubscriptionDataKey = [] ;
    this.newSubscriptionDataValue = [] ;
   // this.notedownloads = '';
   // this.noteviews = '';  
    this.subscription ='' ;
   // this.subscriptionsValue = '';
  }
  
  ionViewDidLoad() {
  console.log('ionViewDidLoad ReportsPage');
  console.log(this.newSubscriptionData + 'abc' );
  // load 
  }
  
  ngOnInit() {
    // data 
  //  console.log(typeof this.subscription);
    console.log(this.newSubscriptionDataKey)
    console.log(typeof this.newSubscriptionDataValue);
    var result = this.dataArray.map(Number);
    console.log(parseFloat(result));
    
    this.database.getEmail().then((result) => {
      this.itemList = <Array<Object>> result;
      this.studentid = this.itemList[0]["Student_id"];
      this.emailid = this.itemList[0]["Email_id"];
      this.http.post('http://services.notnul.com/NoteService.svc/GetReportsForAuthors',{
          Student_ID: this.studentid,
          Email_Address : this.emailid
      }).subscribe(res => {
        this.subscription = res;
        console.log(this.subscription + 'first1')
        JSON.parse(this.subscription)
        this.subscription = JSON.parse(this.subscription);
    //    console.log(this.subscription.SubscriptionData)
         this.newSubscriptionData = this.subscription.SubscriptionData;
         this.newSubscriptionData.forEach(element => {
           this.newSubscriptionDataKey.push(element.Key)
           console.log(element.Key);
         });
         this.newSubscriptionData.forEach(element => {
           this.newSubscriptionDataValue.push(element.Value)
           console.log(element.Value)
         });
  //       this.newSubscriptionData = JSON.parse(this.newSubscriptionData)
        console.log(this.newSubscriptionData)
        this.newArray = Array.from(this.subscription.SubscriptionData);
        this.newArrayObj = <Array<Object>> this.newArray;
     //   console.log(this.newArrayObj);
     //   console.log(this.newArray);
     //   console.log(this.newSubscriptionData[0].Value)
     //   console.log(this.newSubscriptionData[0].Key)
     
        this.newValue = this.newSubscriptionDataValue.toString()
       // this.newSubscriptionDataValue = JSON.parse(this.newSubscriptionDataValue);

        // graph starts

        this.options = {
          chart: {
            type: 'discreteBarChart',
            height: 450,
            margin : {
              top: 20,
              right: 20,
              bottom: 50,
              left: 55
            },
            x: function(d){return d.label;},
            y: function(d){return d.value;},
          //  showValues: true,
            valueFormat: function(d){
              return d3.format(',.4f')(d);
            },
            duration: 100,
            xAxis: {
              axisLabel: 'University',
            //  axisLabelDistance: -10
            },
            yAxis: {
              axisLabel: '%',
              axisLabelDistance: -10
            }
          }
        }
        //
        //data for graph
        this.data = [{
          values : [{
            "label" : this.newSubscriptionDataKey,
            "value" : parseInt(this.newSubscriptionDataValue)
          }]
      }]   
      })
  
     })
 
  }


  
  

}

<div>
    <h5 style="text-align:center;">University Reports: No. of times your books read over the total books read</h5>
  <nvd3 [options]= "this.options" [data]= "this.data" ></nvd3>
</div>