Angular 8: отображать много гуглчартов на одной странице - PullRequest
Новая
       61

Angular 8: отображать много гуглчартов на одной странице

1 голос
/ 26 сентября 2019

Я использую угловые 8, firebase и ng2-google-charts.Я хочу создать диаграммы данных моего firebase.

Я хочу отобразить несколько графиков на одной странице, которые получают все конкретные данные в firebase.код работает очень хорошо для графа, но так как у меня есть несколько на одной странице, он не работает

Для каждого графика я попробовал это:

childComponent.ts 

  @Component({
  selector: 'app-tempgraphload',
  templateUrl: '<div id="{{elementId}}" ></div>',
  styleUrls: ['./tempgraphload.component.scss']
})
export class TempgraphloadComponent implements OnInit {

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

 constructor(private _ganttChartService: GoogleGanttChartService) {}

@HostListener('window:resize', ['$event']) onWindowResize(event: any) {
        this.drawChartT();  }

Component.ts 

  @Component({
  selector: 'app-tempgraph',
  templateUrl: '<app-tempgraphload [data1]="data1" [config]="config1" [elementId]="elementId1" ></app-tempgraphload>',
  styleUrls: ['./tempgraph.component.scss']
})
export class TempgraphComponent implements OnInit {

  constructor(public dataService: DatasService) { }

  datatodisplay;
  data1 : any [];
  config1: GanttChartConfig;
  elementId1: string; 

ngOnInit() {
this.datatodisplay = this.dataService.getDatas();
let interestingFields =['date','TeS1'];
this.datatodisplay.subscribe((valList: Data[]) => {
this.data1=[interestingFields,
...valList.map(val=> interestingFields.map(field => val[field]))];
});
this.config1 = new GanttChartConfig(new Date (),0);
this.elementId1 = 'myGanttChart'; 
} }

ngOnInit(): void {this.drawChart();}
ngOnChanges(): void {this.drawChart();}
drawChart(): void { 
        this._ganttChartService.BuildPieChart(this.elementId, this.data1, this.config);
    }   
}

google-charts-base.service.ts 

declare var google: any;

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

protected buildChart(data: any[], chartFunc: any, options: any) : void {
var func = (chartFunc, options) => {

var datatable = google.visualization.arrayToDataTable(data);
console.log(data);
chartFunc().draw(datatable, options);
};   
var callback = () => func(chartFunc, options);
google.charts.setOnLoadCallback(callback);
}}

google-gantt-chart.service.ts 

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.LineChart(document.getElementById(elementId)); };
  var options = {
  date: config.date,
  HeS1: config.HeS1,
  height: 300,
  title: 'Dernières 24h :',
      curveType: 'function',
      legend: { position: 'none' },
      hAxis:{textPosition: 'none'},
  };
   this.buildChart(data, chartFunc, options);}
   }

но у меня есть эта ошибка: 

core.js:6014 ERROR Error: Uncaught (in promise): Error: Not an array
Error: Not an array
    at gvjs_Sba (jsapi_compiled_i18n_default_module__fr.js:128)
    at Object.gvjs_Co [as arrayToDataTable] (jsapi_compiled_i18n_default_module__fr.js:130)
    at func (google-charts-base.service.ts:13)
    at callback (google-charts-base.service.ts:16)

console.log (JSON.stringify (data));[["date", "TeS1"], ["25/09/2019 14:07:37", 27,5], ["25/09/2019 15:07:38", 28.399999618530273], ["25/09/ 2019 16:07:40 ", 28.100000381469727], [" 25/09/2019 17:07:42 ", 27.899999618530273], [" 25/09/2019 18:07:44 ", 28.799999237060547], [" 25 /09/2019 19:07:46 ", 28.899999618530273], [" 25/09/2019 20:07:48 ", 28.899999618530273], [" 25/09/2019 21:07:50 ", 28.899999618530273], [" 25/ 09/2019 22:07:52 ", 29.299999237060547], [" 25/09/2019 23:07:53 ", 28.899999618530273], [" 26/09/2019 00:07:55 ", 28.899999618530273], ["26/09/2019 01:07:57 ", 28], [" 26/09/2019 02:07:59 ", 27,5], [" 26/09/2019 03:08:01 ", 27.200000762939453], ["26/09/2019 04:08:03", 26.899999618530273], ["26/09/2019 05:08:04", 26.799999237060547], ["26/09/2019 06:08:06", 26.700000762939453],["26/09/2019 07:08:08", 26.600000381469727], ["26/09/2019 08:08:10", 26.700000762939453], ["26/09/2019 09:08:17", 28,5], ["26/09/2019 10:08:21", 28.899999618530273], ["26/09/2019 11:08:23", 28.899999618530273], ["26/09/2019 12:08:24", 29,5], ["26/09/2019 13:08:26", 29.399999618530273]]

I tесли бы мне пришлось изменить обратный звонок https://developers.google.com/chart/interactive/docs/basic_multiple_charts

но кто-нибудь может мне помочь, пожалуйста?спасибо за помощь ++

...