Gebäude-HTML-Tabellen mit “Visualisierung der Google API”

Wie etwa Anzeigen der Daten tabellarisch dargestellt mit einem schönen visuellen und noch in der Lage zu sortieren und zu paginieren, alles gebaut, dynamisch und ohne irgendwelche schreiben “HTML-Tabelle”?

Präsentation

Die Visualisierung der Google API stellt eine Reihe von Techniken zur Visualisierung Ihrer Daten schnell und einfach. In diesem Beitrag sehen wir die Tabelle-Charts.

Betrieb

Beispiel
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">
  <Kopf>    
    <Meta charset="ISO-8859-1" />
    <Skripttyp="Text/Javascript" src="Https://www.Google.com/JSAPI "></Skript>
    <Skripttyp="Text/Javascript">
      Google.Laden("Visualisierung", '1', {Pakete:["Tisch"]});
      Google.setOnLoadCallback(drawTable);
      Funktion drawTable() {
        var Daten = Neu Google.Visualisierung.DataTable();
        Daten.addColumn('String', 'Name');
        Daten.addColumn("Anzahl", "Gehalt");
        Daten.addColumn("boolean", "Vollzeit");
        Daten.AddRows([
          ['John',  {v: 2000, (f): 'R' $2.000,00}, wahr],
          ["Maria", {v: 5000, (f): 'R' $5.000,00}, falsch],
          ["Alice", {v: 1000, (f): 'R' $1.000,00}, wahr],
          ["Bob",   {v: 1500, (f): 'R' $1.500,00}, wahr]
        ]);
        var Tabelle = Neu Google.Visualisierung.Tabelle(Dokument.getElementById("Table_div"));
        Tabelle.zeichnen(Daten, {showRowNumber: wahr});
      }
    </Skript>
  </Kopf>
  <Körper>
    <Div-id="Table_div"></div>
  </Körper>
</html>
?>

(1) Im obigen code, Beachten Sie, dass wir beginnen, indem Sie einen Aufruf der JavaScript-API von Google (JSAPI).

(2) Dann, Wir führen Visualisierung, in der version 1.0, und Ihre Bibliothek ' Tabelle’.

(3) Wir verwenden die Funktion der JSAPI setOnLoadCallback den Handler zuweisen drawTable (oder einen anderen Namen, die Sie möchten), Who is Who sollte in der Tat erstellen und den Tisch.

(4) Die DataTable wird in einer HTML-Tabelle umgewandelt in dem jede Spalte den gleichen Datentyp unterstützt werden müssen (Zeichenfolge, Boolescher Wert, Anzahl, etc.).

(5) Nutzung der addColumn() Erstellen Sie eine Spalte, als Parametertyp und dem angegebenen Namen übergeben.

(6) Verwendung AddRows() die Zeilen der Tabelle erstellen, dh, Geben Sie Ihre Daten selbst. Linien sind durch eckige Klammern abgegrenzt. [] und die Informationen der einzelnen Zellen ist durch ein Komma getrennt. Es eine Notation zu realisieren “v” und “(f)”, Ich nehme an, d.h. Wert und Feld, bzw., dh, der tatsächliche Wert der Zelle und die Beschriftung in das Feld angezeigt werden. Dies ist notwendig, Da, als dieser Spalte ist “ganze Zahlen”, So könnte die richtige Reihenfolge untergraben, wenn es als Zeichenfolgen aufgenommen wurden.

(7) Schließlich, Wir informieren Sie in denen DIV Tabellenentwurf gerendert wird (table_div) und bereit!

In der Praxis

Der obige Code erzeugt die folgende HTML-Tabelle:

Es ist nicht einmal interessant? Alle HTML-Tabelle wurde ohne, dass wir brauchten, um eine einzelne Tabelle schreiben, TR oder TD. Natürlich, Dies war nur eine demonstration. Sie können Ihr Wissen vertiefen und entdecken Sie andere Möglichkeiten zum Arbeiten mit Tabellen durch die Tabelle-Charts.

Galerie

Es gibt auch viele andere coole features, die die Google Diagramme-Galerie Angebote. Es gibt eine Vielzahl an Grafiken, die optimiert sind, um den Bedürfnissen der Datenvisualisierung. Die Grafik basiert auf der reinen HTML5/SVG-Technologie (die Annahme von VML für alte Versionen von Internet Explorer), so gibt es keine Notwendigkeit für plugins. Diese Diagramme können Ihre Seite in wenigen einfachen Schritten hinzugefügt werden.

Schriftarten

Total hits: 5923

Hinterlasse eine Antwort

Die e-Mailadresse wird nicht veröffentlicht. Pflichtfelder sind mit gekennzeichnet. *