Übersicht
Eine Tabelle, die sortiert und geräumt werden kann. Tabellenzellen können mit Formatstrings oder durch direktes Einfügen von HTML als Zellenwert 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 beim Scrollen des Nutzers gleich. 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 von 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. Alle Spalten müssen denselben Datentyp haben und alle Standarddatentypen der Visualisierung werden unterstützt (String, boolescher Wert, Zahl usw.).
Benutzerdefinierte Eigenschaften
Mit der Methode setProperty() von DataTable können Sie Datentabellenelementen die folgenden benutzerdefinierten Attribute zuweisen.
| Eigenschaftsname | Gilt für | Beschreibung |
|---|---|---|
| Klassenname | Zelle | Ein Stringklassenname, der einer einzelnen Zelle zugewiesen werden soll. Hiermit können Sie einzelnen Zellen CSS-Stile zuweisen. |
| style | Zelle | Ein Stilstring, der der Zelle inline zugewiesen wird. Dadurch werden CSS-Klassenstile überschrieben, die auf diese Zelle angewendet werden. Damit dies funktioniert, musst du die Property 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 |
Wenn die Richtlinie auf „true“ gesetzt ist, werden formatierte Werte von Zellen, die HTML-Tags enthalten, als HTML gerendert. Ist die Richtlinie auf „false“ gesetzt, funktionieren die meisten benutzerdefinierten Formatierungsprogramme nicht richtig. Typ: Boolesch
Standard: false
|
| AlternatingRowStyle |
Bestimmt, ob abwechselnde Farben für ungerade und gerade Zeilen verwendet werden. Typ: Boolesch
Standard: true
|
| CSS-Klassennamen |
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 können Sie bestimmten Elementen der Tabelle benutzerdefiniertes CSS zuweisen. Wenn Sie diese Eigenschaft verwenden möchten, weisen Sie ein Objekt zu, wobei der Eigenschaftsname das Tabellenelement angibt und der Eigenschaftswert ein String ist. Dabei wird ein Klassenname angegeben, der diesem Element zugewiesen werden soll. Anschließend musst du auf deiner Seite einen CSS-Stil für diese Klasse definieren. Die folgenden Attributnamen werden unterstützt:
Beispiel:
Hinweis: In CSS überschreiben einige Elemente andere. Wenn du beispielsweise die Hintergrundfarbe für ein Type: Objekt
Standard: null
|
| firstRowNumber |
Die Zeilennummer für die erste Zeile in der Datentabelle. Wird nur verwendet, wenn „showRowNumber“ wahr ist. Typ: Zahl
Standard: 1
|
| eingefrorene Spalten |
Die Anzahl der Spalten, die links fixiert werden Diese Spalten bleiben beim horizontalen Scrollen der restlichen Spalten erhalten. Wenn für 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“, „80em“ oder „60“. Wenn keine Einheiten angegeben sind, wird die Zahl als Pixel angenommen. Wenn dies nicht angegeben wird, passt der Browser die Höhe automatisch an die Tabelle an und schrumpft dabei so weit wie möglich. Wenn die Größe kleiner als die erforderliche Höhe ist, wird eine vertikale Bildlaufleiste hinzugefügt (die Kopfzeile ist ebenfalls fixiert). Wenn die Richtlinie auf „100 %“ festgelegt ist, wird die Tabelle so weit wie möglich in das Containerelement erweitert. Typ: String
Standard: automatisch
|
| seite |
Ob und wie das Paging durch die Daten aktiviert wird. Wählen Sie einen der folgenden Stringwerte aus:
Typ: String
Standardeinstellung: „Deaktivieren“
|
| Seitengröße |
Die Anzahl der Zeilen auf jeder 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
Standard: „auto“
|
| RTL-Tabelle |
Fügt eine Unterstützung für Sprachen mit Schreibrichtung von rechts nach links hinzu, z. B. Arabisch oder Hebräisch, indem Sie die Spaltenreihenfolge der Tabelle umkehren, sodass Spalte null die Spalte ganz rechts ist und Spalte ganz links steht. Dies wirkt sich nicht auf den Spaltenindex der zugrunde liegenden Daten aus, sondern nur auf die Reihenfolge. Die vollständige Anzeige der bidirektionalen Sprache (BiDi) wird von der Tabellenvisualisierung auch mit dieser Option nicht unterstützt. Diese Option wird ignoriert, wenn Sie Paging über die Seitenoption aktivieren oder wenn die Tabelle Bildlaufleisten hat, weil Sie die Optionen für Höhe und Breite kleiner als die erforderliche Tabellengröße angegeben haben. Typ: Boolesch
Standard: false
|
| ScrollLeftStartPosition |
Legt die horizontale Scrollposition in Pixeln fest, wenn die Tabelle horizontale Bildlaufleisten hat, da Sie die Breite festgelegt haben. Die Tabelle wird so viele Pixel über die Spalte ganz links hinaus geöffnet. Typ: Zahl
Standard: 0
|
| Zeile anzeigen |
Wenn dieser Wert auf „true“ gesetzt ist, wird die Zeilennummer als erste Spalte der Tabelle angezeigt. Typ: Boolesch
Standard: false
|
| sort |
Ob und wie Spalten sortiert werden, wenn der Nutzer auf eine Spaltenüberschrift klickt. Wenn die Sortierung aktiviert ist, sollten Sie auch die Properties sortAscending und sortColumn festlegen. Wählen Sie einen der folgenden Stringwerte aus:
Typ: String
Standardeinstellung: „Aktivieren“
|
| Aufsteigend sortieren |
Die Reihenfolge, in der die erste Sortierspalte sortiert ist. „True“ für aufsteigend, „false“ für absteigend. Wird ignoriert, wenn Typ: Boolesch
Standard: true
|
| Spalte sortieren |
Ein Index einer Spalte in der Datentabelle, nach der die Tabelle anfangs sortiert ist. Die Spalte wird mit einem kleinen Pfeil gekennzeichnet, der die Sortierreihenfolge angibt. Typ:Zahl
Standard: -1
|
| Startseite |
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“, „80em“ oder „60“. Wenn keine Einheiten angegeben sind, wird die Zahl als Pixel angenommen. Wenn nicht angegeben, passt der Browser die Breite automatisch an die Tabelle an und schrumpft dabei so weit wie möglich. Ist die Breite kleiner als erforderlich, wird in der Tabelle eine horizontale Bildlaufleiste hinzugefügt. Wenn die Tabelle auf „100 %“ festgelegt ist, wird die Tabelle so weit wie möglich in das Containerelement erweitert. Typ: String
Standard: automatisch
|
Methoden
| Methode | |
|---|---|
draw(data, options) |
Zeichnet die Tabelle. Rückgabetyp: Keine
|
getSelection() |
Standardimplementierung von getSelection Auswahlelemente sind alle Zeilenelemente. Kann mehrere ausgewählte Zeilen zurückgeben. Die Zeilenindexe im Auswahlobjekt beziehen sich unabhängig von der Nutzerinteraktion (sortieren, paging usw.) auf die ursprüngliche Datentabelle. Hinweis zum Umschalten der Auswahl: Wenn Sie beim ersten Mal auf eine Zelle klicken, wird die Auswahl aufgehoben, wenn Sie noch einmal auf die Zelle klicken. Das führt zu einem Auswahlereignis, aber nicht im ausgewählten Objekt. Rückgabetyp:Array von Auswahlelementen
|
getSortInfo() |
Rufen Sie diese Methode auf, um Informationen zum aktuellen Sortierstatus einer sortierten Tabelle abzurufen (normalerweise der 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 keine Daten 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 Rückgabetyp: Keine
|
clearChart() |
Löscht das Diagramm und gibt alle zugehörigen Ressourcen frei. Rückgabetyp: Keine
|
Ereignisse
| Name | |
|---|---|
| wähle |
Standardmäßiges Auswahlereignis, aber nur ganze Zeilen können ausgewählt werden. Eigenschaften: Keine
|
| seite |
Wird ausgelöst, wenn Nutzer auf eine Schaltfläche zur Seitennavigation klicken Eigenschaften:
page: Zahl. Der Index der Seite, zu der navigiert werden soll. |
| sort |
Wird ausgelöst, wenn Nutzer auf eine Spaltenüberschrift klicken und die Option zum Sortieren nicht „deaktivieren“ lautet Eigenschaften:Ein Objekt mit den folgenden Eigenschaften:
|
| bereit |
Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden nach dem Zeichnen aufrufen möchten, richten Sie einen Listener für dieses Ereignis ein, bevor Sie die Zeichenmethode aufrufen. Rufen Sie sie erst nach dem Auslösen des Ereignisses auf. Eigenschaften:Keine
|
Formatierer
Hinweis: Die Tabellenvisualisierung enthält eine Reihe von Formatierungsobjekten, die durch allgemeine Formatierer ersetzt wurden. Sie verhalten sich auf die gleiche Weise, können jedoch in jeder Visualisierung verwendet werden.
In der folgenden Tabelle sind die alte Formatierung und die entsprechende generische Formatierung aufgeführt. Sie sollten die allgemeine Formatierung verwenden, wenn Sie neuen Code schreiben.
| Tabellenformatierung | |
|---|---|
| Tabellenpfeilformat | google.visualization.ArrowFormat |
| Tabellenbarformat | google.visualization.BarFormat |
| Format für Tabellenfarbe | google.visualization.ColorFormat |
| Format für Tabellendatum | google.visualization.DateFormat |
| Format der Tabellennummer | google.visualization.NumberFormat |
| Tabellenmusterformat | google.visualization.PatternFormat |
Wichtig: Formatierer verwenden oft HTML zur Formatierung des Textes. Daher sollten Sie die Option allowHtml auf true setzen.
Datenrichtlinie
Der gesamte Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.