Übersicht
Ein Blasendiagramm, das im Browser mit SVG oder VML gerendert wird. Zeigt Tipps an, wenn ich den Mauszeiger auf Bubbles bewege
In einem Blasendiagramm wird ein Datensatz mit zwei bis vier Dimensionen dargestellt. Die ersten beiden Dimensionen werden als Koordinaten dargestellt, die dritte die Farbe und die vierte die 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>
Nach Zahlen färben
Sie können die Option colorAxis verwenden, um die Blasen proportional zu einem Wert einzufä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 des Infofelds steuern:
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>
Labels im Diagramm oben sind schwer zu lesen. Einer der Gründe dafür ist der weiße Bereich um sie herum. Das wird als Aura bezeichnet. Wenn Sie Ihre Diagramme ohne diese Tabelle bevorzugen, können Sie bubble.textStyle.auraColor auf 'none' 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: {
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 von 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 entspricht einer einzelnen Blase.
Columns:
| Spalte 0 | Spalte 1 | Spalte 2 | Spalte 3 (optional) | Spalte 4 (optional) | |
|---|---|---|---|---|---|
| Zweck: | ID (Name) des Infofelds | x-Koordinate | y-Koordinate | Entweder eine Serien-ID oder ein Wert, der eine Farbe auf einer Farbverlaufsskala darstellt, je nach Spaltentyp:
|
Größe; Werte in dieser Spalte werden mithilfe der Option sizeAxis tatsächlichen Pixelwerten zugeordnet. |
| Datentyp: | String | Zahl | Zahl | String oder Zahl | Zahl |
Konfigurationsoptionen
| Name | |
|---|---|
| Animation.Dauer |
Die Dauer der Animation in Millisekunden. Weitere Informationen finden Sie in der Animationsdokumentation. Typ: Zahl
Standard: 0
|
| Animation.Easing |
Die auf die Animation angewendete Easing-Funktion. Folgende Optionen sind verfügbar:
Typ: String
Standardeinstellung: „linear“
|
| Animation.Start |
Bestimmt, ob das Diagramm bei der ersten Zeichnung animiert wird. Bei Typ: Boolesch
Standardeinstellung false
|
| Achsentitel |
Position der Achsentitel im Vergleich zum Diagrammbereich. Unterstützte Werte:
Typ: String
Standard: 'out'
|
| backgroundColor |
Die Hintergrundfarbe für den Hauptbereich des Diagramms. Kann ein einfacher HTML-Farbstring sein, z. B. Typ: String oder Objekt
Standard:Weiß
|
| backgroundColor.Strike |
Die Farbe des Diagrammrahmens als HTML-Farbstring. Typ: String
Standard: „#666“
|
| backgroundColor.strichBreite |
Die Rahmenbreite in Pixeln. Typ: Zahl
Standard: 0
|
| backgroundColor.fill |
Die Füllfarbe des Diagramms als HTML-Farbstring. Typ: String
Standard:Weiß
|
| bubble |
Ein Objekt mit Mitgliedern, um die visuellen Eigenschaften der Blasen zu konfigurieren. Type: Objekt
Standard: null
|
| Bubble.opacity |
Die Deckkraft der Blasen ist gleich 0, wobei 0 vollständig transparent und 1 vollständig deckend ist. Typ:Zahl zwischen 0,0 und 1,0
Standard:0,8
|
| Blasenstrich |
Die Farbe des Strichs der Blasen. Typ: String
Standard: '#Courier'
|
| Bubble.textStyle |
Ein Objekt, das den Infofeld-Textstil angibt. Das Objekt hat folgendes Format: {color: <string>, fontName: <string>, fontSize: <number>}
Type: Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| Diagrammbereich |
Ein Objekt mit Mitgliedern zum Konfigurieren der Platzierung und Größe des Diagrammbereichs (wo 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 % ist ein Prozentsatz. Beispiel: Type: Objekt
Standard: null
|
| Diagrammfläche.Hintergrundfarbe |
Hintergrundfarbe des Diagrammbereichs. Wenn ein String verwendet wird, kann es sich entweder um einen Hexadezimalstring handeln (z.B. „#fdc“) oder ein englischer Farbname. Wenn ein Objekt verwendet wird, können die folgenden Attribute angegeben werden:
Typ: String oder Objekt
Standard:Weiß
|
| Diagrammfläche links |
Gibt an, wie weit das Diagramm vom linken Rand gezeichnet werden soll. Typ:Zahl oder String
Standard: automatisch
|
| ChartArea.Oben |
Gibt an, wie weit das Diagramm vom oberen Rand aus gezeichnet werden soll. Typ: Zahl oder String
Standard: automatisch
|
| Diagrammfläche.width |
Breite des Diagrammbereichs. Typ:Zahl oder String
Standard: automatisch
|
| Diagrammfläche.height |
Höhe des Diagrammbereichs. Typ: Zahl oder String
Standard: automatisch
|
| Farben |
Die für die Diagrammelemente zu verwendenden Farben. Ein Array von Strings, wobei jedes Element ein HTML-Farbstring ist, zum Beispiel Typ:Stringarray
Standard: Standardfarben
|
| colorAxis |
Ein Objekt, das eine Zuordnung zwischen Farbspaltenwerten und Farben oder einer Farbverlaufsskala angibt. Um Eigenschaften dieses Objekts anzugeben, können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt: {minValue: 0, colors: ['#FF0000', '#00FF00']}
Type: Objekt
Standard: null
|
| colorAxis.minWert |
Falls vorhanden, wird ein Mindestwert für Diagrammfarbdaten angegeben. Farbdatenwerte dieses Werts und darunter werden als erste Farbe im Bereich Typ:Zahl
Standard: Mindestwert der Farbspalte in Diagrammdaten
|
| colorAxis.maxValue-Wert |
Falls vorhanden, wird ein Maximalwert für Diagrammfarbdaten angegeben. Farbdatenwerte ab diesem Wert werden als letzte Farbe im Bereich Typ: Zahl
Standard:Maximalwert der Farbspalte in Diagrammdaten
|
| colorAxis.values |
Steuert, wie vorhanden, wie Werte mit Farben verknüpft werden. Jeder Wert wird der entsprechenden Farbe im Array Typ:Zahlenarray
Standard: null
|
| colorAxis.colors |
Farben, die den Werten in der Visualisierung zugewiesen werden Ein String-Array, bei dem jedes Element ein HTML-Farbstring ist, zum Beispiel Typ: Array mit Farbstrings
Standard: null
|
| colorAxis.Legende |
Ein Objekt, das den Stil der Farbverlaufslegende angibt. Type: Objekt
Standard: null
|
| colorAxis.legend |
Position der Legende. folgende Arten von Werten sind möglich:
Type: Objekt
Standard: „top“
|
| colorAxis.legend.textStil |
Ein Objekt, das den Legendentextstil angibt. Das Objekt hat folgendes Format: {color: <string>, fontName: <string>, fontSize: <number>}
Type: 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 ICU-Mustersatzes.
Für Typ: String
Standard: automatisch
|
| interaktivität aktivieren |
Gibt an, ob das Diagramm nutzerbasierte Ereignisse auslöst oder auf Nutzerinteraktionen reagiert. Bei „false“ wird im Diagramm kein „select“-Ereignis oder ein anderes interaktionsbasiertes Ereignis ausgelöst. Stattdessen werden Ready- oder Error-Ereignisse ausgelöst. Außerdem wird je nach Nutzereingabe kein Hover-Text angezeigt oder anderweitig geändert. Typ: Boolesch
Standard: true
|
| explorer |
Mit der Option Diese Funktion ist experimentell und kann sich in zukünftigen Releases ändern. Hinweis: Der Explorer funktioniert nur mit fortlaufenden Achsen (z. B. Zahlen oder Datumsangaben). Type: Objekt
Standard: null
|
| Explorer.actions |
Der Google Charts-Explorer unterstützt drei Aktionen:
Typ:Stringarray
Standard: ['dragToPan', 'rightClickToReset']
|
| Explorer.axis |
Standardmäßig können Nutzer sowohl horizontal als auch vertikal schwenken, wenn die Option Typ: String
Standardeinstellung: Horizontal und vertikal schwenken
|
| Explorer.keepInBounds |
Standardmäßig können Nutzer schwenken, unabhängig davon, wo sich die Daten befinden. Verwenden Sie Typ: Boolesch
Standard: false
|
| Explorer.maxZoomIn |
Das Maximum, das der Explorer heranzoomen kann. Standardmäßig können Nutzer heranzoomen, sodass sie nur 25% der Originalansicht sehen. Wenn Sie Typ:Zahl
Standard:0,25
|
| Explorer.maxZoomOut |
Das Maximum, das der Explorer herauszoomen kann. Standardmäßig können Nutzer weit herauszoomen, sodass das Diagramm nur ein Viertel des verfügbaren Platzes einnimmt. Wenn Sie Typ: Zahl
Standard: 4
|
| Explorer.zoomDelta |
Wenn Nutzer heran- oder herauszoomen, legt Typ: Zahl
Standard: 1,5
|
| Schriftgröße |
Die Standardschriftgröße des gesamten Textes im Diagramm in Pixeln. Sie können dies mit Attributen für bestimmte Diagrammelemente überschreiben. Typ:Zahl
Standard: automatisch
|
| Schriftname |
Die Standardschriftart für den gesamten Text im Diagramm. Sie können dies mit Attributen für bestimmte Diagrammelemente überschreiben. Typ: String
Standardeinstellung: „MongoDB“
|
| forceIFrame |
Zeichnet das Diagramm innerhalb eines Inline-Frames. Beachten Sie, dass diese Option im IE8 ignoriert wird. Alle IE8-Diagramme werden in iFrames gezeichnet. Typ: Boolesch
Standard: false
|
| HACHSE |
Ein Objekt mit Mitgliedern zur Konfiguration verschiedener horizontaler Achsenelemente Zur Angabe von Attributen dieses Objekts können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt:
{
title: 'Hello',
titleTextStyle: {
color: '#FF0000'
}
}
Type: Objekt
Standard: null
|
| hAxis.baseline |
Der Ausgangswert für die horizontale Achse. Typ: Zahl
Standard: automatisch
|
| hAxis.baselineColor |
Die Farbe der Referenzlinie für die horizontale Achse. Kann ein beliebiger HTML-Farbstring sein, z. B. Typ: Zahl
Standard: 'schwarz'
|
| hAxis.direction |
Die Richtung, in der die Werte entlang der horizontalen Achse wachsen. Geben Sie Typ: 1 oder -1
Standard: 1
|
| hAxis-Format |
Ein Formatstring für Labels der numerischen Achse Dies ist eine Teilmenge des ICU-Mustersatzes. Für
Die tatsächliche Formatierung des Labels wird aus dem Gebietsschema abgeleitet, mit dem die API geladen wurde. Weitere Informationen finden Sie unter Diagramme mit einer bestimmten Sprache laden.
Bei der Berechnung von Tick-Werten und Gitternetzlinien werden mehrere alternative Kombinationen aller relevanten Gitternetzlinien-Optionen berücksichtigt und Alternativen abgelehnt, wenn die formatierten Teilstrich-Labels 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. Beachten Sie, dass die Gitternetzlinien für die horizontale Achse vertikal gezeichnet sind. Zur Angabe von Attributen dieses Objekts können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt: {color: '#333', minSpacing: 20}
Type: Objekt
Standard: null
|
| hAxis.gridlines.color |
Die Farbe der horizontalen Gitternetzlinien im Diagrammbereich. Gib einen gültigen HTML-Farbstring an. Typ: String
Standard: '#CCC'
|
| hAxis.gridlines.count |
Die ungefähre Anzahl horizontaler Gitternetzlinien im Diagrammbereich.
Wenn Sie für Typ: Zahl
Standard: -1
|
| hAxis.gridlines.units |
Überschreibt das Standardformat für verschiedene Aspekte von Datentypen für Datum/Datum/Uhrzeit, wenn es mit berechneten Gitternetzlinien verwendet wird. Ermöglicht die Formatierung für Jahre, Monate, Tage, Stunden, Minuten, Sekunden und Millisekunden. Allgemeines Format:
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 Datum und Uhrzeit. Type: Objekt
Standard: null
|
| hAxis.minorGridlines |
Ein Objekt mit Mitgliedern, um die kleinen Gitternetzlinien auf der horizontalen Achse zu konfigurieren, ähnlich der Option „hAxis.gridlines“. Type: Objekt
Standard: null
|
| hAxis.minorGridlines.color |
Die Farbe der horizontalen kleinen Gitternetzlinien im Diagrammbereich. Gib einen gültigen HTML-Farbstring an. Typ: String
Standard: Eine Mischung aus Raster- und Hintergrundfarben
|
| hAxis.minorGridlines.count |
Die Option Typ:Zahl
Standard: 1
|
| hAxis.minorGridlines.units |
Überschreibt das Standardformat für verschiedene Aspekte von Datentypen für Datum/Datum/Uhrzeit, wenn es mit im Diagramm berechneten Minderjährigen verwendet wird. Ermöglicht die Formatierung für Jahre, Monate, Tage, Stunden, Minuten, Sekunden und Millisekunden. Allgemeines Format:
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 Datum und Uhrzeit. Type: Objekt
Standard: null
|
| hAxis.logScale |
Typ: Boolesch
Standard: false
|
| hAxis.scaleType |
Typ: String
Standard: null
|
| Position hAxis.text |
Position des Texts auf der horizontalen Achse relativ zum Diagrammbereich. Unterstützte Werte: „out“, „in“ und „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> }
Type: Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.ticks |
Ersetzt die automatisch generierten X-Achsen-Ticks durch das angegebene Array. Jedes Element des Arrays muss entweder ein gültiger Tickwert (z. B. eine Zahl, ein Datum, ein Datum oder eine Uhrzeit) oder ein Objekt sein. Wenn es sich um ein Objekt handelt, sollte es die Eigenschaft
Das viewWindow wird automatisch um die Mindest- und Höchstwerte erweitert, es sei denn, Sie geben Beispiele:
Typ: Array von Elementen
Standard: automatisch
|
| hAxis.title |
Typ: String
Standard: null
|
| hAxis.titleTextStyle |
Ein Objekt, das den Titeltext der horizontalen Achse angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type: Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.maxWert |
Verschiebt den Maximalwert der horizontalen Achse auf den angegebenen Wert. Dies ist bei den meisten Diagrammen rechts. Wird ignoriert, wenn dieser Wert kleiner als der maximale x-Wert der Daten ist.
Typ:Zahl
Standard: automatisch
|
| hAxis.minWert |
Verschiebt den Mindestwert der horizontalen Achse auf den angegebenen Wert. In den meisten Diagrammen wird dieser Wert auf der linken Seite angezeigt. Wird ignoriert, wenn dieser Wert 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 bei Verwendung Vorrang.
|
| hAxis.viewWindow |
Gibt den Zuschneidebereich der horizontalen Achse an. Type: 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 zur Konfiguration verschiedener Aspekte der Legende. Zur Angabe von Attributen dieses Objekts können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt: {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: Objekt
Standard: null
|
| Legende.Ausrichtung |
Ausrichtung der Legende. folgende Arten von Werten sind möglich:
Anfang, Mittelpunkt und Ende sind relativ zum Stil der Legende (vertikal oder horizontal). In der Legende „Rechts“ befinden sich „Start“ und „Ende“ oben bzw. unten. Bei einer Legende „Oben“ befinden sich „Start“ bzw. „Ende“ am linken bzw. rechten Rand des Bereichs. Der Standardwert hängt von der Position der Legende ab. Für Legenden des Typs "Unten" lautet die Standardeinstellung "Mitte", andere Legenden standardmäßig "Anfang". Typ: String
Standard: automatisch
|
| Legende.maxLines |
Maximale Anzahl von Zeilen in der Legende. Legen Sie eine Zahl größer als eins fest, um der Legende Zeilen hinzuzufügen. Hinweis: Die genaue Logik zum Ermitteln der tatsächlichen Anzahl der gerenderten Zeilen ist noch in der Entwicklung. Diese Option funktioniert derzeit nur, wenn „legend“ für „position“ festgelegt ist. Typ:Zahl
Standard: 1
|
| Legende.Seitenindex |
Anfänglich ausgewählter nullbasierter Seitenindex der Legende. Typ:Zahl
Standard: 0
|
| Legende.Position |
Position der Legende. folgende Arten von Werten sind möglich:
Typ: String
Standardeinstellung: „right“
|
| Legende.textStyle |
Ein Objekt, das den Legendentextstil angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type: Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| Auswahlmodus |
Wenn Typ: String
Standard: „einfach“
|
| series |
Ein Objekt mit Objekten, wobei die Schlüssel Reihennamen sind (die Werte in der Spalte „Farbe“) und jedes Objekt, 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 Properties:
series: {'Europe': {color: 'green'}}
Typ: Objekt mit verschachtelten Objekten
Standard: {}
|
| sizeAxis |
Ein Objekt mit Mitgliedern, mit dem konfiguriert wird, wie Werte mit der Größe von Blasen verknüpft werden. Zur Angabe von Attributen dieses Objekts können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt: {minValue: 0, maxSize: 20}
Type: Objekt
Standard: null
|
| "sizeAxis.maxSize" |
Maximaler Radius der größten möglichen Blase in Pixeln. Typ: Zahl
Standard: 30
|
| "sizeAxis.maxValue" |
Der Größenwert (wie in den Diagrammdaten angezeigt), der Typ: Zahl
Standard: Höchstwert der Größenspalte in Diagrammdaten
|
| sizeAxis.minSize |
Der minimale Radius der kleinstmöglichen Blase, in Pixel. 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 |
Wenn „true“, werden die Blasen nach Größe sortiert, sodass die kleineren Blasen über den größeren angezeigt werden. Wenn „false“ angegeben ist, werden die Blasen in der DataTable nach ihrer Reihenfolge sortiert. Typ: Boolesch
Standard: true
|
| Design |
Ein Design ist eine Gruppe vordefinierter Werte, die gemeinsam ein bestimmtes Diagrammverhalten oder einen bestimmten visuellen Effekt erzielen. Derzeit ist nur ein Design verfügbar:
Typ: String
Standard: null
|
| title |
Text, der über dem Diagramm angezeigt werden soll. Typ: String
Standard:kein Titel
|
| titlePosition |
Position des Diagramms im Vergleich zum Diagrammbereich. Unterstützte Werte:
Typ: String
Standard: 'out'
|
| Titeltextstil |
Ein Objekt, das den Stil des Titeltexts angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type: Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| Kurzinfo |
Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Kurzinfo-Elemente. Zur Angabe von Attributen dieses Objekts können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt: {textStyle: {color: '#FF0000'}, showColorCode: true}
Type: Objekt
Standard: null
|
| tooltip.isHtml |
Wenn die Richtlinie auf „true“ gesetzt ist, werden HTML-gerenderte statt SVG-Kurzinfos verwendet. Weitere Informationen finden Sie unter Kurzinfos anpassen. Hinweis: Die Anpassung der HTML-Kurzinfos über die Datenrolle der Kurzinfo-Spalte wird von der Visualisierung des Blasendiagramms nicht unterstützt. Typ: Boolesch
Standard: false
|
| tooltip.textStyle |
Ein Objekt, das den Textstil der Kurzinfo angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type: Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| tooltip.Trigger |
Die Nutzerinteraktion, die dazu führt, dass die Kurzinfo angezeigt wird:
Typ: String
Standardeinstellung: „focus“
|
| vAxis |
Ein Objekt mit Mitgliedern zur Konfiguration verschiedener Elemente der vertikalen Achse Zur Angabe von Attributen dieses Objekts können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt: {title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Type: Objekt
Standard: null
|
| vAxis.baseline |
Typ:Zahl
Standard: automatisch
|
| vAxis.baselineColor |
Legt die Farbe der Referenzlinie für die vertikale Achse fest. Kann ein beliebiger HTML-Farbstring sein, z. B. Typ: Zahl
Standard: 'schwarz'
|
| vAxis.direction |
Die Richtung, in der die Werte entlang der vertikalen Achse wachsen. Standardmäßig befinden sich die unteren Werte im unteren Bereich des Diagramms. Geben Sie Typ:1 oder -1
Standard: 1
|
| vAxis.format |
Ein Formatstring für Labels der numerischen Achse Dies ist eine Teilmenge des ICU-Mustersatzes.
Für
Die tatsächliche Formatierung des Labels wird aus dem Gebietsschema abgeleitet, mit dem die API geladen wurde. Weitere Informationen finden Sie unter Diagramme mit einer bestimmten Sprache laden.
Bei der Berechnung von Tick-Werten und Gitternetzlinien werden mehrere alternative Kombinationen aller relevanten Gitternetzlinien-Optionen berücksichtigt und Alternativen abgelehnt, wenn die formatierten Teilstrich-Labels 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 die Gitternetzlinien für die vertikale Achse horizontal gezeichnet sind. Zur Angabe von Attributen dieses Objekts können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt: {color: '#333', minSpacing: 20}
Type: 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 horizontaler Gitternetzlinien im Diagrammbereich.
Wenn Sie für Typ:Zahl
Standard: -1
|
| vAxis.gridlines.units |
Überschreibt das Standardformat für verschiedene Aspekte von Datentypen für Datum/Datum/Uhrzeit, wenn es mit berechneten Gitternetzlinien verwendet wird. Ermöglicht die Formatierung für Jahre, Monate, Tage, Stunden, Minuten, Sekunden und Millisekunden. Allgemeines Format:
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 Datum und Uhrzeit. Type: Objekt
Standard: null
|
| vAxis.minorGridlines |
Ein Objekt mit Mitgliedern zur Konfiguration der kleinen Gitternetzlinien auf der vertikalen Achse, ähnlich wie bei der Option vAxis.gridlines. Type: Objekt
Standard: null
|
| vAxis.minorGridlines.color |
Die Farbe der vertikalen Nebengitternetzlinien im Diagrammbereich. Gib einen gültigen HTML-Farbstring an. Typ: String
Standard:Eine Mischung aus Raster- und Hintergrundfarben
|
| vAxis.minorGridlines.count |
Die Option MinderjährigerGridlines.count ist größtenteils veraltet, mit der Ausnahme, dass Gitternetzlinien deaktiviert werden, indem die Anzahl auf 0 gesetzt wird. Die Anzahl der Nebengitternetzlinien hängt vom Intervall zwischen den Hauptgitternetzlinien (siehe vAxis.gridlines.interval) und dem erforderlichen Mindestbereich ab (siehe vAxis.minorGridlines.minSpacing). Typ:Zahl
Standard: 1
|
| vAxis.minorGridlines.units |
Überschreibt das Standardformat für verschiedene Aspekte von Datentypen für Datum/Datum/Uhrzeit, wenn es mit im Diagramm berechneten Minderjährigen verwendet wird. Ermöglicht die Formatierung für Jahre, Monate, Tage, Stunden, Minuten, Sekunden und Millisekunden. Allgemeines Format:
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 Datum und Uhrzeit. Type: Objekt
Standard: null
|
| vAxis.logScale |
Bei „true“ 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 auf der vertikalen Achse relativ zum Diagrammbereich. Unterstützte Werte: „out“, „in“ und „none“. Typ: String
Standard: 'out'
|
| vAxis.textStil |
Ein Objekt, das den Textstil der vertikalen Achse angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type: Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| vAxis.ticks |
Ersetzt die automatisch generierten Y-Achsen-Ticks durch das angegebene Array. Jedes Element des Arrays muss entweder ein gültiger Tickwert (z. B. eine Zahl, ein Datum, ein Datum oder eine Uhrzeit) oder ein Objekt sein. Wenn es sich um ein Objekt handelt, sollte es die Eigenschaft
Das viewWindow wird automatisch um die Mindest- und Höchstwerte erweitert, es sei denn, Sie geben Beispiele:
Typ:Array von Elementen
Standard: automatisch
|
| vAxis.Titel |
Typ: String
Standard: kein Titel
|
| vAxis.titleTextStyle |
Ein Objekt, das den Titeltext der vertikalen Achse angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type: Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| Vaxis.maxValue |
Verschiebt den Maximalwert der vertikalen Achse auf den angegebenen Wert. Dies wird bei den meisten Diagrammen nach oben angewendet. Wird ignoriert, wenn dieser Wert kleiner als der maximale y-Wert der Daten ist.
Typ: Zahl
Standard: automatisch
|
| vAxis.minWert |
Verschiebt den Mindestwert der vertikalen Achse auf den angegebenen Wert. Dieser Wert wird in den meisten Diagrammen nach unten verschoben. Wird ignoriert, wenn dieser Wert größer als der minimale y-Wert der Daten ist.
Typ: Zahl
Standard: null
|
| vAxis.viewWindowMode |
Gibt an, wie die vertikale Achse skaliert wird, 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 bei Verwendung Vorrang.
|
| vAxis.viewWindow |
Gibt den Zuschneidebereich der vertikalen Achse an. Type: 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. Im Diagramm sind weitere Methodenaufrufe erst möglich, nachdem das Ereignis Rückgabetyp: Keine
|
getAction(actionID) |
Gibt das Kurzinfo-Aktionsobjekt mit dem angeforderten Return Type: Objekt für die Rückgabe
|
getBoundingBox(id) |
Gibt ein Objekt zurück, das links, oben, breit und hoch des Diagrammelements
Die Werte beziehen sich auf den Container des Diagramms. Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde. Return Type: Objekt für die Rückgabe
|
getChartAreaBoundingBox() |
Gibt ein Objekt zurück, das links, oben, breit und hoch des Diagramminhalts ist, d.h. ohne Labels und Legende:
Die Werte beziehen sich auf den Container des Diagramms. Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde. Return Type: Objekt für die Rückgabe
|
getChartLayoutInterface() |
Gibt ein Objekt zurück, das Informationen zur Platzierung des Diagramms und seiner Elemente auf dem Bildschirm enthält. Die folgenden Methoden können für das zurückgegebene Objekt aufgerufen werden:
Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde. Return Type: Objekt für die Rückgabe
|
getHAxisValue(xPosition, optional_axis_index) |
Gibt den horizontalen Datenwert bei Beispiel: Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde. Rückgabetyp: Nummer
|
getImageURI() |
Gibt das serialisierte Diagramm als Bild-URI zurück. Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde. 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 Bubbles.
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 diese Methode auf, nachdem das Diagramm gezeichnet wurde. Rückgabetyp: Nummer
|
getXLocation(dataValue, optional_axis_index) |
Gibt die Pixel-x-Koordinate von Beispiel: Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde. Rückgabetyp: Nummer
|
getYLocation(dataValue, optional_axis_index) |
Gibt die Pixel-y-Koordinate von Beispiel: Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde. Rückgabetyp: Nummer
|
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.
Für die Methode
Alle Kurzinfo-Aktionen sollten vor dem Aufruf der Rückgabetyp:
none |
setSelection() |
Die angegebenen Diagrammentitäten werden ausgewählt. Die vorherige Auswahl wird abgebrochen.
Auswählbare Elemente sind Bubbles.
Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden.
Rückgabetyp: Keine
|
clearChart() |
Löscht das Diagramm und gibt alle zugehörigen Ressourcen frei. Rückgabetyp: Keine
|
Ereignisse
Weitere Informationen zur Verwendung dieser Ereignisse finden Sie unter Grundlegende Interaktivität, Ereignisse verwalten und Auslösende Ereignisse.
| Name | |
|---|---|
animationfinish |
Wird ausgelöst, wenn die Umstellungsanimation beendet ist. Eigenschaften: Keine
|
click |
Wird ausgelöst, wenn der Nutzer in das Diagramm klickt Kann verwendet werden, um zu erkennen, wann auf den Titel, Datenelemente, Legendeneinträge, Achsen, Gitternetzlinien oder Labels geklickt wird. Eigenschaften: targetID
|
error |
Wird ausgelöst, wenn beim Rendern des Diagramms ein Fehler auftritt Eigenschaften: ID, Nachricht
|
legendpagination |
Wird ausgelöst, wenn der Nutzer auf Paginierungspfeile klickt Gibt den aktuellen nullbasierten Seitenindex 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. Eine Blase korreliert mit einer Zeile in der Datentabelle (Spaltenindex ist null). Attribute:Zeile, Spalte
|
onmouseout |
Wird ausgelöst, wenn der Nutzer die Maus von einer visuellen Entität wegbewegt Gibt die Zeilen- und Spaltenindexe des entsprechenden Datentabellenelements zurück. Eine Blase korreliert mit einer Zeile in der Datentabelle (Spaltenindex ist null). Attribute:Zeile, Spalte
|
ready |
Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden nach dem Zeichnen aufrufen möchten, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode Eigenschaften:Keine
|
select |
Wird ausgelöst, wenn der Nutzer auf ein visuelles Element klickt. Rufen Sie Eigenschaften: Keine
|
Datenrichtlinie
Der gesamte Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.