Wichtig: Der Bereich „Bilddiagramme“ von Google Chart Tools wurde am 20. April 2012 offiziell eingestellt. Das Programm funktioniert gemäß unserer Richtlinie zur Einstellung von Produkten und Diensten weiterhin.
Übersicht
Das generische Bilddiagramm ist ein generischer Wrapper für alle Diagramme, die mit der Google Chart API erstellt werden. Lesen Sie die Chart API-Dokumentation, bevor Sie diese Visualisierung verwenden. Im Gegensatz zum Limit von 2.000 bei direkten Aufrufen der 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. Darüber hinaus werden einige Labels als Spalten in der Datentabelle übergeben.
Alle anderen URL-Parameter der Chart API (außer chd) werden als Optionen übergeben.
Von: Google
Beispiele
Hier sind 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
In den umschlossenen Balkendiagrammen müssen Sie „chxt='x'“ nicht angeben, wie Sie es tun würden, wenn Sie das Diagramm selbst aufrufen. Wenn Sie keine Achse angeben, versucht das allgemeine Bilddiagramm standardmäßig, das Diagramm korrekt 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 von 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: Stringwerte, die als Daten oder Optionen übergeben werden, sollten nicht URL-codiert werden.
Kartendiagramme
Für ein Kartendiagramm wird eine Datentabelle mit zwei erforderlichen Spalten verwendet:
- Erste Spalte: [string] Code für Land oder Bundesland.
- Zweite Spalte: [Zahl] Der Wert für dieses Land oder Bundesland.
Weitere Informationen finden Sie in der Dokumentation zu Kartendiagrammen.
Andere Diagramme
Für Diagramme, die keine Karten sind, 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 steht für ein Label, das auf der X-Achse verwendet wird (entspricht dem Parameter
chloderchxl) für Diagramme, die dies unterstützen. - Nächste Spalten: Beliebige Anzahl numerischer Spalten, die jeweils eine Datenreihe darstellen.
- Letzte Spalten: [optional, String] Eine beliebige Anzahl von Stringspalten im Anschluss an die Datenspalten, wobei jeder Eintrag ein Datenpunktlabel für Diagramme darstellt, die dies unterstützen. Wenn Sie diese Spalte verwenden möchten, müssen Sie die Option
annotationColumnsangeben.
Die Daten werden je nach Diagrammtyp unterschiedlich dargestellt. Weitere Informationen finden Sie in der Dokumentation zu Ihrem Diagramm.
Hinweis zu Spaltenindexen: Bei 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 Indexanzahl. Spaltenindexe in allen Optionen, die vom Chart API-Dienst verarbeitet werden (z. B. bei der Option chm), ignorieren jedoch die Stringspalten in der Indexanzahl.
Konfigurationsoptionen
Für diese Visualisierung sind die folgenden Optionen definiert. Definieren Sie sie im Optionsobjekt, das an die draw()-Methode der Visualisierung übergeben wird.
Nicht alle der folgenden Optionen werden für alle Diagrammtypen unterstützt. Weitere Informationen finden Sie in der Dokumentation zu Ihrem Diagrammtyp mit statischen Bildern. Sie können jeden beliebigen Chart API-URL-Parameter als Option übergeben. Der URL-Parameter chg=50,50 aus einer Diagrammvisualisierung wird beispielsweise so angegeben: options['chg'] = '50,50'.
Hinweis zu Farben: Farboptionen wie colors, color und backgroundColor werden im Farbformat der Chart API angegeben.
Dieses Format ähnelt dem #RRGGBB-Format, enthält jedoch eine optionale vierte Hexadezimalzahl, um die Transparenz anzugeben. Für Menschen lesbare Farben wie „Rot“, „Grün“, „Blau“ usw. werden nicht unterstützt. Das Farbformat der Chart API enthält nicht das Symbol „#“. Die allgemeinen Optionen für die Visualisierung von Bilddiagrammen akzeptieren jedoch Farbcodes mit oder ohne #.
| Name | Typ | Standard | Beschreibung |
|---|---|---|---|
| annotationColumns | Array<object> | keine | Datenpunktlabels für verschiedene Diagrammtypen. Dies ist ein Array von Objekten, die jeweils einem Datenpunkt im Diagramm ein formatiertes Label zuweisen. Diese Option ist nur für Diagramme verfügbar, die Datenpunkte unterstützen. Informationen dazu finden Sie im verlinkten Abschnitt. Die Datentabelle muss mindestens eine der Stringlabel-Spalten enthalten. Jedes Objekt im Array hat die folgenden Eigenschaften:
Beispiel: Dieses Snippet definiert ein schwarzes Textlabel mit 12 Pixeln, das aus Spalte 0 stammt und 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 | Auto | Gibt die 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> | Auto | Damit können Sie jeder Datenreihe bestimmte Farben zuweisen. Farben werden im Farbformat der Chart API angegeben.
Die Farbe i wird für die Datenspalte i verwendet und springt an den Anfang, wenn mehr Datenspalten als Farben vorhanden sind. Wenn Varianten einer einzelnen Farbe für alle Reihen zulässig sind, verwenden Sie stattdessen die Option color. |
| enableEvents | boolean | false | Veranlasst, dass Diagramme vom Nutzer ausgelöste Ereignisse wie Klicks oder Mouseover auslösen. Wird nur für bestimmte Diagrammtypen unterstützt. Weitere Informationen finden Sie unten im Abschnitt Ereignisse. |
| fill | boolean | false | Falls wahr, wird der Bereich unter jeder Zeile ausgefüllt. Nur für Liniendiagramme verfügbar. |
| firstHiddenColumn | number | keine | Ein Datenspaltenindex. Die aufgeführte Spalte sowie alle nachfolgenden Spalten werden nicht zum Zeichnen der Hauptelemente der Diagrammreihe (z. B. Linien in einem Liniendiagramm oder Balken in einem Balkendiagramm) verwendet, sondern als Daten für Markierungen und andere Anmerkungen. Beachten Sie, dass Stringspalten in dieser Indexanzahl enthalten sind. |
| height | number | 200 | Höhe des Diagramms in Pixeln Wenn das Element fehlt oder nicht innerhalb eines akzeptablen Bereichs liegt, wird die Höhe des enthaltenden Elements verwendet. Liegt dieser auch außerhalb des zulässigen Bereichs, wird die Standardhöhe verwendet. |
| Labels | String | „none“ | [Nur Kreisdiagramm] Gibt an, welches Label (falls vorhanden) für die einzelnen Segmente angezeigt werden soll. Wählen Sie einen der folgenden Werte aus:
|
| Legende | String | 'rechts' | Wo eine Diagrammlegende relativ zum Diagramm angezeigt werden soll. Geben Sie einen der folgenden Werte an: „top“, „bottom“, „left“, „right“, „none“. Wird in Diagrammen ohne Legenden ignoriert (z. B. Kartendiagramme). |
| Max. | number | Maximaler Datenwert | Der auf der Skala angezeigte Maximalwert. Wird bei Kreisdiagrammen ignoriert. Der Standardwert ist der maximale Datenwert, außer bei Balkendiagrammen, bei denen der Standardwert der maximale Datenwert ist. Bei Balkendiagrammen wird dies ignoriert, wenn die Tabelle mehr als eine Datenspalte enthält. |
| Min. | number | Minimaler Datenwert | Der auf der Skala angezeigte Minimalwert. Wird bei Kreisdiagrammen ignoriert. Der Standardwert ist der minimale Datenwert, mit Ausnahme von Balkendiagrammen, bei denen der Standardwert null ist. Bei Balkendiagrammen wird dies ignoriert, wenn die Tabelle mehr als eine Datenspalte enthält. |
| showCategoryLabels | boolean | true | Legt fest, ob Labels auf der Kategorieachse (d. h. Zeile) angezeigt werden sollen Nur für Linien- und Balkendiagramme verfügbar. |
| showValueLabels | boolean | true | Wahr zeigt ein Label auf der Wertachse an. Nur für Linien- und Balkendiagramme verfügbar. |
| singleColumnDisplay | number | keine | Rendert nur die angegebene Datenspalte. Diese Zahl ist ein nullbasierter Index in der Tabelle, wobei Null die erste Datenspalte ist. Die Farbe, die einer einzelnen Spalte zugewiesen wird, entspricht der Farbe, die angezeigt wird, wenn alle Spalten gerendert werden. Kann nicht für Kreis- oder Kartendiagramme verwendet werden. |
| Titel | String | Leerer String | Diagrammtitel Wenn keine Angabe erfolgt, wird kein Titel angezeigt. Der entsprechende Diagrammparameter ist chtt. |
| valueLabelsInterval | number | Auto | Das Intervall, in dem die Labels der Wertachsen angezeigt werden sollen. Beispiel: Wenn min 0 ist, max 100 und valueLabelsInterval 20 ist, werden im Diagramm Achsenlabels bei (0, 20, 40, 60, 80 100) angezeigt. |
| width | number | 400 | Breite des Diagramms in Pixeln. Wenn das Element fehlt oder nicht innerhalb eines akzeptablen Bereichs liegt, wird die Breite des Elements verwendet, in dem es enthalten ist. Liegt diese auch außerhalb des zulässigen Bereichs, wird die Standardbreite verwendet. |
Methoden
| Methode | Rückgabetyp | Beschreibung |
|---|---|---|
draw(data, options) |
Ohne | Zeichnet die Karte. |
getImageUrl() |
String | Gibt die Google Chart API-URL zurück, die zum Anfordern des Diagramms verwendet wurde. Dieser 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, werden in unterstützenden Diagrammen Ereignisse für Nutzerereignisse ausgelöst, die in der Tabelle unten aufgeführt sind. Bei all diesen Ereignissen wird ein event-Objekt mit den folgenden Eigenschaften zurückgegeben:
type: ein String, der den Ereignistyp darstellt.region: eine ID für die betroffene Region. Fügen Sie dem Diagrammtyp „Rohdaten“ 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 Versuch, das Diagramm zu rendern, 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 wegbewegt | „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 mit Ausnahme spezieller Diagramme wie QR-Codes).
Beispiel für die Verarbeitung von Ereignissen
Das folgende Beispiel zeigt einen Balken, der Mausklicks erfasst.
<!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 den Google Chart API-Dienst gesendet.
Lokalisierung
Diese Visualisierung unterstützt jede vom Google Chart-Dienst unterstützte Lokalisierung.