个人中心
gpt4 book ai didi

javascript - 谷歌图表(jsapi)到angular2组件

转载 作者：搜寻专家 更新时间：2023-10-30 21:43:06 25 4
gpt4 key购买 nike

我正在努力创建一个可以调用 google chart api 并显示 google-chart ( https://developers.google.com/chart/interactive/docs/quick_start ) 的 angular2 组件。这通常会导致无法解释的错误或浏览器永远加载。

编辑:下面添加了完整的更新测试文件

另见 plnkr here .

更具体地说，这些是我用来确定事情开始出错的点的测试文件:

index.html

<html>
<head>
<title>Angular 2 QuickStart</title>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.46/angular2.dev.js">    </script>

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>


<script>
  System.config({
    transpiler: 'typescript',
    typescriptOptions: { emitDecoratorMetadata: true }
  });
  System.import('./app.ts');
</script>
</head>
<body>
<my-app>loading...</my-app>
</body>
</html>

然后，app.ts

import {bootstrap, Component} from 'angular2/angular2';


@Component({
selector: 'my-app',
template:`
<h1>Demo component my-app</h1>
<div id="cc" (click)="test($event)">Click me</div>
`
})
class AppComponent {

constructor() {
console.log("Constructor was called");
}

test(event) {
console.log("Event :",event);
console.log("Test :", google);
console.log("Document object by id",document.getElementById("cc"));

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

  console.log("Callback is entered ");

  // 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('cc'));
  chart.draw(data, options);
}



  console.log("Google object : ", google);
  console.log("Now, loading visualization api");
  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['corechart']});
  console.log("Now, setting callback");
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);
  console.log("Callback was set");
  }

}



bootstrap(AppComponent);

这是控制台显示的内容，当我点击时:

Constructor was called
app.ts:18 Event : MouseEvent {isTrusted: true}
app.ts:19 Test : Object {loader: Object}
app.ts:20 Document object by id <div id=​"cc">​Click me​</div>​
app.ts:53 Google object :  Object {loader: Object}
app.ts:54 Now, loading visualization api
app.ts:57 Now, setting callback
app.ts:60 Callback was set

显然，回调永远不会进入？!

谁能帮我解决这个问题？非常感谢!

最佳答案

最后，通过使用图表组件调用图表指令解决了这个问题。该指令的 setter 触发绘图。不再需要直接捕获/管理绘图事件。

  1. 从顶部的 index.html 文件加载 google 脚本

    <script type="text/javascript" src="https://www.google.com/jsapi">
    </script>
    <script type="text/javascript">        
      google.load('visualization', '1.0', {
        'packages': ['corechart']
      });
    </script>

  2. 创建一个“图表”指令来绘制谷歌图表 (chart.directive.ts)

    /**
    *      This directive will draw a chart from the array of records provided
    *
    *           Note : the relevant jsapi scripts should be already available
    *                  globally in the window.google object (see index.html)
    **/

    import {Directive, ElementRef, Input} from "angular2/core";
    import {CORE_DIRECTIVES } from "angular2/common";

    @Directive({
      selector: "chart",
    })
    export class ChartDirective {

      el: HTMLElement; 
      w: any;  // To store the window, without generating errors in typescript on window.google
      private _content: any[] = [];         

      // Setter for content will trigger drawing (or refreshing)
      @Input()
      set content(c: any[]) {
        console.log("Setting content ...");
        this._content = c;
        this.draw();
      }

      get content() { return this._content; }



      // Constructor inject a ref to the element
      constructor(elementRef: ElementRef) {
      console.log("Constructing chart directive");
      this.w = window;
      this.el = elementRef.nativeElement; // You cannot use elementRef directly !
      // console.log("Native HTML :", this.el);
      if (!this.w.google) { console.error("Hey ! It seems the needed google script was not loaded ?"); };
      }

    // Do the actual drawing
    draw() {
      // Create the data table.
      let data = new this.w.google.visualization.DataTable();
      data.addColumn("date", "Quand");
      data.addColumn("number", "KG");
      let rows = [];
      for (let c in this._content) {
        let d: Date = new Date(this._content[c].quand);
        let k: number = +(this._content[c].kg); // Plus sign to force conversion sting -> number
        // Only take into account records after the 'notBefore date'
        if (d >= this._nbd) rows.push([d, k]);
      }
      data.addRows(rows);
      // Create options
      let options: any = {
        // "width": 600,
        "height": 300,
        "curveType": "function"
      };


      // Instantiate and draw our chart, passing in some options.
      (new this.w.google.visualization.LineChart(this.el))
        .draw(data, options);
    }

  3. 在图表组件 (chart.component) 中使用指令 ...

    import {Component } from "angular2/core";
    import {CORE_DIRECTIVES } from "angular2/common";

    import {MyModel} from "./mymodel.service.ts";
    import {ChartDirective} from "./chart.directive.ts";


    @Component({
    selector: "chartPage",
    templateUrl: "/components/chart.template.html",
    directives: [CORE_DIRECTIVES, ChartDirective]        
    })
    export class ChartComponent {     

    }

    // Injecting my data model into chart component ...
    constructor(private model: MyModel) {
      console.log("Constructing chart component");
    };

  4. ... 使用以下图表模板

    <chart [content]="model.content" ></chart>

关于javascript - 谷歌图表(jsapi)到angular2组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33797295/

25 4 0
文章推荐： javascript - 使用 RequireJs 和 Grunt 将 TypeScript 编译成单个文件
文章推荐： c# - MS Access 查询 "WHERE"异常
文章推荐： java - 如何在JAVA中查找方法的返回类型？
文章推荐： typescript - 模块和接口(interface)可以同名吗？
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com