Polimero - Grafico di Google

Il <google-chart> è un elemento che contiene i grafici utilizzati per visualizzare i dati. Questo elemento contiene vari grafici comepie chart, line chart, column chart, area chart, tree map, eccetera.

Note - Per un JSON valido, devi utilizzare virgolette singole se stai passando JSON come attributi.

È possibile specificare altezza e larghezza come attributi di stile come mostrato di seguito:

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

È possibile fornire i dati utilizzando uno dei seguenti modi:

  • Utilizzo dell'attributo colonne e righe.
cols = '[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
rows = '[["Oct", 31],["Nov", 30],["Dec", 31]]'
  • Usando l'attributo data, puoi passare direttamente i dati.
data = '[["Month", "Days"], ["Oct", 31], ["Nov", 30], ["Dec", 31]]'
  • Utilizzando l'attributo data, puoi passare i dati nell'URL.
data = 'http://demo.com/chart-data.json'
  • Utilizzando l'attributo data , puoi passare i dati in un oggetto DataTable di Google
data = '{{dataTable}}'
  • Utilizzo dell'attributo di visualizzazione
view = '{{dataView}}'

È possibile impostare l'attributo lang sul tag html, se si desidera visualizzare i grafici in lingue diverse da "en" come mostrato nello snippet di codice seguente.

<html lang = "ja">

Esempio

Per utilizzare l'elemento google-chart, vai alla cartella del tuo progetto nel prompt dei comandi e usa il seguente comando.

bower install PolymerElements/google-chart --save

Il comando precedente installa l'elemento google-chart nella cartella bower_components. Successivamente, importa il file google-chart nel tuo index.html utilizzando il seguente comando.

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

Il seguente esempio dimostra l'uso dell'elemento 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>

Produzione

Per eseguire l'applicazione, vai alla directory del tuo progetto ed esegui il seguente comando.

polymer serve

Ora apri il browser e vai a http://127.0.0.1:8081/. Di seguito sarà l'output.