Übersicht
Ein Blasendiagramm, das im Browser mit SVG oder VML gerendert wird. Zeigt Tipps an, wenn der Mauszeiger auf Infofelder bewegt wird.
Ein Blasendiagramm wird verwendet, um ein Dataset mit zwei bis vier Dimensionen zu visualisieren. Die ersten beiden Dimensionen werden als Koordinaten angezeigt, die dritte als Farbe und die vierte als Größe.
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':['corechart']});
google.charts.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {textStyle: {fontSize: 11}}
};
var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="series_chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Farbgebung nach Zahlen
Mit der Option colorAxis können Sie die Blasen proportional zu einem Wert färben, wie im folgenden Beispiel gezeigt.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'X', 'Y', 'Temperature'],
['', 80, 167, 120],
['', 79, 136, 130],
['', 78, 184, 50],
['', 72, 278, 230],
['', 81, 200, 210],
['', 72, 170, 100],
['', 68, 477, 80]
]);
var options = {
colorAxis: {colors: ['yellow', 'red']}
};
var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Labels anpassen
Mit der Option bubble.textStyle können Sie Schriftart, Schriftart und Farbe der Blasen festlegen:
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
fontSize: 12,
fontName: 'Times-Roman',
color: 'green',
bold: true,
italic: true
}
}
};
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
fontSize: 12,
fontName: 'Times-Roman',
color: 'green',
bold: true,
italic: true
}
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('textstyle'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="textstyle" style="width: 900px; height: 500px;"></div>
</body>
</html>
Die Beschriftungen im obigen Diagramm sind schwer zu lesen. Einer der Gründe ist der weiße Raum um sie herum. Dies wird als Aura bezeichnet. Wenn Sie Ihre Diagramme ohne sie bevorzugen, können Sie bubble.textStyle.auraColor auf 'none' setzen.
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
auraColor: 'none'
}
}
};
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
auraColor: 'none',
}
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('noAura'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="noAura" style="width: 900px; height: 500px;"></div>
</body>
</html>
Wird geladen
Der Paketname „google.charts.load“ lautet "corechart".
google.charts.load("current", {packages: ["corechart"]});
Der Klassenname der Visualisierung lautet google.visualization.BubbleChart.
var visualization = new google.visualization.BubbleChart(container);
Datenformat
Zeilen:Jede Zeile in der Tabelle stellt eine einzelne Blase dar.
Columns:
| Spalte 0 | Spalte 1 | Spalte 2 | Spalte 3 (optional) | Spalte 4 (optional) | |
|---|---|---|---|---|---|
| Zweck: | ID (Name) der Blase | x-Koordinate | Y-Koordinate | Entweder eine Reihen-ID oder ein Wert, der eine Farbe auf einer Farbverlaufsskala darstellt, je nach Spaltentyp:
|
Größe. Die Werte in dieser Spalte werden mithilfe der Option sizeAxis den tatsächlichen Pixelwerten zugeordnet. |
| Datentyp: | String | number | number | String oder Zahl | number |
Konfigurationsoptionen
| Name | |
|---|---|
| animation.duration |
Die Dauer der Animation in Millisekunden. Weitere Informationen finden Sie in der Dokumentation zu Animationen. Typ:Zahl
Standard: 0
|
| animation.easing |
Die auf die Animation angewendete Easing-Funktion. Folgende Optionen sind verfügbar:
Typ: String
Standardeinstellung: „linear“
|
| animation.startup |
Bestimmt, ob das Diagramm bei der ersten Zeichnung animiert wird. Bei Typ: Boolesch
Standard falsch
|
| axisTitlesPosition |
Die Position der Achsentitel im Vergleich zum Diagrammbereich. Unterstützte Werte:
Typ: String
Standard: „out“
|
| backgroundColor |
Die Hintergrundfarbe für den Hauptbereich des Diagramms. Dies kann entweder ein einfacher HTML-Farbstring wie Typ:String oder Objekt
Standard: 'white'
|
| backgroundColor.stroke |
Die Farbe des Diagrammrahmens als HTML-Farbstring. Typ: String
Standard: #666
|
| backgroundColor.strokeWidth |
Die Rahmenbreite in Pixeln. Typ:Zahl
Standard: 0
|
| backgroundColor.fill |
Die Füllfarbe des Diagramms als HTML-Farbstring. Typ: String
Standard: 'white'
|
| bubble |
Ein Objekt mit Mitgliedern zum Konfigurieren der visuellen Eigenschaften der Blasen. Typ:Objekt
Standard:null
|
| bubble.opacity |
Die Deckkraft der Blasen, wobei 0 vollständig transparent und 1 vollständig deckend ist. Typ:Zahl zwischen 0,0 und 1,0
Standard: 0,8
|
| bubble.stroke |
Die Farbe der Kontur der Blasen. Typ: String
Standard: #ccc
|
| bubble.textStyle |
Ein Objekt, das den Textstil der Blasen angibt. Das Objekt hat folgendes Format: {color: <string>, fontName: <string>, fontSize: <number>}
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| chartArea |
Ein Objekt mit Mitgliedern zum Konfigurieren der Position und Größe des Diagrammbereichs, in dem das Diagramm selbst gezeichnet wird, ohne Achse und Legenden. Es werden zwei Formate unterstützt: eine Zahl oder eine Zahl gefolgt von %. Eine einfache Zahl ist ein Wert in Pixeln, eine Zahl gefolgt von % ein Prozentsatz. Beispiel: Typ:Objekt
Standard:null
|
| chartArea.backgroundColor |
Hintergrundfarbe des Diagrammbereichs. Ein String kann entweder ein hexadezimaler String (z.B. '#fdc') oder einem englischen Farbnamen. Wenn ein Objekt verwendet wird, können die folgenden Attribute angegeben werden:
Typ:String oder Objekt
Standard: 'white'
|
| chartArea.left |
Legt fest, wie weit das Diagramm von der linken Rahmenlinie entfernt ist. Typ:Zahl oder String
Standard:automatisch
|
| chartArea.top |
Legt fest, wie weit das Diagramm vom oberen Rand entfernt ist. Typ:Zahl oder String
Standard:automatisch
|
| chartArea.width |
Diagrammbereichbreite. Typ:Zahl oder String
Standard:automatisch
|
| chartArea.height |
Höhe des Diagrammbereichs. Typ:Zahl oder String
Standard:automatisch
|
| Farben |
Die Farben, die für die Diagrammelemente verwendet werden sollen. Ein Array mit Strings, wobei jedes Element ein HTML-Farbstring ist. Beispiel: Typ:String-Array
Standard:Standardfarben
|
| colorAxis |
Ein Objekt, das eine Zuordnung zwischen Farbspaltenwerten und Farben oder eine Farbverlaufsskala angibt. Zum Angeben der Eigenschaften dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: {minValue: 0, colors: ['#FF0000', '#00FF00']}
Typ:Objekt
Standard:null
|
| colorAxis.minValue |
Falls vorhanden, gibt es einen Mindestwert für Diagrammfarbdaten an. Farbdatenwerte ab diesem Wert werden als erste Farbe im Bereich Typ:Zahl
Standard:Mindestwert der Farbspalte in Diagrammdaten
|
| colorAxis.maxValue |
Falls vorhanden, gibt es einen Maximalwert für Diagrammfarbdaten an. Farbdatenwerte ab diesem Wert werden als letzte Farbe im Bereich Typ:Zahl
Standard:Maximalwert der Farbspalte in Diagrammdaten
|
| colorAxis.values |
Falls vorhanden, wird damit gesteuert, wie Werte mit Farben verknüpft werden. Jeder Wert ist der entsprechenden Farbe im Array Typ:Array von Zahlen
Standard:null
|
| colorAxis.colors |
Farben, die Werten in der Visualisierung zugewiesen werden sollen. Ein Array mit Strings, wobei jedes Element ein HTML-Farbstring ist. Beispiel: Typ:Array von Farbstrings
Standard:null
|
| colorAxis.legend |
Ein Objekt, das den Stil der Farblegende für den Farbverlauf angibt. Typ:Objekt
Standard:null
|
| colorAxis.legend.position |
Position der Legende. folgende Arten von Werten sind möglich:
Typ:Objekt
Standard: „top“
|
| colorAxis.legend.textStyle |
Ein Objekt, das den Textstil der Legende angibt. Das Objekt hat folgendes Format: {color: <string>, fontName: <string>, fontSize: <number>}
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| colorAxis.legend.numberFormat |
Ein Formatstring für numerische Labels. Dies ist eine Teilmenge des
Mustersatzes der ICU
.
Beispielsweise gibt Typ: String
Standard:automatisch
|
| enableInteractivity |
Gibt an, ob im Diagramm nutzerbasierte Ereignisse ausgelöst oder auf Nutzerinteraktionen reagiert werden Bei „false“ gibt das Diagramm keine „select“- oder anderen interaktionsbasierten Ereignisse aus (aber wir werden Bereit- oder Fehlerereignisse auslösen) und kein Hovertext anzeigen und sich je nach Nutzereingabe nicht anderweitig ändern. Typ: Boolesch
Standardeinstellung:true
|
| explorer |
Mit der Option Diese Funktion ist experimentell und kann sich in zukünftigen Versionen ändern. Hinweis: Der Explorer funktioniert nur mit fortlaufenden Achsen, z. B. Zahlen oder Datumsangaben. Typ:Objekt
Standard:null
|
| explorer.actions |
Der Google Charts-Explorer unterstützt drei Aktionen:
Typ:String-Array
Standard: ['dragToPan', 'rightClickToReset']
|
| explorer.axis |
Standardmäßig können Nutzer sowohl horizontal als auch vertikal schwenken, wenn die Option Typ: String
Standard: horizontales und vertikales Schwenken
|
| explorer.keepInBounds |
Standardmäßig können Nutzer unabhängig vom Ort der Daten alle Seiten schwenken. Verwenden Sie Typ: Boolesch
Standard: false
|
| explorer.maxZoomIn |
Das Maximum, das der Explorer heranzoomen kann. Standardmäßig können Nutzer so weit heranzoomen, dass sie nur 25% der ursprünglichen Ansicht sehen. Wenn Typ:Zahl
Standard: 0,25
|
| explorer.maxZoomOut |
Das Maximum, das der Entdecker herauszoomen kann. Standardmäßig können Nutzer so weit herauszoomen, dass das Diagramm nur ein Viertel des verfügbaren Platzes einnimmt. Wenn Typ:Zahl
Standard: 4
|
| explorer.zoomDelta |
Wenn Nutzer heran- oder herauszoomen, legt Typ:Zahl
Standard: 1,5
|
| fontSize |
Die Standardschriftgröße des gesamten Textes im Diagramm in Pixeln. Sie können dies mithilfe von Properties für bestimmte Diagrammelemente überschreiben. Typ:Zahl
Standard:automatisch
|
| fontName |
Die Standardschriftart für den gesamten Text im Diagramm. Sie können dies mithilfe von Properties für bestimmte Diagrammelemente überschreiben. Typ: String
Standardeinstellung: 'Arial'
|
| forceIFrame |
Zeichnet das Diagramm in einem Inline-Frame. (Beachten Sie, dass diese Option in IE8 ignoriert wird; alle IE8-Diagramme werden in iFrames gezeichnet.) Typ: Boolesch
Standard: false
|
| hAxis |
Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener horizontaler Achsenelemente. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt:
{
title: 'Hello',
titleTextStyle: {
color: '#FF0000'
}
}
Typ:Objekt
Standard:null
|
| hAxis.baseline |
Die Referenz für die horizontale Achse. Typ:Zahl
Standard:automatisch
|
| hAxis.baselineColor |
Die Farbe der Baseline für die horizontale Achse. Kann ein beliebiger HTML-Farbstring sein, z. B. Typ:Zahl
Standard: 'black'
|
| hAxis.direction |
Die Richtung, in die die Werte entlang der horizontalen Achse wachsen. Geben Sie Typ:1 oder -1
Standard: 1
|
| hAxis.format |
Ein Formatstring für Beschriftungen numerischer Achsen. Dies ist eine Teilmenge des
Mustersatzes der ICU
.
Die tatsächliche Formatierung, die auf das Label angewendet wird, wird aus der Sprache abgeleitet, mit der die API geladen wurde. Weitere Informationen finden Sie unter Diagramme mit einer bestimmten Sprache laden .
Bei der Berechnung von Teilstrichen und Gitternetzlinien werden mehrere alternative Kombinationen aller relevanten Gitternetzlinienoptionen berücksichtigt. Alternativen werden abgelehnt, wenn die formatierten Teilstriche dupliziert werden oder sich überschneiden.
Sie können also Typ: String
Standard:automatisch
|
| hAxis.gridlines |
Ein Objekt mit Eigenschaften zum Konfigurieren der Gitternetzlinien auf der horizontalen Achse. Gitternetzlinien für horizontale Achsen werden vertikal gezeichnet. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: {color: '#333', minSpacing: 20}
Typ:Objekt
Standard:null
|
| hAxis.gridlines.color |
Die Farbe der horizontalen Gitternetzlinien im Diagrammbereich. Geben Sie einen gültigen HTML-Farbstring an. Typ: String
Standard: #CCC
|
| hAxis.gridlines.count |
Die ungefähre Anzahl der horizontalen Gitternetzlinien im Diagrammbereich.
Wenn Sie eine positive Zahl für Typ:Zahl
Standard: -1
|
| hAxis.gridlines.units |
Überschreibt das Standardformat für verschiedene Aspekte von Datums-/Datums-/Uhrzeitdatentypen, wenn sie mit berechneten Gitternetzlinien im Diagramm verwendet werden. Ermöglicht die Formatierung von Jahren, Monaten, Tagen, Stunden, Minuten, Sekunden und Millisekunden. Das allgemeine Format ist:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
Weitere Informationen finden Sie unter Datums- und Uhrzeitwerte. Typ:Objekt
Standard:null
|
| hAxis.minorGridlines |
Ein Objekt mit Mitgliedern zum Konfigurieren der kleinen Gitternetzlinien auf der horizontalen Achse, ähnlich wie bei der Option „hAxis.gridlines“. Typ:Objekt
Standard:null
|
| hAxis.minorGridlines.color |
Die Farbe der horizontalen kleineren Gitternetzlinien im Diagrammbereich. Geben Sie einen gültigen HTML-Farbstring an. Typ: String
Standard:Eine Mischung aus Gitternetz- und Hintergrundfarben
|
| hAxis.minorGridlines.count |
Die Option Typ:Zahl
Standard: 1
|
| hAxis.minorGridlines.units |
Überschreibt das Standardformat für verschiedene Aspekte von Datum/Uhrzeit/Uhrzeit-Datentypen, wenn sie mit berechneten MinorGridlines für Diagramme verwendet werden. Ermöglicht die Formatierung von Jahren, Monaten, Tagen, Stunden, Minuten, Sekunden und Millisekunden. Das allgemeine Format ist:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
Weitere Informationen finden Sie unter Datums- und Uhrzeitwerte. Typ:Objekt
Standard:null
|
| hAxis.logScale |
Typ: Boolesch
Standard: false
|
| hAxis.scaleType |
Typ: String
Standard: null
|
| hAxis.textPosition |
Position des Textes der horizontalen Achse im Verhältnis zum Diagrammbereich. Unterstützte Werte: „out“, „in“, „none“. Typ: String
Standard: „out“
|
| hAxis.textStyle |
Ein Objekt, das den Textstil der horizontalen Achse angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.ticks |
Ersetzt die automatisch generierten Ticks auf der X-Achse durch das angegebene Array. Jedes Element des Arrays sollte entweder ein gültiger Tick-Wert (z. B. eine Zahl, ein Datum, Datum/Uhrzeit oder Uhrzeit) oder ein Objekt sein. Wenn es sich um ein Objekt handelt, sollte es die Eigenschaft
Das ViewWindow wird automatisch um den Mindest- und Höchstwert erweitert, sofern Sie keine Beispiele:
Typ:Array von Elementen
Standard:automatisch
|
| hAxis.title |
Typ: String
Standard:null
|
| hAxis.titleTextStyle |
Ein Objekt, das den Textstil für den Titel der horizontalen Achse angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.maxValue |
Verschiebt den Maximalwert der horizontalen Achse auf den angegebenen Wert. Dieser entspricht in den meisten Diagrammen nach rechts. Wird ignoriert, wenn dieser auf einen Wert festgelegt wird, der kleiner als der maximale x-Wert der Daten ist.
Typ:Zahl
Standard:automatisch
|
| hAxis.minValue |
Verschiebt den Mindestwert der horizontalen Achse auf den angegebenen Wert; in den meisten Diagrammen nach links. Wird ignoriert, wenn dieser auf einen Wert festgelegt ist, der größer als der minimale x-Wert der Daten ist.
Typ:Zahl
Standard:automatisch
|
| hAxis.viewWindowMode |
Gibt an, wie die horizontale Achse skaliert werden soll, um die Werte im Diagrammbereich zu rendern. Die folgenden Stringwerte werden unterstützt:
Typ: String
Standard: Entspricht "pretty", aber
haxis.viewWindow.min und haxis.viewWindow.max haben Vorrang, wenn sie verwendet werden.
|
| hAxis.viewWindow |
Gibt den Zuschneidebereich der horizontalen Achse an. Typ:Objekt
Standard:null
|
| hAxis.viewWindow.max |
Der maximale horizontale Datenwert, der gerendert werden soll. Wird ignoriert, wenn Typ:Zahl
Standard:automatisch
|
| hAxis.viewWindow.min |
Der minimale horizontale Datenwert, der gerendert werden soll. Wird ignoriert, wenn Typ:Zahl
Standard:automatisch
|
| height |
Höhe des Diagramms in Pixeln Typ:Zahl
Standard:Höhe des beinhaltenden Elements
|
| Legende |
Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Aspekte der Legende. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Typ:Objekt
Standard:null
|
| legend.alignment |
Ausrichtung der Legende. folgende Arten von Werten sind möglich:
Anfang, Mitte und Ende beziehen sich auf den Stil - vertikal oder horizontal - der Legende. In einer Legende „rechts“ befinden sich beispielsweise „start“ und „end“ oben bzw. unten. Bei einer Legende „oben“ befinden sich „start“ und „end“ links bzw. rechts neben dem Bereich. Der Standardwert hängt von der Position der Legende ab. Für Legenden am unteren Rand ist der Standardwert „center“, andere Legenden auf „start“. Typ: String
Standard:automatisch
|
| legend.maxLines |
Maximale Anzahl der Zeilen in der Legende. Geben Sie eine Zahl größer als 1 ein, um der Legende Linien hinzuzufügen. Hinweis: Die genaue Logik, mit der die tatsächliche Anzahl der gerenderten Zeilen ermittelt wird, ist noch im Wandel. Diese Option funktioniert derzeit nur, wenn „legende.position“ den Wert „top“ hat. Typ:Zahl
Standard: 1
|
| legend.pageIndex |
Ursprünglich ausgewählter nullbasierter Seitenindex der Legende. Typ:Zahl
Standard: 0
|
| legend.position |
Position der Legende. folgende Arten von Werten sind möglich:
Typ: String
Standard: „right“
|
| legend.textStyle |
Ein Objekt, das den Textstil der Legende angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| selectionMode |
Wenn Typ: String
Standard: „single“
|
| Serien |
Ein Objekt mit -Objekten, wobei die Schlüssel Reihennamen (die Werte in der Spalte "Farbe") und jedes Objekt sind, das das Format der entsprechenden Reihe im Diagramm beschreibt. Wenn keine Reihe oder kein Wert angegeben ist, wird der globale Wert verwendet. Jedes Objekt unterstützt die folgenden Attribute:
series: {'Europe': {color: 'green'}}
Typ:Objekt mit verschachtelten Objekten
Standard: {}
|
| sizeAxis |
Ein Objekt mit Mitgliedern, um zu konfigurieren, wie Werte der Blasengröße zugeordnet werden. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: {minValue: 0, maxSize: 20}
Typ:Objekt
Standard:null
|
| sizeAxis.maxSize |
Maximaler Radius der größtmöglichen Blase in Pixeln. Typ:Zahl
Standard: 30
|
| sizeAxis.maxValue |
Der Größenwert (wie in den Diagrammdaten angezeigt), der Typ:Zahl
Standard:Maximalwert der Spalte „Größe“ in Diagrammdaten
|
| sizeAxis.minSize |
Mindestradius der kleinstmöglichen Blase in Pixeln Typ:Zahl
Standard: 5
|
| sizeAxis.minValue |
Der Größenwert (wie in den Diagrammdaten angezeigt), der Typ:Zahl
Standard:Mindestwert der Spalte „Größe“ in Diagrammdaten
|
| sortBubblesBySize |
Falls wahr, werden die Blasen nach Größe sortiert, sodass die kleineren Blasen über den größeren angezeigt werden. Bei „false“ werden die Blasen nach ihrer Reihenfolge in der DataTable sortiert. Typ: Boolesch
Standardeinstellung:true
|
| Design |
Ein Design ist eine Reihe vordefinierter Optionswerte, die im Zusammenspiel ein bestimmtes Diagrammverhalten oder einen bestimmten visuellen Effekt erzielen. Derzeit ist nur ein Design verfügbar:
Typ: String
Standard:null
|
| Titel |
Text, der über dem Diagramm angezeigt werden soll. Typ: String
Standard: kein Titel
|
| titlePosition |
Wo der Diagrammtitel im Vergleich zum Diagrammbereich platziert werden soll. Unterstützte Werte:
Typ: String
Standard: „out“
|
| titleTextStyle |
Ein Objekt, das den Textstil für den Titel angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| Kurzinfo |
Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Kurzinfo-Elemente. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: {textStyle: {color: '#FF0000'}, showColorCode: true}
Typ:Objekt
Standard:null
|
| tooltip.isHtml |
Wenn die Richtlinie auf „true“ gesetzt ist, werden HTML- und keine SVG-gerenderten Kurzinfos verwendet. Weitere Informationen finden Sie unter Inhalt der Kurzinfo anpassen. Hinweis: Die Anpassung des HTML-Kurzinfoinhalts über die Spalte „Kurzinfo-Spaltendaten“ wird von der Visualisierung Blasendiagramm nicht unterstützt. Typ: Boolesch
Standard: false
|
| tooltip.textStyle |
Ein Objekt, das den Textstil für die Kurzinfo angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| tooltip.trigger |
Die Nutzerinteraktion, durch die die Kurzinfo angezeigt wird:
Typ: String
Standard: „Fokus“
|
| vAxis |
Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener vertikaler Achsenelemente. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: {title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Typ:Objekt
Standard:null
|
| vAxis.baseline |
Typ:Zahl
Standard:automatisch
|
| vAxis.baselineColor |
Gibt die Farbe der Baseline für die vertikale Achse an. Kann ein beliebiger HTML-Farbstring sein, z. B. Typ:Zahl
Standard: 'black'
|
| vAxis.direction |
Die Richtung, in der die Werte entlang der vertikalen Achse wachsen. Standardmäßig werden niedrige Werte unten im Diagramm angezeigt. Geben Sie Typ:1 oder -1
Standard: 1
|
| vAxis.format |
Ein Formatstring für Beschriftungen numerischer Achsen. Dies ist eine Teilmenge des
Mustersatzes der ICU
.
Die tatsächliche Formatierung, die auf das Label angewendet wird, wird aus der Sprache abgeleitet, mit der die API geladen wurde. Weitere Informationen finden Sie unter Diagramme mit einer bestimmten Sprache laden .
Bei der Berechnung von Teilstrichen und Gitternetzlinien werden mehrere alternative Kombinationen aller relevanten Gitternetzlinienoptionen berücksichtigt. Alternativen werden abgelehnt, wenn die formatierten Teilstriche dupliziert werden oder sich überschneiden.
Sie können also Typ: String
Standard:automatisch
|
| vAxis.gridlines |
Ein Objekt mit Mitgliedern zum Konfigurieren der Gitternetzlinien auf der vertikalen Achse. Beachten Sie, dass Gitternetzlinien für vertikale Achsen horizontal gezeichnet werden. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: {color: '#333', minSpacing: 20}
Typ:Objekt
Standard:null
|
| vAxis.gridlines.color |
Die Farbe der vertikalen Gitternetzlinien im Diagrammbereich. Geben Sie einen gültigen HTML-Farbstring an. Typ: String
Standard: #CCC
|
| vAxis.gridlines.count |
Die ungefähre Anzahl der horizontalen Gitternetzlinien im Diagrammbereich.
Wenn Sie eine positive Zahl für Typ:Zahl
Standard: -1
|
| vAxis.gridlines.units |
Überschreibt das Standardformat für verschiedene Aspekte von Datums-/Datums-/Uhrzeitdatentypen, wenn sie mit berechneten Gitternetzlinien im Diagramm verwendet werden. Ermöglicht die Formatierung von Jahren, Monaten, Tagen, Stunden, Minuten, Sekunden und Millisekunden. Das allgemeine Format ist:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]},
hours: {format: [/*format strings here*/]},
minutes: {format: [/*format strings here*/]},
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]}
}
}
Weitere Informationen finden Sie unter Datums- und Uhrzeitwerte. Typ:Objekt
Standard:null
|
| vAxis.minorGridlines |
Ein Objekt mit Mitgliedern zum Konfigurieren der kleinen Gitternetzlinien auf der vertikalen Achse, ähnlich wie bei der Option „vAxis.gridlines“. Typ:Objekt
Standard:null
|
| vAxis.minorGridlines.color |
Die Farbe der vertikalen kleineren Gitternetzlinien im Diagrammbereich. Geben Sie einen gültigen HTML-Farbstring an. Typ: String
Standard:Eine Mischung aus Gitternetz- und Hintergrundfarben
|
| vAxis.minorGridlines.count |
Die Option „MinorGridlines.count“ wurde größtenteils verworfen, mit der Ausnahme, dass kleinere Gitternetzlinien durch Festlegen der Anzahl auf „0“ deaktiviert werden. Die Anzahl der kleineren Gitternetzlinien hängt vom Intervall zwischen den großen Gitternetzlinien (siehe „vAxis.gridlines.interval)“ und dem erforderlichen Mindestabstand ab (siehe „vAxis.minorGridlines.minSpacing“). Typ:Zahl
Standard: 1
|
| vAxis.minorGridlines.units |
Überschreibt das Standardformat für verschiedene Aspekte von Datum/Uhrzeit/Uhrzeit-Datentypen, wenn sie mit berechneten MinorGridlines für Diagramme verwendet werden. Ermöglicht die Formatierung von Jahren, Monaten, Tagen, Stunden, Minuten, Sekunden und Millisekunden. Das allgemeine Format ist:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
Weitere Informationen finden Sie unter Datums- und Uhrzeitwerte. Typ:Objekt
Standard:null
|
| vAxis.logScale |
Falls wahr, wird die vertikale Achse zu einer logarithmischen Skala. Hinweis: Alle Werte müssen positiv sein. Typ: Boolesch
Standard: false
|
| vAxis.scaleType |
Typ: String
Standard:null
|
| vAxis.textPosition |
Position des Textes der vertikalen Achse im Verhältnis zum Diagrammbereich. Unterstützte Werte: „out“, „in“, „none“. Typ: String
Standard: „out“
|
| vAxis.textStyle |
Ein Objekt, das den Textstil der vertikalen Achse angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| vAxis.ticks |
Ersetzt die automatisch generierten Ticks auf der Y-Achse durch das angegebene Array. Jedes Element des Arrays sollte entweder ein gültiger Tick-Wert (z. B. eine Zahl, ein Datum, Datum/Uhrzeit oder Uhrzeit) oder ein Objekt sein. Wenn es sich um ein Objekt handelt, sollte es die Eigenschaft
Das ViewWindow wird automatisch um den Mindest- und Höchstwert erweitert, sofern Sie keine Beispiele:
Typ:Array von Elementen
Standard:automatisch
|
| vAxis.title |
Typ: String
Standard: kein Titel
|
| vAxis.titleTextStyle |
Ein Objekt, das den Textstil für den Titel der vertikalen Achse angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| vAxis.maxValue |
Verschiebt den Maximalwert der vertikalen Achse auf den angegebenen Wert; dieser Wert ist in den meisten Diagrammen höher. Wird ignoriert, wenn dieser auf einen Wert festgelegt wird, der kleiner als der maximale y-Wert der Daten ist.
Typ:Zahl
Standard:automatisch
|
| vAxis.minValue |
Verschiebt den Mindestwert der vertikalen Achse auf den angegebenen Wert. In den meisten Diagrammen ist dieser Wert abwärts. Wird ignoriert, wenn dieser auf einen Wert festgelegt ist, der größer als der minimale y-Wert der Daten ist.
Typ:Zahl
Standard:null
|
| vAxis.viewWindowMode |
Gibt an, wie die vertikale Achse skaliert werden soll, um die Werte im Diagrammbereich zu rendern. Die folgenden Stringwerte werden unterstützt:
Typ: String
Standard: Entspricht "pretty", aber
vaxis.viewWindow.min und vaxis.viewWindow.max haben Vorrang, wenn sie verwendet werden.
|
| vAxis.viewWindow |
Gibt den Zuschneidebereich der vertikalen Achse an. Typ:Objekt
Standard:null
|
| vAxis.viewWindow.max |
Der maximale vertikale Datenwert, der gerendert werden soll. Wird ignoriert, wenn Typ:Zahl
Standard:automatisch
|
| vAxis.viewWindow.min |
Der minimale vertikale Datenwert, der gerendert werden soll. Wird ignoriert, wenn Typ:Zahl
Standard:automatisch
|
| width |
Breite des Diagramms in Pixeln. Typ:Zahl
Standard:Breite des beinhaltenden Elements
|
Methoden
| Methode | |
|---|---|
draw(data, options) |
Zeichnet das Diagramm. Das Diagramm akzeptiert erst dann weitere Methodenaufrufe, nachdem das Ereignis Return Type: Kein
|
getAction(actionID) |
Gibt das Kurzinfo-Aktionsobjekt mit dem angeforderten Rückgabetyp: Objekt
|
getBoundingBox(id) |
Gibt ein Objekt zurück, das den linken und oberen Rand sowie die Breite und Höhe des Diagrammelements
Die Werte beziehen sich auf den Container des Diagramms. Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Objekt
|
getChartAreaBoundingBox() |
Gibt ein Objekt zurück, das den linken und oberen Rand sowie die Breite und Höhe des Diagramminhalts enthält (ohne Labels und Legende):
Die Werte beziehen sich auf den Container des Diagramms. Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Objekt
|
getChartLayoutInterface() |
Gibt ein Objekt mit Informationen zur Platzierung des Diagramms und seiner Elemente auf dem Bildschirm zurück. Die folgenden Methoden können für das zurückgegebene Objekt aufgerufen werden:
Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Objekt
|
getHAxisValue(xPosition, optional_axis_index) |
Gibt den horizontalen Datenwert bei Beispiel: Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Zahl
|
getImageURI() |
Gibt das Diagramm serialisiert als Bild-URI zurück. Rufen Sie dies nach dem Zeichnen des Diagramms auf. Weitere Informationen finden Sie unter PNG-Diagramme drucken. Rückgabetyp: String
|
getSelection() |
Gibt ein Array der ausgewählten Diagrammentitäten zurück.
Auswählbare Elemente sind Blasen.
Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden.
Rückgabetyp:Array von Auswahlelementen
|
getVAxisValue(yPosition, optional_axis_index) |
Gibt den vertikalen Datenwert bei Beispiel: Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Zahl
|
getXLocation(dataValue, optional_axis_index) |
Gibt die X-Koordinate des Pixels von Beispiel: Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Zahl
|
getYLocation(dataValue, optional_axis_index) |
Gibt die Y-Koordinate des Pixels von Beispiel: Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Zahl
|
removeAction(actionID) |
Entfernt die Kurzinfo-Aktion mit dem angeforderten Rückgabetyp:
none |
setAction(action) |
Legt eine Kurzinfo-Aktion fest, die ausgeführt werden soll, wenn der Nutzer auf den Aktionstext klickt.
Die Methode
Alle Kurzinfo-Aktionen sollten vor dem Aufrufen der Rückgabetyp:
none |
setSelection() |
Wählt die angegebenen Diagrammentitäten aus. Verwirft die vorherige Auswahl.
Auswählbare Elemente sind Blasen.
Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden.
Return Type: Kein
|
clearChart() |
Löscht das Diagramm und gibt alle zugewiesenen Ressourcen frei. Return Type: Kein
|
Ereignisse
Weitere Informationen zur Verwendung dieser Ereignisse finden Sie unter Grundlegende Interaktivität, Ereignisse verarbeiten und Auslösen von Ereignissen.
| Name | |
|---|---|
animationfinish |
Wird ausgelöst, wenn die Übergangsanimation abgeschlossen ist. Properties:keine
|
click |
Wird ausgelöst, wenn der Nutzer auf das Diagramm klickt Damit können Sie feststellen, wann auf Titel, Datenelemente, Legendeneinträge, Achsen, Gitternetzlinien oder Labels geklickt wird. Eigenschaften: targetID
|
error |
Wird ausgelöst, wenn beim Versuch, das Diagramm zu rendern, ein Fehler auftritt. Properties (Eigenschaften): id, message, message
|
legendpagination |
Wird ausgelöst, wenn der Nutzer auf Pfeile zum Seitenumbruch für die Legende klickt. Gibt den nullbasierten Seitenindex der aktuellen Legende und die Gesamtzahl der Seiten zurück. Eigenschaften: currentPageIndex, totalPages
|
onmouseover |
Wird ausgelöst, wenn der Nutzer den Mauszeiger auf eine visuelle Entität bewegt. Gibt die Zeilen- und Spaltenindexe des entsprechenden Datentabellenelements zurück. Ein Infofeld entspricht einer Zeile in der Datentabelle (der Spaltenindex ist null). Eigenschaften: Zeile, Spalte
|
onmouseout |
Wird ausgelöst, wenn der Nutzer den Mauszeiger von einer visuellen Entität entfernt Gibt die Zeilen- und Spaltenindexe des entsprechenden Datentabellenelements zurück. Ein Infofeld entspricht einer Zeile in der Datentabelle (der Spaltenindex ist null). Eigenschaften: Zeile, Spalte
|
ready |
Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden aufrufen möchten, nachdem Sie es gezeichnet haben, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode Properties:keine
|
select |
Wird ausgelöst, wenn der Nutzer auf eine visuelle Entität klickt. Wenn Sie wissen möchten, was ausgewählt wurde, rufen Sie Properties:keine
|
Datenrichtlinie
Sämtlicher Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.