બિલ્ડીંગ એચટીએમએલ કોષ્ટકો “Google Visualization API”

કેવી રીતે તમારી માહિતી અને એક સુંદર દૃશ્ય સાથે કોઠામાં અને હજુ સૉર્ટ કરવાનો પ્રયત્ન પૃષ્ઠને પ્રદર્શિત વિશે, બધા કોઈપણ લખ્યા વગર ગતિશીલ બાંધવામાં “કોષ્ટક એચટીએમએલ”?

રજૂઆત

એક 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" />
    <સ્ક્રિપ્ટ પ્રકાર='text/javascript' src='https://www.google.com/jsapi'></સ્ક્રિપ્ટ>
    <સ્ક્રિપ્ટ પ્રકાર='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, એફ: 'R$ 2.000,00'}, સાચું],
          ['Maria', {v: 5000, એફ: 'R$ 5.000,00'}, ખોટા],
          ['Alice', {v: 1000, એફ: 'R$ 1.000,00'}, સાચું],
          ['Bob',   {v: 1500, એફ: 'R$ 1.500,00'}, સાચું]
        ]);
        હતી table = નવી google.visualization.Table(દસ્તાવેજ.getElementById('table_div'));
        table.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) એક DataTable é convertida em uma tabela HTML em que cada coluna deve ser do mesmo tipo de dados suportados (string, boolean, 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” ઈ “એફ”, 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) Finalmente, 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.

સૂત્રોના

હિટ કુલ સંખ્યા: 5928

એક જવાબ છોડો

તમારું ઇમેઇલ સરનામું પ્રકાશિત કરવામાં આવશે નહીં. જરૂરી ક્ષેત્રો સાથે ચિહ્નિત થયેલ છે *