Wichtig:Der Bereich „Bilddiagramme“ von Google Chart Tools wurde am 20. April 2012 offiziell eingestellt. Es wird gemäß unserer Richtlinie zur Einstellung von Produkten und Diensten weiterhin funktionieren.
Übersicht
Einzelne oder mehrere Sparklines, die mit Bildern über die Google Charts API gerendert werden. Die Bilder sind in einer HTML-Tabelle enthalten.
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:["imagesparkline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Revenue', 'Licenses'], [435, 132], [438, 131], [512, 137], [460, 142], [491, 140], [487, 139], [552, 147], [511, 146], [505, 151], [509, 149] ]); var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div')); chart.draw(data, {width: 120, height: 40, showAxisLines: false, showValueLabels: false, labelPosition: 'left'}); } </script> </head> <body> <div id="chart_div" style="width: 120px; height: 40px;"></div> </body> </html>
Wird geladen
Der Paketname von google.charts.load
lautet "imagesparkline"
.
google.charts.load("current", {packages: ["imagesparkline"]});
Der Klassenname der Visualisierung lautet google.visualization.ImageSparkLine
.
var visualization = new google.visualization.ImageSparkLine(container);
Datenformat
Beliebige Anzahl von Spalten. Alle Spalten müssen Zahlen sein. Jede Spalte wird als einzelne Wortgrafik angezeigt.
Konfigurationsoptionen
Name | Typ | Standard | Beschreibung |
---|---|---|---|
Farbe | String | Gibt eine Farbe an, die für alle Diagramme verwendet werden soll.
Ein String im Format #rrggbb. Beispiel: „#00cc00“.
Wird nur verwendet, wenn die Option colors nicht angegeben ist. |
|
Farben | Stringarray | Standardfarben | Die für die Datenspalten zu verwendenden Farben. Ein String-Array, bei dem jedes Element ein String im Format #rrggbb ist. Beispiel: „#00cc00“. Die Farbe i wird für die Datenspalte i verwendet. Wenn die Anzahl der Farben kleiner als die Anzahl der Spalten ist, wird die Farbauswahl umgebrochen. |
fill | boolean | false | Wenn „true“, wird der Bereich unterhalb der Linie in der Farbe dargestellt. |
height | Zahl | Containerhöhe | Höhe der Bilder in Pixel. |
labelPosition | String | keine | Die Position der Labels. Unterstützte Werte sind „none“, „left“ und „right“. |
max | Array von Zahlen | Der maximale Datenwert jeder Wortgrafik | Der höchste Wert für den Datenwertbereich jeder Sparkline. Der Index im Array muss mit dem Spaltenindex in der DataTable übereinstimmen. Wenn alle Werte null sind, ist dies der Höchstwert in der Reihe. |
Min. | Array von Zahlen | Der minimale Datenwert jeder Wortgrafik | Der niedrigste Wert für den Datenwertbereich jeder Sparkline. Der Index im Array muss mit dem Spaltenindex in der DataTable übereinstimmen. Wenn alle Werte null sind, ist dies der Mindestwert in der Reihe. |
Achsen einblenden | boolean | true | Bei „true“ werden Achsenlinien angezeigt. Wenn „false“ ist, ist dies nicht der Fall. Der Standardwert für „showValueLabels“ ist „false“. |
Wertlabels anzeigen | boolean | „true“, es sei denn, „showAxisLines“ ist „false“. | Bei „true“ werden Labels für die Wertachse angezeigt. |
title | Stringarray | Keine Titel angezeigt | Für jede Wortgrafik zu verwendende Titel. |
width | Zahl | Containerbreite | Breite des Diagramms in Pixeln. |
Layout | String | „v“ | Vertikales oder horizontales Layout: „v“ für vertikal und „h“ für horizontal. |
Methoden
Methode | Rückgabetyp | Beschreibung |
---|---|---|
draw(data, options) |
keine | Zeichnet das Diagramm. |
getSelection() |
Array von Auswahlelementen | Gibt die Indexe der ausgewählten Diagramme als Array von Objekten zurück. Jedes Objekt hat eine Spalteneigenschaft, die die Spaltennummer einer ausgewählten Wortgrafik enthält. Kann mehrere ausgewählte Spalten zurückgeben. |
setSelection(selection) |
keine | Wählt die angegebenen Sparklines aus und hebt die Auswahl aller nicht angegebenen Sparkline auf. Bei der Auswahl handelt es sich um ein Array mit Objekten mit einer numerischen Property vom Typ column . Dies ist der Index der ausgewählten Sparkline. Weitere Informationen finden Sie unter setSelection() . |
Ereignisse
Name | Beschreibung | Attribute |
---|---|---|
wähle | Standardauswahlereignis. | – |
Datenrichtlinie
Weitere Informationen finden Sie in der Chart API-Protokollierungsrichtlinie.