Question

有一些将Google图表整合为AngularJs指令的示例。

喜欢这个：http://plnkr.co/edit/YzwjuU?p=preview

更新：我想避免在引导整个应用程序之前等待谷歌图表准备就绪（如上例所示）：

 google.setOnLoadCallback(function() {
        angular.bootstrap(document.body, ['myApp']);
    });

有没有办法在单个模块中执行此操作，而不是在整个应用程序中执行此操作？

更新2：我创建了我的plunker并且无需等待回调即可正常工作，但我不确定它是否适用于所有情况。

http://plnkr.co/edit/7UUfcq4dD7nd4MylB4ni

Answer 1

以下是 AngularJs Google Chart Tools directive 的一个很好的示例。

Example plunker。

说明

这些相同的说明都在plunker本身。

Download ng-google-chart.js from github并在您的html中添加脚本标记。
创建一个div：

<div google-chart chart="chart" style="{{chart.cssStyle}}"/>
将“googlechart”添加到您的模块中，如下所示：

angular.module('myApp',[ 'googlechart', ...
像这样填充$scope.chart：

{
  "type": "ColumnChart",
  "cssStyle": "height:200px; width:300px;",
  "data": {
    "cols": [
      {
        "id": "month",
        "label": "Month",
        "type": "string",
        "p": {}
      },
      {
        "id": "laptop-id",
        "label": "Laptop",
        "type": "number",
        "p": {}
      },
      {
        "id": "desktop-id",
        "label": "Desktop",
        "type": "number",
        "p": {}
      },
      {
        "id": "server-id",
        "label": "Server",
        "type": "number",
        "p": {}
      },
      {
        "id": "cost-id",
        "label": "Shipping",
        "type": "number"
      }
    ],
    "rows": [
      {
        "c": [
          {
            "v": "January"
          },
          {
            "v": 19,
            "f": "42 items"
          },
          {
            "v": 12,
            "f": "Ony 12 items"
          },
          {
            "v": 7,
            "f": "7 servers"
          },
          {
            "v": 4
          }
        ]
      },
      {
        "c": [
          {
            "v": "February"
          },
          {
            "v": 13
          },
          {
            "v": 1,
            "f": "1 unit (Out of stock this month)"
          },
          {
            "v": 12
          },
          {
            "v": 2
          }
        ]
      },
      {
        "c": [
          {
            "v": "March"
          },
          {
            "v": 24
          },
          {
            "v": 0
          },
          {
            "v": 11
          },
          {
            "v": 6
          }
        ]
      }
    ]
  },
  "options": {
    "title": "Sales per month",
    "isStacked": "true",
    "fill": 20,
    "displayExactValues": true,
    "vAxis": {
      "title": "Sales unit",
      "gridlines": {
        "count": 6
      }
    },
    "hAxis": {
      "title": "Date"
    }
  },
  "formatters": {},
  "displayed": true
}

Answer 2

正如您已经想到的那样，您可以在html或body标签中初始化角度，而无需等待谷歌图表。

为确保您在Google图表JavaScript代码准备就绪之前不尝试呈现图表，我会有指令$ watch一个新的控制器$ scope属性/标志，你在google.setOnLoadCallback的回调函数中设置。在$ watch回调中，检查以确保设置了标志，然后进行初始化。

Answer 3

Github项目将Google Charts包装成AngularJS指令

https://github.com/angular-google-chart/angular-google-chart

http://angular-google-chart.github.io/angular-google-chart/

Answer 4

我在Angular中经常遇到麻烦，谷歌图表API未按时加载以从$ http fetch接收数据。有时（并非总是）数据第一，然后在回调中使用它会失败，因为＆＃34; google.visualization.DataTable不是函数＆＃34;

回调数据内部：

var dataTable = new google.visualization.DataTable(data);

为了解决这个问题，我在ng-google-chart.js中发现了一个名为＆＃34; googleChartApiPromise＆＃34;的承诺，所以我将其注入，并将刷新调用包装在其中：

googleChartApiPromise.then(function() {
    refreshCharts();
});

这似乎解决了这个问题。

如何将Google图表整合为AngularJs指令？

4 个答案:

说明