Շենքը HTML սեղաններ “Google Visualization API”

Ինչպես մասին ցուցաբերելով ձեր տվյալները կինոմատոգրաֆիստների հետ գեղեցիկ դիտել եւ դեռ կարող է տեսակավորել եւ էջ, բոլորը կառուցվել դինամիկ առանց գրելու որեւէ “Աղյուսակ HTML”?

ներկայացում

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

օրինակ
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">
  <ղեկավար>    
    <meta charset="ISO-8859-1" />
    <script տեսակը='text/javascript' src='https://www.google.com/jsapi'></ձեռագիր>
    <script տեսակը='text/javascript'>
      google.բեռնել('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      ֆունկցիա drawTable() {
        էր տվյալներ = նոր google.visualization.DataTable();
        տվյալներ.addColumn('string', 'Nome');
        տվյալներ.addColumn('number', 'Salário');
        տվյալներ.addColumn('boolean', 'Tempo integral');
        տվյալներ.addRows([
          ['João',  {v: 2000, f: 'R$ 2.000,00'}, ճիշտ],
          ['Maria', {v: 5000, f: 'R$ 5.000,00'}, կեղծ],
          ['Alice', {v: 1000, f: 'R$ 1.000,00'}, ճիշտ],
          ['Bob',   {v: 1500, f: 'R$ 1.500,00'}, ճիշտ]
        ]);
        էր սեղան = նոր google.visualization.Table(փաստաթուղթ.getElementById('table_div'));
        սեղան.draw(տվյալներ, {showRowNumber: ճիշտ});
      }
    </ձեռագիր>
  </ղեկավար>
  <մարմին>
    <div id- ը='table_div'></div>
  </մարմին>
</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 (լարային, բուլյան, número, եւ այլն).

(5) Use o 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, այլ կերպ ասած, 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çãov” ե “f”, que suponho que signifique value e field, համապատասխանաբար, այլ կերպ ասած, 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) վերջապես, informamos em qual DIV o desenho da tabela será renderizado (table_div) եւ պատրաստ է!

գործնականում

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. պարզ, 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.

աղբյուրները

Ընդամենը մուտքերը: 5923

Թողնել Պատասխանել

Ձեր էլ. Փոստի հասցեն չի հրապարակվելու. Պահանջվող դաշտերը նշված են *