Tabelle HTML edificio con “Visualizzazione Google API”

Dici di visualizzare i dati tabulati con una bella visuale e ancora essere in grado di ordinare e impaginare, tutto costruito in modo dinamico e senza scrivere qualsiasi “Tabella HTML”?

Presentazione

A Visualizzazione Google API presenta una serie di tecniche per la visualizzazione dei dati in modo facile e veloce. In questo Post vedremo il Tabella grafici.

Funzionamento

Esempio
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">
  <testa>    
    <meta charset="ISO-8859-1" />
    <tipo di script='text/javascript' src=' https://www.Google.com/jsapi '></script>
    <tipo di script='text/javascript'>
      Google.carico('visualizzazione', '1', {pacchetti:['tabella']});
      Google.setOnLoadCallback(drawTable);
      funzione drawTable() {
        var Data = Nuovo Google.visualizzazione.DataTable();
        Data.addColumn('stringa', 'Nome');
        Data.addColumn('numero', 'Stipendio');
        Data.addColumn('boolean', 'Tempo pieno');
        Data.AddRows([
          ['John',  {v: 2000, (f): 'R' $ 2.000,00}, VERO],
          ['Maria', {v: 5000, (f): 'R' $ 5.000,00}, false],
          ['Alice', {v: 1000, (f): 'R' $ 1.000,00}, VERO],
          ['Bob',   {v: 1500, (f): 'R' $ 1.500,00}, VERO]
        ]);
        var tavolo = Nuovo Google.visualizzazione.tavolo(documento.getElementById('table_div'));
        tavolo.disegnare(Data, {showRowNumber: VERO});
      }
    </script>
  </testa>
  <corpo>
    <div id='table_div'></div>
  </corpo>
</HTML>
?>

(1) Nel codice sopra, Si noti che iniziamo effettuando una chiamata all'API JavaScript di Google (JSAPI).

(2) Quindi, Portiamo Visualizzazione, nella versione 1.0, e libreria ' tabella’.

(3) Utilizziamo la funzione di JSAPI setOnLoadCallback assegnando il gestore drawTable (o un altro nome che si desidera), chi in realtà dovrebbe creare e impostare la tabella.

(4) A DataTable viene convertito in una tabella HTML in cui ogni colonna deve essere dello stesso tipo di dati supportato (stringa, Boolean, numero, ecc).

(5) Uso la addColumn() per creare una colonna, passando come parametro type e il nome specificato.

(6) Uso AddRows() per creare le righe della tabella, IE, Inserisci i tuoi dati se stesso. Linee sono delimitati da parentesi quadre [] e le informazioni di ogni cellula sono separate da una virgola. Ci realizzare una notazione “v” e “(f)”, Suppongo che significa valore e campo, rispettivamente, IE, il valore effettivo della cella e l'etichetta da visualizzare nel campo. Ciò è necessario, perché, Poiché questa colonna è “numeri interi”, così l'ordine corretto potrebbe essere compromessa se si sono stati presi come stringhe.

(7) Infine, Vi informiamo in cui verrà eseguito il rendering di progettazione tabella DIV (table_div) e pronto!

In pratica

Il codice precedente genera la seguente tabella HTML:

Non è anche interessante? Tutte le tabelle HTML è stato creato senza che abbiamo bisogno di scrivere una singola tabella, TR o TD. Naturalmente,, Questa è stata solo una dimostrazione. Potrete approfondire la vostra conoscenza e scoprire altre possibilità di lavorare con le tabelle attraverso la Tabella grafici.

Galleria

C'è anche molti altri divertente le caratteristiche che il Galleria di Google Charts Offerte. Ci sono una varietà di elementi grafici che sono ottimizzati per soddisfare le esigenze di visualizzazione dei dati. La grafica si basa sulla tecnologia HTML5/SVG pura (l'adozione di VML per vecchie versioni di IE), C'è nessun bisogno di plugin. Questi grafici possono essere aggiunti alla tua pagina in pochi semplici passi.

Tipi di carattere

Visite totali: 5923

Lasciare una risposta

L'indirizzo email non verrà pubblicato. Campi obbligatori sono contrassegnati con *