Angular2 + 谷歌图表。如何在 Angular2 中集成谷歌图表？答案

【问题标题】：Angular2 + Google Charts. How to integrate Google Charts in Angular2?Angular2 + 谷歌图表。如何在 Angular2 中集成谷歌图表？
【发布时间】：2016-05-31 09:52:11
【问题描述】：

我想在我的 Angular2 应用程序中集成 Google Charts。这样做的方法是什么？有没有可用的例子？

我尝试像 Google Charts 演示那样加载包，但我在加载时遇到问题。我尝试了 angular2-google-chart... 但没有设法让它工作。

感谢您的帮助。

【问题讨论】：

你有什么尝试吗？
你能把你累的代码放下吗？

标签： angular google-visualization

【解决方案1】：

这是我解决它的方法。

import { Component} from '@angular/core';
import { GoogleChartComponent} from './ChartComponent.js';

@Component({
  selector: 'evolution',
  template: `
    <div class="four wide column center aligned">
        <div id="chart_divEvolution" style="width: 900px; height: 500px;"></div>
    </div>
  `
})
export class EvolutionComponent extends GoogleChartComponent {
  private options;
  private data;
  private chart;
  constructor(){
    console.log("Here is EvolutionComponent")
  }

  drawGraph(){
    console.log("DrawGraph Evolution...");  
    this.data = this.createDataTable([
      ['Evolution', 'Imports', 'Exports'],
      ['A', 8695000, 6422800],
      ['B', 3792000, 3694000],
      ['C', 8175000, 800800]
    ]);

    this.options = {
      title: 'Evolution, 2014',
      chartArea: {width: '50%'},
      hAxis: {
        title: 'Value in USD',
        minValue: 0
      },
      vAxis: {
        title: 'Members'
      }
    };

    this.chart = this.createBarChart(document.getElementById('chart_divEvolution'));
    this.chart.draw(this.data, this.options);
  }
}

import { Component, OnInit} from '@angular/core';
declare var google:any;
@Component({
  selector: 'chart'
})
export class GoogleChartComponent implements OnInit {
  private static googleLoaded:any;

  constructor(){
      console.log("Here is GoogleChartComponent")
  }

  getGoogle() {
      return google;
  }
  ngOnInit() {
    console.log('ngOnInit');
    if(!GoogleChartComponent.googleLoaded) {
      GoogleChartComponent.googleLoaded = true;
      google.charts.load('current',  {packages: ['corechart', 'bar']});
    }
    google.charts.setOnLoadCallback(() => this.drawGraph());
  }

  drawGraph(){
      console.log("DrawGraph base class!!!! ");
  }

  createBarChart(element:any):any {
      return new google.visualization.BarChart(element);
  }

  createDataTable(array:any[]):any {
      return google.visualization.arrayToDataTable(array);
  }
}

现在你需要做的就是把它添加到你的 index.html

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

【讨论】：

您好，感谢您的回答。但是我确实有几个问题- 1. 在您的示例中，您使用了 BarChart，但是在哪里可以找到除 BarChart、LineChart、BubbleChart、ScatterChart 和 PieChart 之外的支持的图表类型列表？ 2. Google 是否支持在同一画布上显示条形图、折线图和气泡图等多种图表（类似于任何交易网站，例如 Google Finance 或 Yahoo Finance）？
如果这有用，我很高兴。我在我的项目中使用上述类作为其他子类的基础类，这些子类实际上使用其他图表类型。查看Google Charts 的文档以获取所有可用图表。
感谢参考:)
非常感谢您的回答。你知道如何使图表响应吗？谢谢！
我会让基本组件远离任何特定的图表方法。我认为 createbarchart 应该在子类中。

【解决方案2】：

//in index.html add
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

33.5KB 从谷歌服务器加载到您的应用程序。

现在添加

declare var google:any;

到您的组件并在 ngOnInit 中添加您的谷歌图表代码。

import { Component, OnInit } from '@angular/core';
declare var google:any;

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

constructor() { 

}

ngOnInit() {

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

  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }
}

}

加载“corechart”时从谷歌服务器加载了额外的 35.8KB。

将此添加到您的组件 html

<div id="piechart" style="width: 900px; height: 500px;"></div>

更好的方法是在组件 ts 文件中使用 ViewChild 而不是 document.getElementById('piechart')。

【讨论】：

【解决方案3】：

如果您使用路由，则此解决方案非常适合。您可以创建一个 Resolver 来初始化和解析 google 对象，您可以将其注入到您的组件中。

首先你需要在 index.html 的末尾添加下面一行

// index.html
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

然后你需要创建一个Resolver 说，命名为GoogleChartResolver。

// shared/google-chart.resolver.ts
declare const google: any;

@Injectable()
export class GoogleChartResolver implements Resolve<any>{

  private static googleChartLoaded: boolean = false;
  constructor() {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

    if(GoogleChartResolver.googleChartLoaded){
      return Observable.of(google);
    } else {
      return Observable.create(function (observer: Observer<any>) {

        google.charts.load('current', {packages: ['corechart', 'bar']});
        google.charts.setOnLoadCallback(() => {
          observer.next(google);
          observer.complete();
          GoogleChartResolver.googleChartLoaded = true;
        });
      });
    }
  }
}

对于每个需要google 实例的路由和组件，您可以添加以下行。您需要将 GoogleChartResolver 添加到要为路由解析的 Observable 列表中，

// app-routing.module.ts
{path: 'my-path', component: MyComponent, resolve: {google: GoogleChartResolver}}

在MyComponent 中，您可以插入ActivatedRoute 并从快照中获取google 的实例

// my.component.ts
private google: any;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.google = this.route.snapshot.data.google;
  drawChart(this.google)
}

Google 图表的所有相关资源将在您第一次尝试解析解析器时加载（此处为您第一次访问/my-path）。在后续解析中，返回已解析的对象（无需获取资源）。此外，这种方法一次加载所有 Chart 包。如果您需要进一步优化，您可以使用不同的解析器加载不同的图表包，但这可能有点过头了，对此的解决方案是，您可以使用方法参考来实现路由resolve 功能，而不是创建Resolver 类（比如说在服务中创建一个静态方法来做同样的事情）。

【讨论】：

太棒了。这是最好的方法，恕我直言。

【解决方案4】：

如果您要求使用类似使用的组件，请参阅下面的 ng2-google-charts。 https://www.npmjs.com/package/ng2-google-charts 。它在内部使用 loader.js 谷歌库来渲染库。您可以通过输入对图表进行配置。

【讨论】：