Übersicht
Eine Tabelle, die sortiert und durch Seiten sortiert werden kann. Tabellenzellen können mit Formatstrings oder durch direktes Einfügen von HTML als Zellenwerte formatiert werden. Numerische Werte sind rechtsbündig ausgerichtet; boolesche Werte werden als Häkchen angezeigt. Nutzer können einzelne Zeilen entweder mit der Tastatur oder mit der Maus auswählen. Nutzer können Zeilen sortieren, indem sie auf die Spaltenüberschriften klicken. Die Kopfzeile bleibt fixiert, wenn der Nutzer scrollt. Die Tabelle löst eine Reihe von Ereignissen aus, die der Nutzerinteraktion entsprechen.
Beispiel
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
</script>
</head>
<body>
<div id="table_div"></div>
</body>
</html>
Wird geladen
Der Paketname „google.charts.load“ lautet "table".
google.charts.load('current', {packages: ['table']});
Der Klassenname der Visualisierung lautet google.visualization.Table.
var visualization = new google.visualization.Table(container);
Datenformat
Die DataTable wird in eine entsprechende HTML-Tabelle konvertiert, wobei jede Zeile/Spalte in der DataTable in eine Zeile/Spalte in der HTML-Tabelle konvertiert wird. Jede Spalte muss denselben Datentyp haben und alle Standarddatentypen für die Visualisierung werden unterstützt (String, Boolesch, Zahl usw.).
Benutzerdefinierte Eigenschaften
Mit der Methode setProperty() von DataTable können Sie Datentabellenelementen die folgenden benutzerdefinierten Eigenschaften zuweisen.
| Eigenschaftsname | Gilt für | Beschreibung |
|---|---|---|
| className | Handy | Ein Stringklassenname, der einer einzelnen Zelle zugewiesen werden soll. Hiermit können Sie einzelnen Zellen CSS-Stile zuweisen. |
| Stil | Handy | Eine Stilzeichenfolge, die der Zelle inline zugewiesen werden soll. Dadurch werden CSS-Klassenstile überschrieben, die auf diese Zelle angewendet wurden. Damit dies funktioniert, müssen Sie das Attribut „allowhtml=true“ festlegen. Beispiel: 'border: 1px solid green;'. |
Beispiel
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});
Konfigurationsoptionen
| Name | |
|---|---|
| allowHtml |
Wird die Richtlinie auf „true“ gesetzt, werden formatierte Werte von Zellen, die HTML-Tags enthalten, als HTML gerendert. Wenn die Richtlinie auf „false“ gesetzt ist, funktionieren die meisten benutzerdefinierten Formatierer nicht richtig. Typ: Boolesch
Standard: false
|
| alternatingRowStyle |
Bestimmt, ob ungeraden und geraden Zeilen ein abwechselnder Farbstil zugewiesen wird. Typ: Boolesch
Standardeinstellung:true
|
| cssClassNames |
Ein Objekt, in dem jeder Attributname ein Tabellenelement beschreibt und der Attributwert ein String ist, mit dem eine Klasse definiert wird, die diesem Tabellenelement zugewiesen werden soll. Mit dieser Eigenschaft weisen Sie bestimmten Elementen Ihrer Tabelle benutzerdefinierten CSS-Code zu. Weisen Sie zur Verwendung dieses Attributs ein Objekt zu, wobei der Attributname das Tabellenelement angibt und der Attributwert ein String ist, der einen Klassennamen angibt, der diesem Element zugewiesen werden soll. Anschließend müssen Sie einen CSS-Stil für diese Klasse auf Ihrer Seite definieren. Die folgenden Attributnamen werden unterstützt:
Beispiel:
Hinweis:In CSS überschreiben einige Elemente andere. Wenn Sie beispielsweise eine Hintergrundfarbe für ein Typ:Objekt
Standard:null
|
| firstRowNumber |
Die Zeilennummer der ersten Zeile in der dataTable. Wird nur verwendet, wenn showRowNumber „wahr“ ist. Typ:Zahl
Standard: 1
|
| frozenColumns |
Die Anzahl der Spalten von links, die fixiert werden. Diese Spalten bleiben an ihrer Position, wenn horizontal durch die verbleibenden Spalten gescrollt wird. Wenn Typ:Zahl
Standard:null
|
| height |
Legt die Höhe des Containerelements der Visualisierung fest. Sie können Standard-HTML-Einheiten verwenden (z. B. „100 px“, „80 em“, „60“). Wenn keine Einheiten angegeben sind, wird angenommen, dass Pixel eine Zahl sind. Wenn Sie nichts angeben, passt der Browser die Höhe automatisch an die Tabelle an, wobei die Größe dabei so weit wie möglich verkleinert wird. Wird sie kleiner als die erforderliche Höhe, wird in der Tabelle eine vertikale Bildlaufleiste hinzugefügt. Die Kopfzeile ist ebenfalls fixiert. Bei der Einstellung „100 %“ wird die Tabelle so weit wie möglich in das Containerelement maximiert. Typ: String
Standard:automatisch
|
| seite |
Ob und wie das Durchblättern der Daten aktiviert werden kann Wählen Sie einen der folgenden Stringwerte aus:
Typ: String
Standardeinstellung: „disable“
|
| pageSize |
Die Anzahl der Zeilen pro Seite, wenn Paging mit der Seitenoption aktiviert ist. Typ:Zahl
Standard: 10
|
| pagingButtons |
Legt eine bestimmte Option für die Seitenschaltflächen fest. Es gibt folgende Optionen:
Typ:String oder Zahl
Standardeinstellung: „auto“
|
| rtlTable |
Bietet grundlegende Unterstützung für linksläufige Sprachen (z. B. Arabisch oder Hebräisch) durch Umkehren der Spaltenreihenfolge der Tabelle, sodass Spalte 0 die Spalte ganz rechts und die letzte Spalte ganz links ist. Dies wirkt sich nicht auf den Spaltenindex in den zugrunde liegenden Daten aus, sondern nur auf die Anzeigereihenfolge. Die vollständige bidirektionale Sprachanzeige (BiDi) wird von der Tabellenvisualisierung nicht unterstützt, selbst wenn diese Option aktiviert ist. Diese Option wird ignoriert, wenn Sie das Paging (über die Seitenoption) aktivieren oder wenn die Tabelle Bildlaufleisten enthält, weil Sie Optionen für Höhe und Breite angegeben haben, die kleiner als die erforderliche Tabellengröße sind. Typ: Boolesch
Standard: false
|
| scrollLeftStartPosition |
Legt die horizontale Scrollposition in Pixeln fest, wenn die Tabelle horizontale Bildlaufleisten hat, da Sie die Eigenschaft für die Breite festgelegt haben. Die Tabelle wird geöffnet und um so viele Pixel über die Spalte ganz links hinaus gescrollt. Typ:Zahl
Standard: 0
|
| showRowNumber |
Wenn die Richtlinie auf „true“ gesetzt ist, wird die Zeilennummer als erste Spalte der Tabelle angezeigt. Typ: Boolesch
Standard: false
|
| Sortieren |
Ob und wie Spalten sortiert werden sollen, wenn der Nutzer auf eine Spaltenüberschrift klickt. Wenn das Sortieren aktiviert ist, sollten Sie auch die Eigenschaften sortAscending und sortColumn einrichten. Wählen Sie einen der folgenden Stringwerte aus:
Typ: String
Standard: „Aktivieren“
|
| sortAscending |
Die Reihenfolge, in der die anfängliche Sortierspalte sortiert ist. "True" für aufsteigend, "false" für absteigend. Wird ignoriert, wenn Typ: Boolesch
Standardeinstellung:true
|
| sortColumn |
Ein Index einer Spalte in der Datentabelle, nach der die Tabelle anfänglich sortiert ist. Die Spalte ist mit einem kleinen Pfeil gekennzeichnet, der die Sortierreihenfolge angibt. Typ:Zahl
Standard: -1
|
| startPage |
Die erste Tabellenseite, die angezeigt werden soll. Wird nur verwendet, wenn sich Typ:Zahl
Standard: 0
|
| width |
Legt die Breite des Containerelements der Visualisierung fest. Sie können Standard-HTML-Einheiten verwenden (z. B. „100 px“, „80 em“, „60“). Wenn keine Einheiten angegeben sind, wird angenommen, dass Pixel eine Zahl sind. Wenn keine Angabe erfolgt, passt der Browser die Breite automatisch an die Tabelle an. Dabei wird die Breite so weit wie möglich verkleinert. Wird sie unter der erforderlichen Breite festgelegt, wird eine horizontale Bildlaufleiste hinzugefügt. Bei der Einstellung „100 %“ wird die Tabelle so weit wie möglich in das Containerelement maximiert. Typ: String
Standard:automatisch
|
Methoden
| Methode | |
|---|---|
draw(data, options) |
Zeichnet die Tabelle. Return Type: Kein
|
getSelection() |
Standardmäßige Implementierung von getSelection. Auswahlelemente sind Zeilenelemente. Kann mehr als eine ausgewählte Zeile zurückgeben. Die Zeilenindexe im Auswahlobjekt beziehen sich unabhängig von Nutzerinteraktionen (Sortieren, Paging usw.) auf die ursprüngliche Datentabelle. Beachten Sie, dass die Auswahl bzw. die Auswahlen ein-/ausschalten: Wenn Sie beim ersten Mal auf eine Zelle klicken, wird sie ausgewählt. Wenn Sie noch einmal auf die Zelle klicken, wird die Auswahl aufgehoben. Dies führt zu einem Auswahlereignis, aber nicht zu den ausgewählten Elementen im abgerufenen Auswahlobjekt. Rückgabetyp:Array von Auswahlelementen
|
getSortInfo() |
Rufen Sie diese Methode auf, um Informationen zum aktuellen Sortierstatus einer Tabelle abzurufen, die sortiert wurde (in der Regel vom Nutzer, der auf eine Spaltenüberschrift geklickt hat, um die Zeilen nach einer bestimmten Spalte zu sortieren). Wenn Sie die Sortierung deaktiviert haben, funktioniert diese Methode nicht. Wenn Sie Daten nicht im Code sortiert haben oder der Nutzer die Daten nicht durch Auswahl von Code sortiert hat, werden die Standardsortierwerte zurückgegeben. Rückgabetyp:Ein Objekt mit den folgenden Eigenschaften:
|
setSelection(selection) |
Standardmäßige Implementierung von Return Type: Kein
|
clearChart() |
Löscht das Diagramm und gibt alle zugewiesenen Ressourcen frei. Return Type: Kein
|
Ereignisse
| Name | |
|---|---|
| auswählen |
Standardauswahlereignis, aber nur ganze Zeilen können ausgewählt werden. Eigenschaften: Keine
|
| seite |
Wird ausgelöst, wenn Nutzer auf eine Schaltfläche für die Seitennavigation klicken. Eigenschaften:
page: Zahl. Der Index der Seite, zu der navigiert werden soll. |
| Sortieren |
Wird ausgelöst, wenn Nutzer auf eine Spaltenüberschrift klicken und die Sortieroption nicht „deaktivieren“ ist. Eigenschaften: Ein Objekt mit den folgenden Eigenschaften:
|
| bereit |
Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden aufrufen möchten, nachdem Sie es gezeichnet haben, sollten Sie vor dem Aufrufen der Zeichenmethode einen Listener für dieses Ereignis einrichten. Dieser Listener sollte erst nach dem Auslösen des Ereignisses aufgerufen werden. Eigenschaften: Keine
|
Formatierer
Hinweis : Die Tabellenvisualisierung enthält eine Reihe von Formatierungsobjekten, die durch generische Formatierer ersetzt wurden. Diese verhalten sich genauso, können aber in jeder Visualisierung verwendet werden.
Die folgende Tabelle zeigt den alten Tabellenformatierer und sein entsprechendes generisches Formatierer. Beim Schreiben von neuem Code sollten Sie den generischen Formatierer verwenden.
| Tabellenformatierer | |
|---|---|
| TableArrowFormat | google.visualization.ArrowFormat |
| TableBarFormat | google.visualization.BarFormat |
| TableColorFormat | google.visualization.ColorFormat |
| TableDateFormat | google.visualization.DateFormat |
| TableNumberFormat | google.visualization.NumberFormat |
| TablePatternFormat | google.visualization.PatternFormat |
Wichtig:Formatierer verwenden zur Formatierung von Text häufig HTML. Daher sollten Sie die Option allowHtml auf true festlegen.
Datenrichtlinie
Sämtlicher Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.