HTML tabulas veidošanas “Vizualizācija Google API”

Kā par parādīt datus tabulā ar jauku vizuālo un joprojām varēs kārtot un paginate, viss, kas uzcelta dinamiski un bez rakstiski jebkurā “HTML tabula”?

Prezentācija

Uz Vizualizācija Google API prezentē datu vizualizācijas metožu kopumu, ātri un viegli. Šajā pastu, mēs redzēsim Tabulas, diagrammas.

Operācija

Piemērs
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">
  <vadītājs>    
    <meta charset="ISO-8859-1" />
    <skripta tips="text/javascript" src="https://www.Google.com/jsapi '></skripta>
    <skripta tips="text/javascript">
      Google.slodze('vizualizācijas', '% 1', {Rental Cars:["galds"]});
      Google.setOnLoadCallback(drawTable);
      funkcija drawTable() {
        var datums = jauns Google.vizualizācijas.DataTable();
        datums.addColumn("virkne", 'Name');
        datums.addColumn("numurs", "Alga");
        datums.addColumn("Būla", "Pilna laika");
        datums.AddRows([
          ["John",  {v: 2000, (f): 'R' $ 2, 000.00}, tiesa],
          ["Maria", {v: 5000, (f): 'R' $ 5, 000.00}, viltus],
          ["Alise", {v: 1000, (f): 'R' $1000,00}, tiesa],
          ['Bob',   {v: 1500, (f): 'R' $ 1, 500.00}, tiesa]
        ]);
        var tabula = jauns Google.vizualizācijas.Tabula(dokumentu.getElementById('table_div'));
        tabula.uzzīmējiet(datums, {showRowNumber: tiesa});
      }
    </skripta>
  </vadītājs>
  <organizācija>
    <div id='table_div'></DIV>
  </organizācija>
</HTML>
?>

(1) Iepriekš kodu, Ņemiet vērā, ka mēs sākam piezvanot uz JavaScript API no Google (JSAPI).

(2) Pēc tam, Mēs veicam Vizualizācijas, versija 1.0, un jūsu bibliotēkā "tabula’.

(3) Mēs izmantojam funkciju JSAPI setOnLoadCallback piešķirot vedējs drawTable (vai citu nosaukumu, kuru vēlaties), personu faktiski vajadzētu izveidot un iestatīt tabulu.

(4) Uz DataTable katrai kolonnai ir jābūt pašu datu tipu, kas atbalsta HTML tabula tiek konvertēta (virkne, Būla vērtība, numurs, u.c.).

(5) Lietošanai addColumn() izveidot kolonnu, iet kā parametra tips un vārds.

(6) Lietošanai AddRows() lai izveidotu tabulas rindas, IE, Iespraust datus pati. Rindas ir norobežoti ar kvadrātiekavām [] un informāciju, kas katrai šūnai ir atdalītiem ar komatu. Realizēt tur notācija “v” un “(f)”, tas laikam nozīmē vērtību un lauku, attiecīgi, IE, faktiskā vērtība šūnā un jāparāda laukā etiķetes. Tas ir nepieciešams, jo, Šajā kolonnā ir “veseli skaitļi”, tik pareizo secību varētu tikt mazināta, ja tas tika pieņemts kā virknes.

(7) Beidzot, Informējam, ka jums, kas rādīs DIV tabulas noformējums (table_div) un gatavs!

Praksē

Kods iepriekš ģenerē HTML tabulā:

Tas nav pat interesants? Visas HTML tabula tika izveidots, neizsaucot mums vajadzēja rakstīt vienu tabulu, TR vai TD. protams, Tas bija tikai demonstrācija. Var padziļināt savas zināšanas un atklāt citas iespējas strādāt ar tabulām, ar Tabulas, diagrammas.

Galerija

Tur ir arī daudzas citas atdzist funkcijas, kas Google kartes galerija piedāvājumi. Pastāv dažādas grafikas, kas ir optimizēts datu vizualizācijas vajadzību apmierināšanai. Grafika ir balstīti uz HTML5/SVG tīra tehnoloģija (vecās versijas IE pieņemot VML), tāpēc nav nepieciešams plugins. Šīm diagrammām var pievienot jūsu lapas ar tikai dažiem vienkāršiem soļiem.

Fonti

Kopā hits: 5928

atstāt atbildi

E-pasta adrese netiks publicēta. Obligātie lauki ir atzīmēti ar *