Tablas HTML de construcción con “Visualización Google API”

Por qué mostrar sus datos tabulados con una visual agradable y siendo capaz de ordenar y paginar, todo lo construido dinámicamente y sin escribir cualquier “Tabla HTML”?

Presentación

El Visualización Google API presenta un conjunto de técnicas para la visualización de sus datos de forma rápida y sencilla. En este Post vamos a ver la Cartas de la mesa.

Operación

Ejemplo
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">
  <cabeza>    
    <meta charset="ISO-8859-1" />
    <tipo de secuencia de comandos=texto 'javascript' fuente=' https://www.Google.com/jsapi '></secuencia de comandos>
    <tipo de secuencia de comandos=texto 'javascript'>
      Google.de la carga('visualización', '1', {paquetes:['mesa']});
      Google.setOnLoadCallback(drawTable);
      función drawTable() {
        var fecha = nuevo Google.visualización.Tabla de datos();
        fecha.addColumn('cadena', 'Nombre');
        fecha.addColumn('número', 'Sueldo');
        fecha.addColumn('booleano', 'Tiempo completo');
        fecha.AddRows([
          ['John',  {v: 2000, (f): 'R$ 2.000,00'}, VERDADERO],
          ['María', {v: 5000, (f): 'R$ ' 5,000.00}, falso],
          ['Alicia', {v: 1000, (f): 'R$ 1.000,00'}, VERDADERO],
          ['Bob',   {v: 1500, (f): 'R$ 1.500,00'}, VERDADERO]
        ]);
        var tabla = nuevo Google.visualización.Tabla(documento.getElementById('table_div'));
        tabla.sorteo(fecha, {showRowNumber: VERDADERO});
      }
    </secuencia de comandos>
  </cabeza>
  <cuerpo>
    <id de la div='table_div'></div>
  </cuerpo>
</HTML>
?>

(1) En el código anterior, Tenga en cuenta que empezamos haciendo una llamada a la API de JavaScript de Google (JSAPI).

(2) Entonces, Llevamos Visualización, en la versión 1.0, y su biblioteca ' tabla’.

(3) Utilizamos la función de JSAPI setOnLoadCallback asignar al controlador de drawTable (u otro nombre que desea), Quién es quién en realidad debe crear y configurar la tabla.

(4) El Tabla de datos se convierte en una tabla HTML en la que cada columna debe ser el mismo tipo de datos compatible (cadena, Boolean, número, etcetera).

(5) Uso el addColumn() para crear una columna, pasando como tipo de parámetro y el nombre.

(6) Uso AddRows() para crear las filas de la tabla, IE, Introduzca sus datos. Las líneas están delimitadas por corchetes [] y la información de cada célula está separada por una coma. Realizar allí una notación “v” y “(f)”, que supongo que significa valor y campo, respectivamente, IE, el valor real de la célula y la etiqueta que se mostrará en el campo. Esto es necesario, porque, como esta columna es “números enteros”, así el orden correcto puede ser socavado si se toma como cadenas.

(7) Finalmente, Le informamos en que hará de mesa de diseño DIV (table_div) y listo!

En la práctica

El código anterior genera la siguiente tabla HTML:

No es incluso interesante? Toda tabla HTML se creó sin que teníamos que escribir una sola tabla, TR o TD. Claro, Esto fue sólo una manifestación. Puedes profundizar tus conocimientos y descubrir otras posibilidades para trabajar con las tablas a través de la Cartas de la mesa.

Galería

También hay muchos otros fresco que cuenta la Galería de gráficos de Google ofrece. Hay una gran variedad de gráficos que están optimizadas para satisfacer las necesidades de visualización de datos. Los gráficos están basados en la tecnología pura HTML5/SVG (adopción de VML para versiones antiguas de IE), así que no hay necesidad de plugins. Estos gráficos se pueden añadir a tu página en pocos pasos.

Fuentes

Total hits: 5928

Contesta

Su dirección de correo electrónico no será publicado. Campos requeridos están marcados con *