21

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

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

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

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

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

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

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

4

4 回答 4

12

这是AngularJs Google Chart Tools 指令的一个很好的例子。

指示

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

  1. 从 github 下载 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
}
于 2014-09-03T13:07:26.570 回答
11

正如您已经知道的那样，您可以在 html 或 body 标记中初始化 Angular，而无需等待谷歌图表。

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

于 2013-01-19T23:09:52.413 回答
2

有一个将 Google Charts 包装到 AngularJS 指令中的 Github 项目

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

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

于 2013-11-03T01:41:01.100 回答
2

我在 Angular 中遇到了周期性问题，谷歌图表 API 没有按时加载以从 $http 获取中接收数据。数据有时（并非总是）首先出现，然后在回调中使用它会失败，并显示“google.visualization.DataTable 不是函数”

在回调返回数据内部：

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

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

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

这似乎可以解决问题。

于 2015-11-05T18:50:19.010 回答