Polymère - Google Chart

Le <google-chart> est un élément contenant des graphiques utilisés pour visualiser les données. Cet élément contient divers graphiques tels quepie chart, line chart, column chart, area chart, tree map, etc.

Note - Pour un JSON valide, vous devez utiliser des guillemets simples si vous transmettez JSON en tant qu'attributs.

Vous pouvez spécifier la hauteur et la largeur comme attributs de style comme indiqué ci-dessous -

google-chart {
   height: 100px;
   width: 300px;
}

Vous pouvez fournir les données de l'une des manières suivantes:

  • Utilisation de l'attribut cols et rows.
cols = '[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
rows = '[["Oct", 31],["Nov", 30],["Dec", 31]]'
  • En utilisant l'attribut de données, vous pouvez transmettre les données directement.
data = '[["Month", "Days"], ["Oct", 31], ["Nov", 30], ["Dec", 31]]'
  • En utilisant l'attribut de données, vous pouvez transmettre des données dans l'URL.
data = 'http://demo.com/chart-data.json'
  • À l' aide de l'attribut de données , vous pouvez transmettre des données dans un objet Google DataTable
data = '{{dataTable}}'
  • Utilisation de l' attribut de vue
view = '{{dataView}}'

Vous pouvez définir l'attribut lang sur la balise html, si vous souhaitez afficher les graphiques dans des paramètres régionaux autres que "en" comme indiqué dans l'extrait de code suivant.

<html lang = "ja">

Exemple

Pour utiliser l'élément google-chart, accédez au dossier de votre projet dans l'invite de commande et utilisez la commande suivante.

bower install PolymerElements/google-chart --save

La commande ci-dessus installe l'élément google-chart dans le dossier bower_components. Ensuite, importez le fichier google-chart dans votre index.html à l'aide de la commande suivante.

<link rel = "import" href = "/bower_components/google-chart/google-chart.html">

L'exemple suivant illustre l'utilisation de l'élément google-chart.

<!DOCTYPE html>
<html>
   <head>
      <title>google-chart</title>
      <base href = "http://polygit.org/components/">  
      <script src = "webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = "import" href = "google-chart/google-chart.html">
   </head>
  
   <body>
      <google-chart
         type = 'pie'
         options = '{"title": "Pie Chart", "vAxis": {"minValue" : 0, "maxValue": 8}}'      
         cols = '[{"label": "Country", "type": "string"},{"label": "Value", "type": "number"}]'
         rows = '[["Germany", 5.0],["US", 4.0],["Africa", 11.0],["France", 4.0]]'>
      </google-chart>
   </body>
</html>

Production

Pour exécuter l'application, accédez au répertoire de votre projet et exécutez la commande suivante.

polymer serve

Ouvrez maintenant le navigateur et accédez à http://127.0.0.1:8081/. Voici la sortie.