来自数据集的Angular2数据不会采用数字[]数组

时间:2017-05-12 12:11:22

标签: html angular typescript charts dataset

我最近在图表上工作,我正在使用ngprime(pie)的图表模型。我想将我的数字数组作为ts文件中的数据传递,但它不会显示任何内容。数组在OnInit方法中填充。

更新:

这些数字会被填写,但仅在一段时间后,当我调整窗口大小时。有没有一种方法让图表只显示加载的所有内容?我尝试将数据放在oninit等,但似乎没有任何帮助。数组填写完毕。

亲切的问候

       import {Component, OnInit} from '@angular/core';
import {InternshipAssignmentService} from '../services/internshipAssignment.service';
import {IInternshipModel} from '../models/internship.model';


@Component({
  selector: 'coordinator-chart',
  templateUrl: 'coordinatorChart.component.html',
  styleUrls: ['../../assets/css/in/style.css']
})

export class CoordinatorChartComponent implements OnInit{
// afstudeerrichtingen, technologieen
  dataAfst: any
  options: any;
  dataTech: any;
  internships: IInternshipModel[] = [];
  specialisations: string[] = [];//;
  specialisationsArray: number[] = [this.specialisations.length];

  constructor(private _service: InternshipAssignmentService) {
    this.dataAfst = {
      labels: this.specialisations,
      datasets: [
        {
          data: this.specialisationsArray,
          backgroundColor: [
            "#FF6384",
            "#36A2EB",
            "#FFCE56"
          ],
          hoverBackgroundColor: [
            "#FF6384",
            "#36A2EB",
            "#FFCE56"
          ]
        }]
    };
    this.dataTech = {
      labels: ['AngularJs', 'SQL','C#'],
      datasets: [
        {
          data: [300, 50, 100],
          backgroundColor: [
            "#FF6384",
            "#36A2EB",
            "#FFCE56"
          ],
          hoverBackgroundColor: [
            "#FF6384",
            "#36A2EB",
            "#FFCE56"
          ]
        }]
    };
    this.options = {
      responsive: true,
      maintainAspectRatio: false
    };
  }

  ngOnInit(): void {
    this._service.getInternshipAssignments().subscribe(internships => {
      this.internships = internships;
      this.getSpecialisations();
      this.countSpecialisations();
    });
  }

  public getSpecialisations(): void {
    this.internships.forEach(i => {
      const helper: string [] = i.PreferredSpecialization.split(';');
      for(let h of helper) {
        if (this.specialisations.indexOf(h) === -1) {
          this.specialisations.push(h);
        }
      }
    });
  }

  public countSpecialisations(): void {
    let i: number = 0;
    for(i; i < this.specialisations.length; i++) {
      this.specialisationsArray[i] = 0;
    }
    this.internships.forEach(i => {
      switch (i.PreferredSpecialization) {
        case "AON":
          this.specialisationsArray[0]++;
          break;
        case "SWM":
          this.specialisationsArray[1]++;
          break;
        case "SNB":
          this.specialisationsArray[2]++;
          break;
      }
    });
  }
}

Html:

<p-chart type="pie" class="charts col-sm-6" [data]="dataAfst" [options]="options"></p-chart>

它的图像没有显示任何内容:

Image of it showing nothing

0 个答案:

没有答案