谷歌图表：错误类型错误：“c 未定义”

Posted 2023-03-16

【中文标题】谷歌图表：错误类型错误：“c 未定义”

【英文标题】：Google Charts: ERROR TypeError: "c is undefined"

【发布时间】：2021-10-12 14:14:51

【问题描述】：

我正在使用谷歌图表显示来自 API 的 Covid 数据，即使数据是在 ngOnInit() 中加载的，我也收到错误：ERROR TypeError:“c is undefined”。 这是我的代码：

import Component from '@angular/core';
import  DataService  from "./data.service";

@Component(
  selector: 'app-root',
  template: '<google-chart [data]="geoChart" *ngIf=mapReady></google-chart>',
  styleUrls: ['./app.component.css']  
)
export class AppComponent 
  states_data = [['State','COVID-Confirmed Cases']];
  response: any[]=[];
  mapReady=false;
  constructor(public serv: DataService)

  ngOnInit()
    this.serv.getData().subscribe((res)=>
      console.log(res)
        this.response=res.statewise;
        this.response.splice(0,1);

        for(let state of this.response)
          let temp = [state.state,Number(state.confirmed)];
          if( state.state=="Odisha")
            temp = ['IN-OR',Number(state.confirmed)];
          
          this.states_data.push(temp);
        
        this.mapReady=true
      ,
      (err)=>
        console.log(err)
      
    );
  
  
  public geoChart: any = 
    chartType: 'GeoChart',
    dataTable: this.states_data,
    options: 
      region: 'IN', // INDIA
      colorAxis: colors: ['#00F919', '#0FFFE4', '#1FA20F','#156930','#033E3B'],
      resolution: 'provinces',
      backgroundColor: '#00000',
      datalessRegionColor: '#00000',
      defaultColor: '#00000',
      'height': 600,
    
  ;

我在 Stack Overflow 上发现了一些类似的问题，但它们与数据表有关，我正在使用 google-charts。有谁知道可能是什么？如果您需要更多信息，我很乐意提供。

提前致谢！

【问题讨论】：

也许，这个*ngIf=mapReady 应该是*ngIf="mapReady"？

@R.Richards，试过但没有帮助

控制台将 this.states_data 记录在 this.mapReady=true 之上。它有什么价值？

@Ritesh 它得到了数据数组

【参考方案1】：

用下面的代码替换你的组件：

import Component from '@angular/core';
import  DataService  from "./data.service";

@Component(
  selector: 'app-root',
  template: '<google-chart [data]="geoChart" *ngIf="geoChart"></google-chart>',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  states_data = [['State','COVID-Confirmed Cases']];
  response: any[] = [];
  geoChart;
  constructor(public serv: DataService) 

  ngOnInit() 
    this.serv.getData().subscribe( (res) => 
      if (res && res.statewise) 
          this.response = res.statewise;
          this.response.splice(0, 1);
          for (let state of this.response) 
            let temp = [state.state, Number(state.confirmed)];
            if ( state.state == "Odisha") 
                temp = ['IN-OR', Number(state.confirmed)];
            
            this.states_data.push(temp);
          
          this.geoChart = 
              chartType: 'GeoChart',
              dataTable: this.states_data,
              options: 
                region: 'IN', // INDIA
                colorAxis: colors: ['#00F919', '#0FFFE4',
                        '#1FA20F','#156930','#033E3B'],
                resolution: 'provinces',
                backgroundColor: '#00000',
                datalessRegionColor: '#00000',
                defaultColor: '#00000',
              'height': 600,
              
            ;
        
    ,
    (err) => 
      console.log(err);
    );