如何将 Google 图表集成为 AngularJs 指令？

有一些将 Google 图表集成为 AngularJs 指令的示例。

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

Update：我想避免在引导整个应用程序之前等待谷歌图表准备好（如上面的示例所示）：

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

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

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

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

这是一个很好的例子AngularJs Google 图表工具指令 http://jessemon.blogspot.com/2013/09/angular-google-chart-example.html在行动中。

• 笨蛋示例 http://plnkr.co/edit/3RJ2HS?p=info.

指示

这些相同的指令位于 plunker 本身中。

1. 从 github 下载 ng-google-chart.js https://raw.githubusercontent.com/angular-google-chart/angular-google-chart/master/ng-google-chart.js并将脚本标签添加到您的 html 中。

2. 创建一个div，例如：

   <div google-chart chart="chart" style="{{chart.cssStyle}}"> </div>

3. 将“googlechart”添加到您的模块中，如下所示：

   angular.module('myApp',[ 'googlechart', ...

4. 填充$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
}