Как интегрировать диаграммы Google как директиву AngularJs?

Есть несколько примеров интеграции графиков Google в качестве директивы AngularJs.

Как этот: http://plnkr.co/edit/YzwjuU?p=preview

Обновление: я хочу, чтобы не дождаться, когда диаграммы google будут готовы перед загрузкой всего приложения (как показано в примере выше):

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

Есть ли способ сделать это в одном модуле, а не во всем приложении?

Обновление 2: я создал свой плункер, и он работает, не дожидаясь обратного вызова, но я не уверен, что он будет работать во всех случаях.

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

Ответы

Ответ 1

Как вы уже выяснили, вы можете инициализировать угловые в теге html или теге, не дожидаясь графиков Google.

Чтобы убедиться, что вы не пытаетесь отобразить диаграмму до того, как код JavaScript в Google будет готов, я бы получил директиву $ watch новый атрибут/флаг контроллера $ scope, который вы устанавливаете внутри функции обратного вызова для google.setOnLoadCallback. Внутри обратного вызова $ watch проверьте, установлен ли флаг, а затем выполните инициализацию.

Ответ 2

Вот хороший пример директивы AngularJs Google Chart Tools в действии.

инструкции

Эти же инструкции содержатся в самом плункере.

  1. Загрузите ng-google-chart.js из github и добавьте тег скрипта в свой html.

  2. Создайте div как:

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

  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
}

Ответ 4

У меня возникали периодические проблемы с Angular, и API диаграммы google не загружался вовремя для получения данных из $ http fetch. Данные приходили сначала (не всегда), а затем использование этого в обратном вызове завершилось неудачей с "google.visualization.DataTable не является функцией"

Внутри обратного вызова возвращаемые данные:

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

Чтобы решить эту проблему, я нашел в ng-google-chart.js, что было обещание под названием "googleChartApiPromise", поэтому я ввел его и завернул в него вызов обновления:

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

Это, похоже, решает проблему.