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
Ein Balkendiagramm, das mit der Google Charts API als Bild gerendert wird.
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:["imagebarchart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var chart = new google.visualization.ImageBarChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 0}); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 240px;"></div> </body> </html>
Wird geladen
Der Paketname von google.charts.load
lautet "imagebarchart"
google.charts.load("current", {packages: [[]"imagebarchart"]});
Der Klassenname der Visualisierung lautet google.visualization.ImageBarChart
var visualization = new google.visualization.ImageBarChart(container);
Datenformat
Die erste Spalte sollte ein String mit dem Kategorielabel sein. Darauf kann eine beliebige Anzahl numerischer Spalten folgen. Jede Spalte wird als ein Satz von Balken angezeigt. Wenn die Datentabelle mehr als eine numerische Spalte enthält, werden die Werte in einer Zeile als übereinander angeordnete Balken angezeigt.
Konfigurationsoptionen
Name | Typ | Standard | Beschreibung |
---|---|---|---|
backgroundColor | String | „#FFFFFF“ (weiß) | Die Hintergrundfarbe für das Diagramm im Farbformat der Chart API. |
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. |
height | Zahl | Containerhöhe | Höhe des Diagramms in Pixeln. |
gestapelt | boolean | true | Steuert, ob mehrere Datenspalten gestapelt (im Gegensatz zu gruppierten Balken) angezeigt werden. |
IsVertical | boolean | false | Steuert, ob die Balken vertikal angeordnet sind. |
Legende | String | „right“ | Position und Typ der Legende. Folgende sind möglich:
|
max | Zahl | automatisch | Der maximale Wert, der auf der Y-Achse angezeigt werden soll. |
Min. | Zahl | automatisch | Der minimale Wert, der auf der Y-Achse angezeigt werden soll. |
Kategorielabels anzeigen | boolean | true | Wenn dieser Wert auf „false“ gesetzt ist, werden die Labels der Kategorien entfernt. |
Wertlabels anzeigen | boolean | true | Wenn dieser Wert auf „false“ gesetzt ist, werden die Labels der Werte entfernt. |
title | String | kein Titel | Text, der über dem Diagramm angezeigt werden soll. |
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 | Containerbreite | Breite des Diagramms in Pixeln. |
Methoden
Methode | Rückgabetyp | Beschreibung |
---|---|---|
draw(data, options) |
keine | Zeichnet das Diagramm. |
Ereignisse
Du kannst dich registrieren, um die auf der Seite Generische Bildgrafik beschriebenen Ereignisse zu hören.
Datenrichtlinie
Weitere Informationen finden Sie in der Chart API-Protokollierungsrichtlinie.