Construindo tabelas HTML comGoogle Visualization API

Que tal exibir seus dados tabulados com um belo visual e ainda poder ordenar e paginar, tudo construído dinamicamente e sem escrever qualquerTable HTML”?

Prezentace

A Google Visualization API apresenta um conjunto de técnicas para visualização dos seus dados de forma fácil e rápida. Neste Post vamos ver a Table Charts.

Funcionamento

Příklad
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?PHP
<html lang="pt-BR">
  <hlava>    
    <meta charset="ISO-8859-1" />
    <typ skriptu='text/javascript' src='https://www.google.com/jsapi'></skript>
    <typ skriptu='text/javascript'>
      google.zatížení('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      funkce drawTable() {
        var Datum = nové google.visualization.DataTable();
        Datum.addColumn('string', 'Nome');
        Datum.addColumn('number', 'Salário');
        Datum.addColumn('boolean', 'Tempo integral');
        Datum.addRows([
          ['João',  {v: 2000, f: 'R$ 2.000,00'}, pravda],
          ['Maria', {v: 5000, f: 'R$ 5.000,00'}, False],
          ['Alice', {v: 1000, f: 'R$ 1.000,00'}, pravda],
          ['Bob',   {v: 1500, f: 'R$ 1.500,00'}, pravda]
        ]);
        var tabulka = nové google.visualization.Table(dokument.getElementById('table_div'));
        tabulka.draw(Datum, {showRowNumber: pravda});
      }
    </skript>
  </hlava>
  <tělo>
    <div id='table_div'></div>
  </tělo>
</HTML>
?>

(1) No código acima, note que começamos fazendo uma chamada para a API JavaScript do Google (JSAPI).

(2) Em seguida, carregamos a Visualization, na versão 1.0, e sua biblioteca ‘table.

(3) Utilizamos a função de JSAPI setOnLoadCallback atribuindo o manipulador drawTable (ou outro nome que você queira), que é quem de fato deverá criar e definir a tabela.

(4) A DataTable é convertida em uma tabela HTML em que cada coluna deve ser do mesmo tipo de dados suportados (string, boolean, número, atd).

(5) Použijte addColumn() para criar uma coluna, passando como parâmetro o tipo e o nome do dado.

(6) Use addRows() para criar as linhas da tabela, IE, inserir seus dados propriamente dito. As linhas são delimitadas por colchetes [] e a informação de cada célula é separada por vírgula. Perceba ali uma notação “v” a “f”, que suponho que signifique value e field, respektive, IE, o valor real da célula e o rótulo a ser exibido no campo. Isto se faz necessário, pois, como o a referida coluna é deinteiros”, então a correta ordenação poderia ficar prejudicada se fosse tida como strings.

(7) Nakonec, informamos em qual DIV o desenho da tabela será renderizado (table_div) a je připraven!

Na prática

O código acima gera a seguinte Tabela HTML:

Não é mesmo interessante? Todo HTML da tabela foi criado sem que precisássemos escrever um só TABLE, TR ou TD. Samozřejmě, esta foi apenas uma demonstração. Você pode aprofundar seu conhecimento e descobrir outras possibilidades de configuração para trabalhar com as tabelas através da Table Charts.

Galeria

Existe ainda inúmeros outros recursos interessantes que o Google Charts Gallery oferece. Há uma variedade de gráficos que são otimizados para atender às necessidades de visualização de dados. Os gráficos são baseados na tecnologia HTML5/SVG puro (adotando VML para antigas versões do IE), por isso não são necessários plugins. Esses gráficos podem ser adicionados a sua página em apenas alguns passos simples.

Písma

Celkový počet přístupů: 5924

Zanech odpověď

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena *