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
Das generische Bilddiagramm ist ein generischer Wrapper für alle Diagramme, die von der Google Chart API erstellt werden. Lesen Sie die Chart API-Dokumentation, bevor Sie diese Visualisierung verwenden. Im Gegensatz zur Beschränkung von 2.000 in direkten Aufrufen an die Chart API können Sie mit dieser Visualisierung bis zu 16.000 Daten senden.
Alle Daten werden mithilfe einer DataTable oder DataView an die Diagramme übergeben. Außerdem werden einige Labels als Spalten in der Datentabelle übergeben.
Alle anderen Chart API-URL-Parameter (außer chd) werden als Optionen übergeben.
Von: Google
Beispiele
Hier sehen Sie Beispiele für verschiedene Diagrammtypen.
Liniendiagramm
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addColumn('string');
// Row data is [chl, data point, point label]
dataTable.addRows([
['January',40,undefined],
['February',60,'Initial recall'],
['March',60,'Product withdrawn'],
['April',45,undefined],
['May',47,'Relaunch'],
['June',75,undefined],
['July',70,undefined],
['August',72,undefined]
]);
var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};
var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='line_div'></div>
</body>
</html>
Vertikales Balkendiagramm
Beachten Sie, dass Sie in den umschlossenen Balkendiagrammen chxt='x' nicht wie beim Aufrufen des Diagramms selbst angeben müssen. Wenn Sie keine Achse angeben, versucht das allgemeine Bilddiagramm standardmäßig, das Diagramm ordnungsgemäß einzurichten.
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};
var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='bar_div'></div>
</body>
</html>
Kreisdiagramm
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['January',12],
['February',8],
['March',3]
]);
var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
colors:['#3399CC','#00FF00','#0000FF']};
var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='pie_div'></div>
</body>
</html>
Netzdiagramm
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[100,10],
[80,20],
[60,30],
[30,40],
[25,50],
[20,60],
[10,70]
]);
var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));
var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='radar_div'></div>
</body>
</html>
Kartendiagramm
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['DZ',0],
['EG',50],
['MG',50],
['GM',35],
['KE',100],
['ZA',100]
]);
var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='map_div'></div>
</body>
</html>
Wird geladen
Der Paketname google.charts.load lautet „imagechart“
google.charts.load('current', {'packages': ['imagechart']});
Der Klassenname der Visualisierung lautet google.visualization.ImageChart
var visualization = new google.visualization.ImageChart(container_div);
Datenformat
Es gibt zwei allgemeine Datenformate: eines für Kartendiagramme und eines für alle anderen Diagramme. Das einzige numerische Format, das für Daten unterstützt wird, ist der JavaScript-Zahlentyp.
Hinweis: Sie sollten die Stringwerte, die als Daten oder Optionen übergeben werden, nicht URL-codieren.
Diagramme erstellen
Ein Kartendiagramm enthält eine Datentabelle mit zwei erforderlichen Spalten:
- Erste Spalte – [String] Länder- oder Bundesland-/Provinzcode.
- Zweite Spalte – [Zahl] der Wert für dieses Land oder diesen Bundesstaat
Weitere Informationen finden Sie in der Dokumentation zum Kartendiagramm.
Diagramme, die keine Karten sind
Für Diagramme ohne Zuordnung wird eine Datentabelle mit zwei optionalen Spalten (eine am Anfang, eine am Ende) und einer oder mehreren Datenspalten dazwischen verwendet:
- Erste Spalte – [optional, String] Jeder Eintrag stellt ein Label dar, das auf der X-Achse (entspricht dem Parameter
chloderchxl) für Diagramme verwendet wird, die es unterstützen. - Nächste Spalten – eine beliebige Anzahl numerischer Spalten, die jeweils eine Datenreihe darstellen.
- Letzte Spalten – [optional, String] Eine beliebige Anzahl von Stringspalten nach den Datenspalten, wobei jeder Eintrag ein Datenpunktlabel für Diagramme darstellt, die es unterstützen. Wenn Sie diese Spalte verwenden möchten, müssen Sie die Option
annotationColumnsangeben.
Die Daten werden je nach Diagrammtyp unterschiedlich angezeigt. Weitere Informationen finden Sie in der Dokumentation zu Ihrem Diagramm.
Hinweis zu Spaltenindexen:In der Visualisierung des generischen Bilddiagramms werden Stringspalten aus der Datentabelle entfernt, bevor die Tabelle an den Chart API-Dienst gesendet wird. Daher enthalten Spaltenindexe in den auf dieser Seite definierten Optionen, Methoden und Ereignissen die Stringspalten in der Indexzahl. Spaltenindexe in Optionen, die vom Chart API-Dienst verarbeitet werden (z. B. die Option chm), ignorieren die Stringspalten in der Indexanzahl.
Konfigurationsoptionen
Die folgenden Optionen sind für diese Visualisierung definiert. Definieren Sie sie im Optionsobjekt, das an die Methode draw() übergeben wird.
Nicht alle der folgenden Optionen werden für alle Diagrammtypen unterstützt. Informationen zum Typ des statischen Bilddiagramms finden Sie in der Dokumentation. Sie können jeden URL-Parameter der Chart API als Option übergeben. Der URL-Parameter chg=50,50 aus einer Diagrammvisualisierung würde beispielsweise so angegeben werden: options['chg'] = '50,50'.
Hinweis zu Farben: Farboptionen wie colors, color und backgroundColor werden im Farbformat der Chart API angegeben.
Dieses Format ähnelt dem Format #RRGGBB, enthält jedoch eine optionale vierte Hexadezimalzahl zur Transparenz. Für Menschen lesbare Farben wie „rot“, „grün“, „blau“ werden nicht unterstützt. Das Chart API-Farbformat enthält kein führendes #-Symbol, die generischen Optionen für die Visualisierung von Bilddiagrammen akzeptieren jedoch Farbcodes mit oder ohne #.
| Name | Typ | Standard | Beschreibung |
|---|---|---|---|
| Annotationsspalten | Array<Objekt> | keine | Datenpunktlabels für verschiedene Diagrammtypen Dies ist ein Array von Objekten, die jeweils einem formatierten Datenpunkt im Diagramm ein Label zuweisen. Diese Option ist nur für Diagramme verfügbar, die Datenpunkte unterstützen. Informationen dazu finden Sie im verknüpften Thema. Die Datentabelle muss mindestens eine Stringlabel-Spalte enthalten. Jedes Objekt im Array hat die folgenden Eigenschaften:
Beispiel – Dieses Snippet definiert ein schwarzes Textlabel von 12 Pixeln mit Text aus Spalte 0, der dem Datenpunkt in Spalte 2 derselben Zeile zugewiesen ist: |
| backgroundColor | String | „#FFFFFF“ (weiß) | Die Hintergrundfarbe für das Diagramm im Farbformat der Chart API. |
| Farbe | String | Automatisch | Gibt eine Grundfarbe an, die für alle Reihen verwendet werden soll. Jede Reihe ist eine Abstufung der angegebenen Farbe. Farben werden im Farbformat der Chart API angegeben.
Wird ignoriert, wenn colors angegeben ist. |
| Farben | Array<string> | Automatisch | Hiermit können Sie jeder Datenreihe bestimmte Farben zuweisen. Farben werden im Farbformat der Chart API angegeben.
Farbe i wird für Datenspalte i verwendet und schließt sich an den Anfang, wenn es mehr Datenspalten als Farben gibt. Wenn Varianten einer einzigen Farbe für alle Reihen akzeptabel sind, verwenden Sie stattdessen die Option color. |
| enableEvents | boolean | false | Veranlasst Diagramme, dass vom Nutzer ausgelöste Ereignisse wie Klicken oder Mouseover ausgelöst werden. Wird nur für bestimmte Diagrammtypen unterstützt. Weitere Informationen finden Sie unten im Abschnitt Ereignisse. |
| fill | boolean | false | Wenn „true“, wird der Bereich unter jeder Zeile ausgefüllt. Nur für Liniendiagramme verfügbar. |
| firstHiddenColumn | Zahl | keine | Ein Datenspaltenindex. Die aufgeführte Spalte und alle folgenden Spalten werden nicht verwendet, um die Hauptelemente der Diagrammreihe wie Linien in einem Liniendiagramm oder Balken in einem Balkendiagramm zu zeichnen. Sie werden stattdessen als Daten für Markierungen und andere Anmerkungen verwendet. Beachten Sie, dass in dieser Indexanzahl Stringspalten enthalten sind. |
| height | Zahl | 200 | Höhe des Diagramms in Pixeln. Wenn dieser fehlt oder nicht in einem akzeptablen Bereich liegt, wird die Höhe des beinhaltenden Elements verwendet. Wenn dieser Wert auch außerhalb des zulässigen Bereichs liegt, wird die Standardhöhe verwendet. |
| labels | String | „Keine“ | [Tortendiagramm] Welches Label (falls vorhanden) für jedes Segment angezeigt werden soll. Wählen Sie einen der folgenden Werte aus:
|
| Legende | String | „right“ | Wo eine Diagrammlegende relativ zum Diagramm angezeigt werden soll. Geben Sie einen der folgenden Werte an: 'top', 'bottom', 'left', 'right', 'none'. Wird in Diagrammen ignoriert, die keine Legenden enthalten (z. B. Kartendiagramme). |
| max | Zahl | Maximaler Datenwert | Der maximale Wert, der auf der Waage angezeigt wird. Wird bei Kreisdiagrammen ignoriert. Der Standardwert ist der maximale Datenwert, mit Ausnahme von Balkendiagrammen, bei denen er der maximale Datenwert ist. Dies wird bei Balkendiagrammen ignoriert, wenn die Tabelle mehr als eine Datenspalte enthält. |
| Min. | Zahl | Mittlerer Datenwert | Der Mindestwert auf der Skala. Wird bei Kreisdiagrammen ignoriert. Der Standardwert ist der Mindestdatenwert, mit Ausnahme von Balkendiagrammen, in denen er null ist. Dies wird bei Balkendiagrammen ignoriert, wenn die Tabelle mehr als eine Datenspalte enthält. |
| Kategorielabels anzeigen | boolean | true | Gibt an, ob Labels auf der Kategorieachse (d.h. Zeile) angezeigt werden sollen. Nur für Linien- und Balkendiagramme verfügbar. |
| Wertlabels anzeigen | boolean | true | „Wahr“ zeigt ein Label auf der Wertachse an. Nur für Linien- und Balkendiagramme verfügbar. |
| einspaltige Anzeige | Zahl | keine | Gibt nur die angegebene Datenspalte wieder. Diese Zahl ist ein nullbasierter Index in der Tabelle, wobei null die erste Datenspalte ist. Die Farbe, die der einzelnen Spalte zugewiesen ist, ist die gleiche, die beim Rendern aller Spalten verwendet wird. Kann nicht mit Kreisdiagrammen oder Kartendiagrammen verwendet werden. |
| title | String | Leerer String | Der Diagrammtitel. Wenn keine Angabe erfolgt, wird kein Titel angezeigt. Der entsprechende Diagrammparameter ist chtt. |
| WertlabelsIntervall | Zahl | Automatisch | Das Intervall, in dem Labels für Wertachsen angezeigt werden. Wenn min beispielsweise 0 ist, max 100 ist und valueLabelsInterval 20 ist, werden im Diagramm Achsenlabels mit (0, 20, 40, 60, 80 100) angezeigt. |
| width | Zahl | 400 | Breite des Diagramms in Pixeln. Wenn dieser fehlt oder nicht in einem akzeptablen Bereich liegt, wird die Breite des zugehörigen Elements verwendet. Wenn dieser Wert auch außerhalb des zulässigen Bereichs liegt, wird die Standardbreite verwendet. |
Methoden
| Methode | Rückgabetyp | Beschreibung |
|---|---|---|
draw(data, options) |
– | Zeichnet die Karte. |
getImageUrl() |
String | Gibt die Google Chart API-URL zurück, die zum Anfordern des Diagramms verwendet wurde. Diese kann mehr als 2.000 Zeichen lang sein. Weitere Informationen finden Sie in der Google Chart API. |
Ereignisse
Wenn Sie das Attribut enableEvents auf „true“ setzen, lösen Diagramme die Ereignisse für Nutzerereignisse aus, die in der Tabelle unten aufgeführt sind. Alle diese Ereignisse geben ein event-Objekt mit den folgenden Attributen zurück:
type: Ein String, der den Ereignistyp darstellt.region: eine ID für die betroffene Region. Fügen Sie dem Rohdiagrammtyp den Parameterchof=jsonhinzu, um eine Liste der verfügbaren Namen aufzurufen. Weitere Informationen finden Sie unterchof=json.
| Name | Beschreibung | Typ "Value" |
|---|---|---|
error |
Wird ausgelöst, wenn beim Rendern des Diagramms ein Fehler auftritt | ID, Nachricht |
onmouseover |
Wird ausgelöst, wenn der Nutzer den Mauszeiger auf ein Diagrammelement bewegt | „Mouseover“ |
onmouseout |
Wird ausgelöst, wenn der Nutzer den Mauszeiger von einem Diagrammelement entfernt | „mouseout“ |
onclick |
Wird ausgelöst, wenn ein Nutzer auf ein Diagrammelement klickt | „Klicken“ |
Welche Diagramme unterstützen Ereignisse?
Alle Diagramme, die den Parameter chof=json unterstützen, unterstützen das Auslösen von Ereignissen, d. h. alle Diagramme außer speziellen Diagrammen, z. B. QR-Codes.
Beispiel für die Verarbeitung von Ereignissen
In diesem Beispiel sehen Sie eine Leiste, in der Klicks auf die Maus erfasst werden.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Image Events Sample
</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};
var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
chart.draw(dataTable, options);
// Assign event handler
google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
}
google.charts.setOnLoadCallback(drawVisualization);
// Define an event handler
function mouseEventHandler(event) {
document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 300px; height: 300px;"></div>
<div id="debugger"></div>
</body>
</html>
Datenrichtlinie
Die Daten werden an die Google Chart API gesendet.
Lokalisierung
Diese Visualisierung unterstützt alle Lokalisierungen, die vom Google Chart-Dienst unterstützt werden.