Question

＆lt; p＆gt;我想在我的Angular2应用程序中集成Google Charts。这样做的方法是什么？有没有可用的例子？＆lt; / p＆gt; ＆lt; p＆gt;我试图像Google Charts一样加载包，但是我遇到了加载问题。我尝试过angular2-google-chart ...但是没有设法使它工作。＆lt; / p＆gt; ＆lt; p＆gt;感谢您的帮助。＆lt; / p＆gt;

Answer 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>

Answer 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中添加您的Google图表代码。

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')。

Answer 3

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

首先，您需要将以下行添加到index.html的末尾

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

然后，您需要创建名为Resolver的{{1}}个说法。

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添加到要为路径解析的Observable列表中，

GoogleChartResolver

在// 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图表的所有相关资源。在后续解析中，返回已解析的对象（不需要资源提取）。此方法也会立即加载所有Chart包。如果您需要进一步优化，可以使用不同的解析器加载不同的图表包，但这可能是一种过度杀伤，对此的解决方案是，您可以实现路由/my-path，而不是创建Resolver类。使用方法引用的功能（比如在服务中创建一个做同样事情的静态方法）。

Answer 4

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

Angular2 + Google Charts。如何在Angular2中集成Google Charts？

4 个答案: