Polímero - Gráfico do Google

O <google-chart> é um elemento que contém gráficos usados para visualizar os dados. Este elemento contém vários gráficos, comopie chart, line chart, column chart, area chart, tree mapetc.

Note - Para um JSON válido, você deve usar aspas simples se estiver passando JSON como atributos.

Você pode especificar a altura e a largura como atributos de estilo, conforme mostrado abaixo -

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

Você pode fornecer os dados usando qualquer uma das seguintes maneiras -

Usando o atributo cols e rows.

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

Usando o atributo de dados, você pode passar os dados diretamente.

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

Usando o atributo de dados, você pode passar dados na URL.

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

Usando o atributo de dados , você pode passar dados em um objeto Google DataTable

data = '{{dataTable}}'

Usando o atributo view

view = '{{dataView}}'

Você pode definir o atributo lang na tag html, se quiser exibir os gráficos em localidades diferentes "en" conforme mostrado no seguinte trecho de código.

<html lang = "ja">

Exemplo

Para usar o elemento google-chart, navegue até a pasta do projeto no prompt de comando e use o seguinte comando.

bower install PolymerElements/google-chart --save

O comando acima instala o elemento google-chart na pasta bower_components. Em seguida, importe o arquivo google-chart em seu index.html usando o seguinte comando.

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

O exemplo a seguir demonstra o uso do 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>

Resultado

Para executar o aplicativo, navegue até o diretório do projeto e execute o seguinte comando.

polymer serve

Agora abra o navegador e navegue até http://127.0.0.1:8081/. A seguir será a saída.

polímero_elementos.htm

↰ Previous page