Zgrada HTML tabele sa “Vizuelizacija Google API”

Kako bi bilo prikazuju vaše podatke uvršteni u lepo vizuelnom i dalje moći da sortirate i paginate, Sve je izgrađena dinamički i bez pisanja bilo “HTML tabela”?

Prezentacija

Na Vizuelizacija Google API predstavlja skup tehnika za vizualizaciju vaših podataka brzo i lako. U ovom Post će vidimo se Tabela grafikoni.

Operacija

Primer
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">
  <glava>    
    <Meta charset="ISO-8859-1" />
    <vrsta skripte=„tekst/javascript” src=' https://www.Google.com/jsapi '></Skripta>
    <vrsta skripte=„tekst/javascript”>
      Google.Učitavanje(„vizualizacija”, „1', {paketi:[„Tabela”]});
      Google.setOnLoadCallback(drawTable);
      Funkcija drawTable() {
        Var Datum = novi Google.vizualizacija.DataTable();
        Datum.addColumn(„niska”, „Ime”);
        Datum.addColumn(„broj”, „Plata”);
        Datum.addColumn(„boolean”, „Puno radno vreme”);
        Datum.AddRows([
          [„John”,  {v: 2000, (f): „R” $2,000.00}, Istina],
          [„Maria”, {v: 5000, (f): „R” $5,000.00}, FALSE],
          [„Alice”, {v: 1000, (f): „R” 1000,00}, Istina],
          [„Bob”,   {v: 1500, (f): „R” $1,500.00}, Istina]
        ]);
        Var Tabela = novi Google.vizualizacija.Tabela(dokument.getElementById(„table_div”));
        Tabela.Nacrtaj(Datum, {showRowNumber: Istina});
      }
    </Skripta>
  </glava>
  <telo>
    <div id=„table_div”></div>
  </telo>
</HTML>
?>

(1) U gornju šifru, Imajte na umu da počnemo tako što je zvao da se JavaScript API Google (JSAPI).

(2) Onda, Mi nosimo Vizualizacija, u verziji 1.0, i vaša biblioteka ' sto’.

(3) Koristimo funkciju od JSAPI setOnLoadCallback Dodeljivanje rukovalac drawTable (ili drugi naziv koji želite), Ko je ko u stvari treba da kreirate i postavi sto.

(4) Na DataTable konvertuje u HTML tabelu u kojoj svaka kolona mora da je isti tip podataka podržava (niska, Boolean, broj, i sl).

(5) Koristi se addColumn() da biste kreirali kolonu, koja predstavlja kao tip parametra i datim imenom.

(6) Koristi AddRows() da biste kreirali redove tabele, IE, Umetanje podataka samog. Redovi su razgraničena između uglastih zagrada [] i informacije o svakoj ćeliji je odvojene zarezom. Shvatila je notacija “v” i “(f)”, što verovatno znači vrednost i polje, odnosno, IE, stvarnu vrednost u ćeliji, a oznaka da bi bile prikazane u polju. Ovo je neophodno, Jer, kao što je ova kolona “celi brojevi”, Tako ispravan naručivanje mogao biti potkopali ako to snimljene kao niske.

(7) Konačno, Obaveštavamo vas u kojoj će prikazati DIV dizajna tabele (table_div) i spremna!

U praksi

Gorenavedeni kod generiše HTML tabeli:

To nije ni zanimljivo? Svi HTML tabela je kreiran bez da nam je potrebno za pisanje jedne tabele, TR ili TD. naravno, Ovo je bila samo demonstracija. Možete da prodube svoje znanje i otkriti druge mogućnosti za rad sa tabelama kroz na Tabela grafikoni.

Galerija

Tu je i mnoge druge kul funkcije koje su Google mape galerija nudi. Postoje razne grafike koje su optimizovane da zadovolji potrebe vizualizacije podataka. Grafika se zasnivaju na HTML5/SVG čista tehnologija (usvajanje VML za stare verzije programa IE), Tako da nema potrebe za dodatnih komponenti. Ovi dijagrami se mogu dodati vaše stranice u samo nekoliko jednostavnih koraka.

Fontovi

Ukupno pogodaka: 5928

ostavi odgovor

Na vaša e-mail adresa neće biti objavljene. Obavezna polja su označena sa *