Polímero - Gráfico de Google

<google-chart> es un elemento que contiene gráficos que se utilizan para visualizar los datos. Este elemento contiene varios gráficos comopie chart, line chart, column chart, area chart, tree mapetc.

Note - Para un JSON válido, debe usar comillas simples si está pasando JSON como atributos.

Puede especificar la altura y el ancho como atributos de estilo como se muestra a continuación:

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

Puede proporcionar los datos mediante cualquiera de las siguientes formas:

Usando el atributo de filas y columnas.

cols = '[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
rows = '[["Oct", 31],["Nov", 30],["Dec", 31]]'

Usando el atributo de datos, puede pasar los datos directamente.

data = '[["Month", "Days"], ["Oct", 31], ["Nov", 30], ["Dec", 31]]'

Usando el atributo de datos, puede pasar datos en la URL.

data = 'http://demo.com/chart-data.json'

Usando el atributo de datos , puede pasar datos en un objeto Google DataTable

data = '{{dataTable}}'

Usando el atributo de vista

view = '{{dataView}}'

Puede establecer el atributo lang en la etiqueta html, si desea mostrar los gráficos en configuraciones regionales distintas de "en" como se muestra en el siguiente fragmento de código.

<html lang = "ja">

Ejemplo

Para usar el elemento google-chart, navegue a la carpeta de su proyecto en el símbolo del sistema y use el siguiente comando.

bower install PolymerElements/google-chart --save

El comando anterior instala el elemento google-chart en la carpeta bower_components. A continuación, importe el archivo google-chart en su index.html con el siguiente comando.

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

El siguiente ejemplo demuestra el uso del 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>

Salida

Para ejecutar la aplicación, navegue hasta el directorio de su proyecto y ejecute el siguiente comando.

polymer serve

Ahora abra el navegador y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.

↰ Previous page