使用 Google Chart 在 Angular 6 中显示动态数据

Question

我使用 Angular Cli6、angularfire2 和 firebase。我想用 GoogleChart 创建一个时间线。

//GoogleChart.service

declare var google: any;

export class GoogleChartsBaseService 
{
  constructor() { google.charts.load('current', {'packages':["timeline"]}); }

   protected buildChart(data: any[], chartFunc: any, options: any) : void {
   var func = (chartFunc, options) => 
        {
        var datatable = google.visualization.arrayToDataTable(data);
        chartFunc().draw(datatable, options); 
        };   
   var callback = () => func(chartFunc, options);
   google.charts.setOnLoadCallback(callback);
   }
}

TimelineChart.service

import { GoogleChartsBaseService } from './google-charts-base.service';
import { Injectable } from '@angular/core';
import { GanttChartConfig } from './../models/GanttChartConfig.model';

declare var google: any;

@Injectable()
export class GoogleGanttChartService extends GoogleChartsBaseService {

  constructor() { super(); }

  public BuildPieChart(elementId: string, data: any[], config: GanttChartConfig) : void {  
    var chartFunc = () => { return new google.visualization.Timeline(document.getElementById(elementId)); };
    var options = {
            traitement: config.traitement,
                  datedebut: config.datedebut,
            datefin: config.datefin,

      };

    this.buildChart(data, chartFunc, options);
  }
}

时间线.html

<div id="{{elementId}}" ></div>

时间线.ts

import { Component, Input, OnInit } from '@angular/core';
import { GoogleGanttChartService } from './../../services/google-gantt-chart.service';
import { GanttChartConfig } from './../../models/GanttChartConfig.model';
declare var google: any;

@Component({
  selector: 'app-gantt',
  templateUrl: './gantt.component.html',
  styleUrls: ['./gantt.component.scss']
})
export class GanttComponent implements OnInit {

    @Input() data: any[];
    @Input() config: GanttChartConfig;
    @Input() elementId: string;

 constructor(private _ganttChartService: GoogleGanttChartService) {}

    ngOnInit(): void {
        this._ganttChartService.BuildPieChart(this.elementId, this.data, this.config);
    }
}

以及显示图表的组件：

组件.html

 <div class="full"><app-gantt [data]="data1" [config]="config1" [elementId]="elementId1"></app-gantt></div>

组件.ts

import { Component, OnInit, Inject } from '@angular/core';
import { Patient } from '../models/patient.model';
import { Diagnostic } from '../models/diagnostic.model';
import { ActivatedRoute, Router } from '@angular/router';
import { PatientsService } from '../services/patients.service';
import { DiagnosticsService } from '../services/diagnostics.service';
import { PPSsService } from '../services/ppss.service';
import { AngularFireDatabase, AngularFireList, AngularFireObject, AngularFireAction } from 'angularfire2/database';
import { Location } from '@angular/common';
import { Observable } from 'rxjs/Observable';
import { GanttChartConfig } from './../models/GanttChartConfig.model';
import { PPS } from '../models/pps.model';
import {MAT_MOMENT_DATE_FORMATS, MomentDateAdapter} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA,MatDatepickerModule, MatFormFieldModule,} from '@angular/material';
import { FormControl, FormControlName, FormBuilder, FormGroup, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
import { startWith } from 'rxjs/operators/startWith';
import { map, filter, catchError, mergeMap } from 'rxjs/operators';

  @Component({
  selector: 'app-pps',
  templateUrl: './pps.component.html',
  styleUrls: ['./pps.component.scss']
})
export class PpsComponent implements OnInit {
 patientid: string;
 patientToDisplay;
 ppssToDisplay;
 data1: any[];
 config1: GanttChartConfig;
 elementId1: string;

constructor( 
    private route: ActivatedRoute, 
    private location: Location,
    private patientsService: PatientsService,
    private diagnosticsService: DiagnosticsService,
    private ppssService: PPSsService,
    private router: Router, 
    public dialog: MatDialog, 
    ){ }
  ngOnInit() {

   this.route.params.forEach((urlParameters) => {
   this.patientid = urlParameters['id'];});
   this.patientToDisplay = 
   this.patientsService.getSinglePatient(this.patientid);
   this.ppssToDisplay = this.ppssService.getPPSByPatientid(this.patientid);


   this.data1 = [[ 'traitement','start', 'end'],
   [ 'Chirurgie',  new Date(2017, 3, 29), new Date(2017, 3, 30)],
   [ 'Chimiothérapie', new Date(2017, 2, 4),  new Date(2018, 2, 4)],
   [ 'Radiothérapie',   new Date(2017, 2, 4),  new Date(2018, 2, 4)]]; 

   this.config1 = new GanttChartConfig( '',new Date (),new Date ());
   this.elementId1 = 'myGanttChart';

现在我可以通过在我的组件中写入数据轻松地显示我的图表

但我的数据是这样存储在 firebase 中的：

我使用来自 angularfire2 的 observable 显示数据

DATA.Service.TS

getPPSByPatientid(Patientid: string){
return this.database.list('/ppss', ref => ref.orderByChild("Patientid").equalTo(Patientid)).valueChanges();
}

我在我的组件 .ts 中尝试了这个，以便为 this.data1 提供良好的数组，但没有成功 Console.log(this.data1)发送未定义的数组

let interestingFields = [ 'treatement','dateA', 'dateB'];
    this.ppssToDisplay.subscribe(obj => {
      this.data1 = [
        interestingFields,
        interestingFields.map(field => obj[field]),
      ];
    console.log(this.data1);
    });


Error:

    core.js:1598 ERROR Error: Uncaught (in promise): Error: Not an array Error: Not an array

我想把我所有的代码都放进去，这样你就可以完全可视化我想要做什么。

我的问题是：我选择了正确的解决方案还是应该在模板中使用循环来填充图表？

谁能告诉我声音让我可以再次入睡（5 天哈哈）

Answer 1

看来您找到了正确的解决方案。将数据发送到data1 时只有一个问题。

为了使检索到的数据与您硬写的数据上的模式相匹配，您必须从检索到的数据的角度循环遍历它：

this.ppssToDisplay.subscribe(ppsList => {
  this.data1 = [
    interestingFields,
    ...ppsList.map(pps => interestingFields.map(field => pps[field]))
    ];
});

然后就可以了。这应该可以解决您的问题。