Google Charts 和 Angular 2 - 图表不会显示答案

【问题标题】：Google Charts and Angular 2 - a graph won't showGoogle Charts 和 Angular 2 - 图表不会显示
【发布时间】：2016-09-28 06:33:06
【问题描述】：

我正在学习 Angular 2，作为练习，我想使用 Google Charts API。
这是我的组件，我想在其中有一个图表：

import { Component, OnInit } from '@angular/core';

import { WeatherAPIService } from './weatherAPI.service';

declare var google: any;


@Component({

  selector: 'my-graphs',

  template: `<h1>Charts for {{this.weatherAPIService.cityName}}</h1>
            <div id="chart_div"></div>            
            `,

  providers: [WeatherAPIService]
})

export class GraphsComponent implements OnInit {

    //googleLoaded;

    constructor(
                  private weatherAPIService: WeatherAPIService

            ) { }

    drawChart () {

      console.log(google.visualization);

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);


              // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                      'width':400,
                      'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);

    }

    loadGoogleChart() {
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(() => this.drawChart);

    }



    ngOnInit(): void {
        this.loadGoogleChart();
    }


}

如果我理解正确的话，我应该只调用this.loadGoogleChart()函数，因为里面有一个drawChart()的回调，所以我不需要自己调用drawChart()。不幸的是，当我运行它时，我什么也没看到 - 该组件只有我在模板中设置的 <h1> 标头，但 chart_div 只是空的。

我做错了什么？我看到一个类似的问题：TypeError: google.visualization is undefined 但在那种情况下，问这个问题的人在 console.log(google.visualization); 时得到了一些结果。被称为。我在控制台中没有看到任何消息。
所以，我猜，drawChart() 永远不会被调用。这是什么原因？

【问题讨论】：

标签： javascript angular typescript google-visualization

【解决方案1】：

在你的线上 google.charts.setOnLoadCallback(() => this.drawChart); 可以改成google.charts.setOnLoadCallback(() => this.drawChart());

还有一个普遍存在的错误，即您无法为后续调用重新初始化图表。我认为它已更新，但我还没有检查。无论如何，您始终可以拥有此功能 checkloaded(): boolean { return !((typeof google === 'undefined') || (typeof google.visualization === 'undefined')); }

您会调用它来查看它是否之前已加载，以便后续调用初始化它将被忽略。

【讨论】：

【解决方案2】：

我对 Angular 2 的生命周期不够熟悉，但是在 Angular 1.x 中与 Google Charts 进行了广泛的合作，我认为您的代码示例没有反映出框架和库之间配对的复杂性。

您将面临的最大问题之一是您只能在谷歌图表上调用一次加载。在它已经加载之后，如果你再次调用 load 它不会触发你的回调。这意味着在组件级别处理负载通常不合适。如果您更改状态并且该组件消失了，则无法处理加载程序服务已经存在的事实。

另外，你只能有一个回调，所以如果你有多个组件同时加载，一个组件会从谷歌图表中覆盖另一个组件的回调，你会得到一个回调的最后赢家的情况.

我无法就 Angular 2 的细节提供建议，因为我没有了解最新的框架，但请记住，这个问题太复杂，无法用几行代码来处理。不过，我确实鼓励您尝试并解决它。在我找到Angular Google Chart 之前，我看到使用的一种 hacky 方法是延迟 angular bootstrap 直到加载谷歌图表库。这样你就可以对所有代码保持乐观，并假设谷歌图表库已经加载。不知道这是否适用于 Angular 2。

【讨论】：