web-dev-qa-db-ja.com

GoogleチャートをAngularJsディレクティブとして統合するにはどうすればよいですか？

GoogleチャートをAngularJsディレクティブとして統合する例がいくつかあります。

このように： http://plnkr.co/edit/YzwjuU?p=preview

Update：アプリケーション全体をブートストラップする前に、Googleチャートの準備ができるのを待たないようにします（上記の例に示すように）：

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

アプリ全体ではなく単一のモジュールでこれを行う方法はありますか？

更新2：プランカーを作成しましたが、コールバックを待たなくても機能しますが、すべてのケースで機能するかどうかはわかりません。

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

angularjsgoogle-visualization
21
Andrej Kaurin

すでに理解しているように、Googleチャートを待たずに、htmlまたはbodyタグでangularを初期化できます。

GoogleチャートのJavaScriptコードの準備ができる前にチャートをレンダリングしないようにするには、google.setOnLoadCallbackのコールバック関数内に設定するディレクティブ$ watch a new controller $ scope property/flagを使用します。 $ watchコールバック内で、フラグが設定されていることを確認してから、初期化を行います。

11
Mark Rajcok

AngularJs Google Chart Toolsディレクティブの動作の良い例を次に示します。

指示

これらの同じ手順は、プランカー自体にあります。

  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
}
12
Jess

私はAngularで定期的に問題を抱えていましたが、$ httpフェッチからデータを受け取るためにGoogleチャートAPIが時間どおりにロードされていません。データが来ましたfirstときどき（not常に）、コールバックでの使用は「google.visualization.DataTable is not a function」で失敗します

データを返すコールバック内：

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

これを解決するために、ng-google-chart.jsで「googleChartApiPromise」というプロミスがあることがわかりましたので、これを挿入して、更新呼び出しをラップしました。

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

これで問題は解決したようです。

2
Gerald de Jong

GoogleチャートをAngularJSディレクティブにラップするGithubプロジェクトがあります

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

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

2
webdev