web-dev-qa-db-fra.com

Comment intégrer les graphiques Google en tant que directive AngularJs?

Il existe quelques exemples d'intégration de graphiques Google en tant que directive AngularJs.

Comme celui-ci: http://plnkr.co/edit/YzwjuU?p=preview

Mise à jour : Je veux éviter d'attendre sur Google Maps pour être prêt avant de démarrer l'application entière (comme indiqué dans l'exemple ci-dessus):

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

Existe-t-il un moyen de le faire dans un seul module et non sur l'ensemble de l'application?

Mise à jour 2: J'ai créé mon plunker et cela fonctionne sans attendre le rappel mais je ne sais pas si cela fonctionnera dans tous les cas.

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

angularjsgoogle-visualization
21
Andrej Kaurin

Comme vous l'avez déjà compris, vous pouvez initialiser angular dans la balise html ou body, sans attendre les graphiques Google.

Pour vous assurer que vous n'essayez pas de rendre un graphique avant que le code JavaScript du graphique Google ne soit prêt, je demanderais à la directive $ de regarder une nouvelle propriété/indicateur de portée de contrôleur $ que vous définissez dans la fonction de rappel pour google.setOnLoadCallback. Dans le rappel $ watch, vérifiez que l'indicateur est défini, puis effectuez votre initialisation.

11
Mark Rajcok

Voici un bon exemple de directive AngularJs Google Chart Tools en action.

Instructions

Ces mêmes instructions sont dans le plongeur lui-même.

  1. Téléchargez ng-google-chart.js depuis github et ajoutez une balise de script à votre html.

  2. Créez un div comme:

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

  3. Ajoutez 'googlechart' à votre module comme ceci:

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

  4. Remplissez le $scope.chart comme ça:
{
  "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

J'avais des problèmes périodiques en Angular avec l'API google chart n'étant pas chargée à temps pour recevoir les données d'une extraction $ http. Les données sont arrivées d'abord parfois (pas toujours), puis son utilisation dans le rappel échouerait avec "google.visualization.DataTable n'est pas une fonction"

À l'intérieur du rappel renvoyant des données:

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

Pour le résoudre, j'ai trouvé dans ng-google-chart.js qu'il y avait une promesse appelée "googleChartApiPromise", alors je l'ai injectée et j'ai enveloppé l'appel de rafraîchissement:

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

Cela semble résoudre le problème.

2
Gerald de Jong

Il y a un projet Github qui enveloppe Google Charts dans la directive AngularJS

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

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

2
webdev