Übersicht
Ein Spaltendiagramm ist ein vertikales Balkendiagramm, das im Browser mit SVG oder VML gerendert wird, je nachdem, was für den Browser des Nutzers geeignet ist. Wie alle Google-Diagramme zeigen auch Säulendiagramme Kurzinfos an, wenn der Nutzer den Mauszeiger auf die Daten bewegt. Eine horizontale Version dieses Diagramms finden Sie im Balkendiagramm.
Beispiele
Spalten farblich markieren
Sehen wir uns die Dichten von vier Edelmetallen an:
Oben sind alle Farben standardmäßig Blau. Das liegt daran, dass sie alle zu derselben Reihe gehören. Wenn es eine zweite Reihe gibt, wäre sie rot gefärbt. Diese Farben können mit der Stilrolle angepasst werden:
Es gibt drei verschiedene Möglichkeiten, die Farben auszuwählen. In unserer Datentabelle werden alle angezeigt: RGB-Werte, englische Farbnamen und eine CSS-ähnliche Deklaration:
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }], ['Copper', 8.94, '#b87333'], // RGB value ['Silver', 10.49, 'silver'], // English color name ['Gold', 19.30, 'gold'], ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration ]);
Spaltenstile
Mit der Stilrolle können Sie verschiedene Aspekte der Darstellung von Spalten mit CSS-ähnlichen Deklarationen steuern:
color
opacity
fill-color
fill-opacity
stroke-color
stroke-opacity
stroke-width
Wir raten davon ab, zu viele Stile innerhalb eines Diagramms zu mischen. Wählen Sie einen Stil aus und behalten Sie ihn bei. Aber um alle Stilattribute zu veranschaulichen, wird hier ein Sampler verwendet:
Die ersten beiden Spalten verwenden jeweils eine bestimmte color
(die erste mit einem englischen Namen, die zweite mit einem RGB-Wert). Es wurde keine opacity
ausgewählt. Daher wird die Standardeinstellung 1, 0 (vollständig deckend) verwendet. Aus diesem Grund verdeckt die zweite Spalte die dahinterliegende Gitterlinie. In der dritten Spalte wird ein opacity
von 0, 2 verwendet, der die Gitternetzlinie anzeigt. Im vierten werden die drei Stilattribute verwendet: stroke-color
und stroke-width
, um den Rahmen zu zeichnen, und fill-color
, um die Farbe des Rechtecks anzugeben. Die Spalte ganz rechts verwendet zusätzlich stroke-opacity
und fill-opacity
, um Deckkraft für Rahmen und Füllung auszuwählen:
function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Visitations', { role: 'style' } ], ['2010', 10, 'color: gray'], ['2020', 14, 'color: #76A7FA'], ['2030', 16, 'opacity: 0.2'], ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'], ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2'] ]);
Spalten mit Labels versehen
Diagramme enthalten in den Kurzinfos verschiedene Arten von Labels, z. B. Markierungslabels, Legendenlabels und Labels. In diesem Abschnitt erfahren Sie, wie Sie Labels in einem oder in der Nähe der Spalten eines Säulendiagramms platzieren.
Angenommen, wir möchten jede Spalte mit dem entsprechenden chemischen Symbol versehen. Das ist mit der Rolle annotation möglich:
In unserer Datentabelle definieren wir eine neue Spalte mit { role:
'annotation' }
, die die Spaltenlabels enthält:
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ], ['Copper', 8.94, '#b87333', 'Cu' ], ['Silver', 10.49, 'silver', 'Ag' ], ['Gold', 19.30, 'gold', 'Au' ], ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ] ]);
Nutzer können den Mauszeiger auf die Spalten bewegen, um die Datenwerte zu sehen. Sie können sie jedoch in die Spalten aufnehmen:
Dies ist etwas komplizierter, als es sein sollte, da wir eine DataView
erstellen, um die Annotation für jede Spalte anzugeben.
<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([ ["Element", "Density", { role: "style" } ], ["Copper", 8.94, "#b87333"], ["Silver", 10.49, "silver"], ["Gold", 19.30, "gold"], ["Platinum", 21.45, "color: #e5e4e2"] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 2]); var options = { title: "Density of Precious Metals, in g/cm^3", width: 600, height: 400, bar: {groupWidth: "95%"}, legend: { position: "none" }, }; var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values")); chart.draw(view, options); } </script> <div id="columnchart_values" style="width: 900px; height: 300px;"></div>
Wenn wir den Wert anders formatieren möchten, können wir einen Formatierer definieren und in eine Funktion wie diese einbinden:
function getValueAt(column, dataTable, row) { return dataTable.getFormattedValue(row, column); }
Dann könnten wir es mit calc: getValueAt.bind(undefined, 1)
aufrufen.
Wenn das Label zu groß ist, um vollständig in die Spalte zu passen, wird es außerhalb der Spalte angezeigt:
Gestapelte Säulendiagramme
Ein übereinander angeordnetes Säulendiagramm ist ein Säulendiagramm, in dem verwandte Werte übereinander angeordnet sind. Negative Werte werden in umgekehrter Reihenfolge unter der Referenz des Diagramms gestapelt. Sie wird in der Regel verwendet, wenn sich eine Kategorie in Komponenten unterteilt. Betrachten wir zum Beispiel einige hypothetische Buchverkäufe, unterteilt nach Genre und Vergleich mit der Zeit:
Sie erstellen ein gestapeltes Säulendiagramm, indem Sie die Option isStacked
auf true
setzen:
var data = google.visualization.arrayToDataTable([ ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', { role: 'annotation' } ], ['2010', 10, 24, 20, 32, 18, 5, ''], ['2020', 16, 22, 23, 30, 16, 9, ''], ['2030', 28, 19, 29, 30, 12, 13, ''] ]); var options = { width: 600, height: 400, legend: { position: 'top', maxLines: 3 }, bar: { groupWidth: '75%' }, isStacked: true, };
Gestapelte Säulendiagramme unterstützen auch 100 %-Stapel, wobei die Stapel von Elementen bei jedem Domainwert neu skaliert werden, sodass sie zusammen 100 % ergeben. Als Optionen stehen isStacked: 'percent'
zur Verfügung, mit der jeder Wert als Prozentsatz von 100 % formatiert wird, und isStacked: 'relative'
, mit dem jeder Wert als Bruchteil von 1 formatiert wird. Es gibt auch die Option isStacked: 'absolute'
, die funktional die Funktion isStacked: true
hat.
Im gestapelten Diagramm rechts sind die Tickwerte auf der relativen Skala von 0 bis 1 als Bruchteile von 1 angegeben. Die Achsenwerte werden jedoch als Prozentsätze angezeigt. Der Grund hierfür ist, dass die Teilpunkte der Achse bei Verwendung des Formats „#.##%“ auf die relativen Skalawerte von 0–1 angewendet werden. Wenn Sie isStacked: 'percent'
verwenden, achten Sie darauf, Tick-/Achsenwerte auf der relativen Skala von 0 bis 1 anzugeben.
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, vAxis: {minValue: 0} };
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, vAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };
Säulendiagramme erstellen
2014 kündigte Google Richtlinien an, die ein einheitliches Erscheinungsbild für alle Properties und Apps (z. B. Android-Apps) unterstützen, die auf Google-Plattformen ausgeführt werden. Wir nennen dies Material Design. Wir stellen für alle unsere Kerndiagramme „Material“-Versionen zur Verfügung. Sie können diese gerne verwenden, wenn Sie möchten, wie sie aussehen.
Das Erstellen eines Säulendiagramms mit Material ähnelt dem Erstellen eines sogenannten "klassischen" Säulendiagramms. Sie laden die Google Visualization API (aber mit dem Paket 'bar'
anstelle des Pakets 'corechart'
), definieren Ihre Datentabelle und erstellen dann ein Objekt (anstelle der Klasse google.charts.Bar
anstelle von google.visualization.ColumnChart
).
Da Balkendiagramme und Säulendiagramme im Wesentlichen identisch sind, aber im Hinblick auf ihre Ausrichtung identisch sind, rufen wir sowohl Material- als auch Balkendiagramme (klassisch, Säulendiagramme) oder horizontale (Balkendiagramme) auf. Der einzige Unterschied bei Material besteht in der Option bars
. Wenn 'horizontal'
festgelegt ist, entspricht die Ausrichtung dem klassischen klassischen Balkendiagramm. Andernfalls sind die Balken vertikal.
Hinweis:Material-Diagramme funktionieren in älteren Versionen von Internet Explorer nicht. Internet Explorer 8 und ältere Versionen unterstützen SVG nicht, was für Material Charts erforderlich ist.
Materialdiagramme weisen im Vergleich zu klassischen Säulendiagrammen viele kleine Verbesserungen auf. Hierzu zählen eine verbesserte Farbvorlage, abgerundete Ecken, eine klarere Formatierung von Labels, ein engerer Standardabstand zwischen Reihen, weichere Gitternetzlinien und Titel sowie das Hinzufügen von Untertiteln.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', } }; var chart = new google.charts.Bar(document.getElementById('columnchart_material')); chart.draw(data, google.charts.Bar.convertOptions(options)); } </script> </head> <body> <div id="columnchart_material" style="width: 800px; height: 500px;"></div> </body> </html>
Die Materialdiagramme befinden sich in der Betaphase. Das Erscheinungsbild und die Interaktivität sind weitgehend endgültig, aber viele der Optionen, die in klassischen Diagrammen verfügbar sind, sind dort noch nicht verfügbar. Eine Liste der noch nicht unterstützten Optionen finden Sie hier.
Außerdem ist noch nicht festgelegt, wie Optionen deklariert werden. Wenn Sie also eine der klassischen Optionen verwenden, müssen Sie Ihre in „Material“-Optionen umwandeln. Dazu ersetzen Sie diese Zeile:
chart.draw(data, options);
...durch:
chart.draw(data, google.charts.Bar.convertOptions(options));
Mit google.charts.Bar.convertOptions()
können Sie bestimmte Features wie die Voreinstellung hAxis/vAxis.format
nutzen.
Dual-Y-Diagramme
Manchmal möchten Sie zwei Reihen in einem Säulendiagramm darstellen, mit zwei unabhängigen Y-Achsen: einer linken Achse für eine Reihe und einer rechten Achse für eine andere:
Beachten Sie, dass unsere beiden Y-Achsen nicht nur mit unterschiedlicher Beschriftung („parsecs“ und „apparent magnitude“) gekennzeichnet sind, sondern auch eigene unabhängige Skalen und Gitternetzlinien haben. Wenn Sie dieses Verhalten anpassen möchten, verwenden Sie die Optionen vAxis.gridlines
.
Im folgenden Code geben die Optionen axes
und series
zusammen die Dual-Y-Darstellung des Diagramms an. Die Option series
gibt an, welche Achsen für die jeweilige Tabelle verwendet werden sollen ('distance'
und 'brightness'
; sie müssen keinen Bezug zu den Spaltennamen in der Datentabelle haben). Mit der Option axes
wird dieses Diagramm in ein Dual-Y-Diagramm umgewandelt. Dabei werden die 'distance'
-Achse (links mit der Bezeichnung „parsecs“) und die 'brightness'
-Achse rechts (mit „apparent magnitude“) gekennzeichnet.
<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', 'bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var materialOptions = { width: 900, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { y: { distance: {label: 'parsecs'}, // Left y-axis. brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis. } } }; var classicOptions = { width: 900, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Nearby galaxies - distance on the left, brightness on the right', vAxes: { // Adds titles to each axis. 0: {title: 'parsecs'}, 1: {title: 'apparent magnitude'} } }; function drawMaterialChart() { var materialChart = new google.charts.Bar(chartDiv); materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ColumnChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); }; </script> </head> <body> <button id="change-chart">Change to Classic</button> <br><br> <div id="chart_div" style="width: 800px; height: 500px;"></div> </body> </html>
Top-X-Charts
Hinweis: Achsen von oben sind nur für Materialdiagramme (mit Paketen bar
) verfügbar.
Wenn Sie die X-Achsen-Labels und -Titel oben im Diagramm platzieren möchten, können Sie dies in Material-Diagrammen mit der Option axes.x
tun:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Move', 'Percentage'], ["King's pawn (e4)", 44], ["Queen's pawn (d4)", 31], ["Knight to King 3 (Nf3)", 12], ["Queen's bishop pawn (c4)", 10], ['Other', 3] ]); var options = { width: 800, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, axes: { x: { 0: { side: 'top', label: 'White to move'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); // Convert the Classic options to Material options. chart.draw(data, google.charts.Bar.convertOptions(options)); }; </script> </head> <body> <div id="top_x_div" style="width: 800px; height: 600px;"></div> </body> </html>
Wird geladen
Der Paketname von google.charts.load
lautet "corechart"
.
Der Klassenname der Visualisierung lautet google.visualization.ColumnChart
.
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.ColumnChart(container);
Für Materialspaltendiagramme lautet der google.charts.load
-Paketname "bar"
. Tipp: Das Balkendiagramm „Material“ verarbeitet beide Ausrichtungen.
Der Klassenname der Visualisierung lautet google.charts.Bar
. Tipp: Das Balkendiagramm „Material“ verarbeitet beide Ausrichtungen.
google.charts.load("current", {packages: ["bar"]});
var chart = new google.charts.Bar(container);
Datenformat
Jede Zeile in der Tabelle steht für eine Gruppe angrenzender Balken.
Zeilen:Jede Zeile in der Tabelle entspricht einer Gruppe von Balken.
Columns:
Spalte 0 | Spalte 1 | ... | Spalte N | |
---|---|---|---|---|
Zweck: |
|
Balken 1 - Werte in dieser Gruppe | ... | Balken N in dieser Gruppe |
Datentyp: |
|
Zahl | ... | Zahl |
Rolle: | Domain | Daten | ... | Daten |
Optionale Spaltenrollen: | ... |
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
|
Anmerkungen.immer außerhalb |
In Balkendiagrammen und Spaltendiagrammen werden, sofern sie auf Typ: Boolesch
Standard: false
|
Anmerkungen.boxStyle |
In Diagrammen, die Annotationen unterstützen, steuert das var options = { annotations: { boxStyle: { // Color of the box outline. stroke: '#888', // Thickness of the box outline. strokeWidth: 1, // x-radius of the corner curvature. rx: 10, // y-radius of the corner curvature. ry: 10, // Attributes for linear gradient fill. gradient: { // Start color for gradient. color1: '#fbf6a7', // Finish color for gradient. color2: '#33b679', // Where on the boundary to start and // end the color1/color2 gradient, // relative to the upper left corner // of the boundary. x1: '0%', y1: '0%', x2: '100%', y2: '100%', // If true, the boundary for x1, // y1, x2, and y2 is the box. If // false, it's the entire chart. useObjectBoundingBoxUnits: true } } } }; Diese Option wird derzeit für Flächen-, Balken-, Säulen-, Kombinations-, Linien- und Streudiagramme unterstützt. Es wird vom Anmerkungsdiagramm nicht unterstützt. Type: Objekt
Standard: null
|
Anmerkungen.Datum |
Für Diagramme, die Annotationen unterstützen, können Sie mit dem
annotations.datum -Objekt die Auswahl von Google Charts für Annotationen überschreiben, die für einzelne Datenelemente (z. B. Werte, die mit jedem Balken in einem Balkendiagramm angezeigt werden) bereitgestellt werden. Du kannst die Farbe mit annotations.datum.stem.color , die Stammlänge mit annotations.datum.stem.length und den Stil mit annotations.datum.style steuern.
Type: Objekt
Standard: Farbe ist „schwarz“, Länge ist 12, Stil ist „Punkt“.
|
Anmerkungen.Domain |
Für Diagramme, die Annotationen unterstützen, können Sie mit dem
annotations.domain -Objekt die Auswahl von Google Charts für Anmerkungen überschreiben, die für eine Domain (die Hauptachse des Diagramms, z. B. die X-Achse in einem typischen Liniendiagramm) bereitgestellt werden. Du kannst die Farbe mit annotations.domain.stem.color , die Stammlänge mit annotations.domain.stem.length und den Stil mit annotations.domain.style steuern.
Type: Objekt
Standard: Farbe ist „schwarz“, Länge ist 5, Stil ist „Punkt“.
|
Anmerkungen.highContrast |
Bei Diagrammen, die Annotationen unterstützen, können Sie mit dem booleschen Wert
annotations.highContrast die von Google Charts ausgewählte Annotationsfarbe überschreiben. Standardmäßig ist annotations.highContrast „true“. Dadurch wird in Diagrammen eine Anmerkungsfarbe mit gutem Kontrast ausgewählt: helle Farben auf dunklem Hintergrund und dunkel bei hellem Hintergrund. Wenn Sie annotations.highContrast auf „false“ setzen und keine eigene Annotationsfarbe angeben, wird in Google Charts die Standardreihenfarbe für diese Annotation verwendet:
Typ: Boolesch
Standard: true
|
Anmerkungen.stem |
Bei Diagrammen, die Annotationen unterstützen, können Sie mit dem Objekt
annotations.stem die Auswahl von Google Charts für den Stammstil überschreiben. Sie können die Farbe mit annotations.stem.color und die Stammlänge mit annotations.stem.length steuern. Die Option hat keinen Einfluss auf Anmerkungen mit dem Stil 'line' : Bei 'line' -Datumsannotationen ist die Wortlänge immer mit dem Text identisch. Bei 'line' -Domainannotationen erstreckt sich die Wortstammlänge auf das gesamte Diagramm.
Type: Objekt
Standard:schwarz
|
Anmerkungen.Stil |
Bei Diagrammen, die Annotationen unterstützen, können Sie mit der Option
annotations.style die Auswahl des Anmerkungstyps in Google Charts überschreiben. Es kann entweder 'line' oder 'point' sein.
Typ: String
Standard: 'point'
|
Anmerkungen.textStyle |
In Diagrammen, die Annotationen unterstützen, steuert das
annotations.textStyle -Objekt die Darstellung des Texts der Annotation:
var options = { annotations: { textStyle: { fontName: 'Times-Roman', fontSize: 18, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; Diese Option wird derzeit für Flächen-, Balken-, Säulen-, Kombinations-, Linien- und Streudiagramme unterstützt. Es wird im Anmerkungsdiagramm nicht unterstützt. Type: Objekt
Standard: null
|
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ß
|
bar.groupWidth. |
Breite einer Gruppe von Balken, die in einem der folgenden Formate angegeben werden:
Typ:Zahl oder String
Standard:
Das goldene Verhältnis,
ca. „61,8 %“.
|
bars |
Gibt an, ob die Balken in einem Material-Balkendiagramm vertikal oder horizontal sind. Diese Option hat keine Auswirkungen auf klassische Balkendiagramme oder klassische Säulendiagramme. Typ: „horizontal“ oder „vertikal“
Standard: „vertical“
|
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
|
Diagramm.Untertitel |
Bei Material-Diagrammen gibt diese Option den Untertitel an. Untertitel werden nur in Material-Charts unterstützt. Typ: String
Standard: null
|
Diagramm.Titel |
Bei Material-Diagrammen gibt diese Option den Titel an. Typ: String
Standard: null
|
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
|
Datentransparenz |
Die Transparenz von Datenpunkten, wobei 1.0 vollständig deckend und 0.0 vollständig transparent ist. In Streu-, Histogramm-, Balken- und Spaltendiagrammen bezieht sich dies auf die sichtbaren Daten: Punkte im Streudiagramm und Rechtecke in den anderen. In Diagrammen, in denen bei der Auswahl von Daten ein Punkt erstellt wird, z. B. eines Linien- oder Flächendiagramms, bezieht sich dies auf die Kreise, die angezeigt werden, wenn der Mauszeiger darauf bewegt oder ausgewählt wird. Das Kombinationsdiagramm zeigt beide Verhaltensweisen. Diese Option hat keine Auswirkungen auf andere Diagramme. Informationen zum Ändern der Deckkraft einer Trendlinie finden Sie unter Trendliniendeckkraft. Typ: Zahl
Standard: 1,0
|
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
|
Fokusziel |
Der Typ der Entität, die den Fokus auf den Mauszeiger bewegt Betrifft außerdem, welche Entität per Mausklick ausgewählt wird und welches Datentabellenelement mit Ereignissen verknüpft ist. Folgende Typen sind möglich:
In der fokussierten Kategorie „category“ werden alle Kategoriewerte angezeigt. Dies kann nützlich sein, um Werte verschiedener Serien zu vergleichen. Typ: String
Standard: 'datum'
|
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. Diese Option wird nur für eine Typ:Zahl
Standard: automatisch
|
hAxis.baselineColor |
Die Farbe der Referenzlinie für die horizontale Achse. Kann ein beliebiger HTML-Farbstring sein, z. B. Diese Option wird nur für eine 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 vom Typ „numerisch“ oder „Datumsachse“.
Bei Labels für die Zahlenachse ist dies eine Teilmenge des Dezimalformatierungs-Intensitätsmustersatzes. Für
Bei Labels für die Datumsachse handelt es sich um eine Teilmenge des Datumsformats
ICU-Mustersatz
. Beispiel: 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
Diese Option wird nur für die Achse 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}
Diese Option wird nur für die Achse 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.interval |
Ein Array von Größen (als Datenwerte, nicht Pixel) zwischen benachbarten Gitternetzlinien. Diese Option ist derzeit nur für numerische Achsen verfügbar, entspricht jedoch den Optionen Typ:Zahl zwischen 1 und 10 (ohne 10).
Standard: berechnet
|
hAxis.gridlines.minSpacing |
Der minimale Bildschirmabstand in Pixeln zwischen den Hauptgitternetzlinien in hAxis.
Der Standardwert für große Gitternetzlinien ist Typ:Zahl
Standard: berechnet
|
hAxis.gridlines.mehrere |
Alle Gitternetz- und Teilstrichwerte müssen ein Vielfaches des Werts dieser Option sein. Beachten Sie, dass im Gegensatz zu Intervallen das Zehnfache des Vielfachen nicht berücksichtigt wird.
Sie können z. B. erzwingen, dass Ticks als Ganzzahlen angegeben werden, oder erzwingen, dass Ticks ein Vielfaches von 1.000 sind, wenn Sie 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“.
Diese Option wird nur für die Achse 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.interval |
Die Option „Nebengrills.interval“ entspricht der Intervalloption für die Hauptgitternetzlinien. Das ausgewählte Intervall ist jedoch immer ein gleichmäßiger Teiler des Hauptgitternetzintervalls.
Das Standardintervall für lineare Skalen ist Typ:Zahl
Standard: 1
|
hAxis.minorGridlines.minSpacing |
Der erforderliche Mindestabstand in Pixeln zwischen benachbarten kleinen Gitternetzlinien und zwischen kleinen und großen Gitternetzlinien. Der Standardwert ist 1/2 des minSpacing der Hauptgitterlinien für lineare Skalen und 1/5 des minSpacing für Logskalierungen. Typ: Zahl
Standard:berechnet
|
hAxis.minorGridlines.mehrere |
Wie bei der 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 |
Diese Option wird nur für eine Typ: Boolesch
Standard: false
|
hAxis.scaleType |
Diese Option wird nur für eine 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:
Diese Option wird nur für die Achse 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.allowContainerBoundaryTextCutoff |
Bei „false“ werden äußerste Labels ausgeblendet, anstatt zu erlauben, dass sie vom Diagrammcontainer abgeschnitten werden. Bei „true“ ist das Zuschneiden von Labels zulässig. Diese Option wird nur für eine Typ: Boolesch
Standard: false
|
hAxis.slantedText |
Wenn dieser Wert auf „true“ gesetzt ist, zeichnen Sie den Text der horizontalen Achse schräg, damit mehr Text entlang der Achse passt. Falls falsch, zeichnen Sie den Text der horizontalen Achse aufrecht. Standardmäßig ist der Text schräg, wenn er nicht aufrecht dargestellt werden kann. Diese Option ist nur verfügbar, wenn Typ: Boolesch
Standard: automatisch
|
hAxis.slantedText-Winkel |
Der Winkel des Texts der horizontalen Achse, wenn er schräg gezeichnet wird. Wird ignoriert, wenn Typ:Zahl, -90–90
Standard: 30
|
hAxis.maxAlternation |
Maximale Anzahl der Ebenen des Textes der horizontalen Achse. Wenn Textlabels für Achsen zu voll werden, kann der Server benachbarte Labels verschieben, um sie näher aneinander zu halten. Dieser Wert gibt die höchste Anzahl von Ebenen an. Der Server kann weniger Ebenen verwenden, wenn die Labels keine Überschneidungen haben. Für Datum und Uhrzeit ist die Standardeinstellung 1. Typ: Zahl
Standard: 2
|
hAxis.maxTextLines |
Maximal zulässige Zeilenanzahl für die Textlabels. Labels können sich über mehrere Zeilen erstrecken, wenn sie zu lang sind und die Anzahl der Zeilen standardmäßig durch die Höhe des verfügbaren Platzes begrenzt ist. Typ: Zahl
Standard: automatisch
|
hAxis.minText-Spacing |
Der minimale horizontale Abstand in Pixeln zwischen zwei benachbarten Textlabels. Wenn die Labels zu dicht beieinander liegen oder zu lang sind, kann der Abstand unter diesen Grenzwert fallen. In diesem Fall wird eine der Maßnahmen zum Entfernen von Labels angewendet, z. B. werden die Labels abgeschnitten oder einige von ihnen werden entfernt. Typ: Zahl
Standard: Der Wert von
hAxis.textStyle.fontSize |
hAxis.showTextEvery |
Gibt an, wie viele Labels der horizontalen Achse angezeigt werden, wobei 1 für jedes Label steht, 2 für alle anderen Labels usw. Standardmäßig wird versucht, so viele Labels wie möglich anzuzeigen, ohne sich zu überschneiden. Typ: Zahl
Standard: automatisch
|
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.
Diese Option wird nur für die Achse 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.
Diese Option wird nur für die Achse 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:
Diese Option wird nur für die Achse 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 |
Wird ignoriert, wenn Typ: Zahl
Standard: automatisch
|
hAxis.viewWindow.Min |
Wird ignoriert, wenn Typ: Zahl
Standard: automatisch
|
height |
Höhe des Diagramms in Pixeln. Typ: Zahl
Standard: Höhe des beinhaltenden Elements
|
gestapelt |
Wenn dieser Wert auf „true“ gesetzt ist, werden die Elemente für alle Reihen bei jedem Domainwert gestapelt. Hinweis:In Diagrammen, Flächenformaten und SteppedArea-Diagrammen wird die Reihenfolge der Legendenelemente in Google Charts umgekehrt. Dies entspricht der Positionierung der Reihenelemente (z. B. Reihe 0 ist das unterste Legendenelement). Dies gilt nicht für Balkendiagramme.
Die Option
Bei einer Stapelverarbeitung wird der berechnete Wert für jedes Element in der Kurzinfo nach dem tatsächlichen Wert angezeigt.
Die Zielachse wird standardmäßig auf Grundlage der relativen Skala von 0 bis 1 als Bruchteile von 1 für
Ein 100 %-Stapel unterstützt nur Datenwerte vom Typ Typ: Boolescher String/String
Standard: false
|
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.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.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.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>}
|
Ausrichtung |
Die Ausrichtung des Diagramms. Wenn Typ: String
Standard:horizontal
|
umgekehrte Kategorien |
Wenn auf „true“ gesetzt, wird eine Reihe von rechts nach links gezeichnet. Standardmäßig wird von links nach rechts gezeichnet.
Diese Option wird nur für die Achse Typ: Boolesch
Standard: false
|
series |
Ein Array von Objekten, die jeweils das Format der entsprechenden Reihe im Diagramm beschreiben. Geben Sie ein leeres Objekt {} an, wenn Sie Standardwerte für eine Reihe verwenden möchten. Wenn keine Reihe oder kein Wert angegeben ist, wird der globale Wert verwendet. Jedes Objekt unterstützt die folgenden Eigenschaften:
Sie können entweder ein Array von Objekten angeben, von denen jedes auf die Reihe in der angegebenen Reihenfolge angewendet wird, oder ein Objekt angeben, bei dem jeder untergeordnete Schlüssel einen numerischen Schlüssel hat, der angibt, für welche Reihe sie gilt. Die folgenden beiden Deklarationen sind beispielsweise identisch und deklarieren die erste Reihe als schwarz und fehlen in der Legende und die vierte als rot und fehlt in der Legende: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Typ: Array von Objekten oder Objekt mit verschachtelten Objekten
Standard: {}
|
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.ignoreBounds |
Durch die Einstellung Hinweis:Das gilt nur für HTML-Kurzinfos. Wenn diese Option mit SVG-Kurzinfos aktiviert ist, werden alle Überläufe außerhalb der Diagrammgrenzen abgeschnitten. Weitere Informationen finden Sie unter Kurzinfos anpassen. Typ: Boolesch
Standard: false
|
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.showColorCode |
Wenn dies der Fall ist, werden in der Kurzinfo farbige Quadrate neben den Reiheninformationen angezeigt. Die Standardeinstellung ist „true“, wenn Typ: Boolesch
Standard: automatisch
|
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“
|
Trendlinien |
Zeigt in den Diagrammen, die diese unterstützen, Trendlinien an. Standardmäßig werden lineare Trendlinien verwendet. Dies kann jedoch mit der Option
Trendlinien werden pro Reihe angegeben, die meisten Optionen sehen also so aus: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } Type: Objekt
Standard: null
|
trendlines.n.farbe |
Die Farbe der Trendlinie, angegeben entweder als englischer Farbname oder als Hexadezimalstring. Typ: String
Standard: Standardfarbe für Reihen
|
trendlines.n.° |
Für Trendlinien von Typ: Zahl
Standard: 3
|
trendlines.n.labelInLegende |
Wenn diese Option festgelegt ist, wird die Trendlinie in der Legende als String angezeigt. Typ: String
Standard: null
|
trendlines.n.lineWidth (Trendlinien.n.lineWidth) |
Die Linienbreite der Trendlinie in Pixeln. Typ: Zahl
Standard: 2
|
trendlines.n.opacity |
Die Transparenz der Trendlinie von 0,0 (transparent) bis 1,0 (undurchsichtig). Typ: Zahl
Standard: 1,0
|
trendlines.n.pointSize |
Trendlinien werden durch das Stempeln mehrerer Punkte im Diagramm gebildet. Mit dieser selten benötigten Option können Sie die Größe der Punkte anpassen. In der Regel ist die Option Typ:Zahl
Standard: 1
|
trendlines.n.pointsSichtbar |
Trendlinien werden durch das Stempeln mehrerer Punkte auf dem Diagramm erstellt. Die Option Typ: Boolesch
Standard: true
|
trendlines.n.showR2 |
Gibt an, ob der Bestimmungskoeffizient in der Kurzinfo zur Legende oder Trendlinie angezeigt werden soll. Typ: Boolesch
Standard: false
|
trendlines.n |
Gibt an, ob die Trendlinien Typ: String
Standard: linear
|
trendlines.n.visibleInLegend |
Gibt an, ob die Trendliniengleichung in der Legende erscheint. Er wird in der Kurzinfo zur Trendlinie angezeigt. Typ: Boolesch
Standard: false
|
Vaxe |
Gibt die Eigenschaften für einzelne vertikale Achsen an, wenn das Diagramm über mehrere vertikale Achsen verfügt.
Jedes untergeordnete Objekt ist ein
Wenn Sie ein Diagramm mit mehreren vertikalen Achsen angeben möchten, definieren Sie zuerst mit { series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } }
Diese Eigenschaft kann entweder ein Objekt oder ein Array sein: Das Objekt ist eine Sammlung von Objekten mit einem numerischen Label, das die von ihm definierte Achse angibt. Das ist das oben gezeigte Format. Das Array ist ein Array von Objekten, eines pro Achse. Die folgende Notation im Arraystil ist beispielsweise mit dem oben gezeigten vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] Typ:Array eines Objekts oder eines Objekts mit untergeordneten Objekten
Standard: null
|
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.interval |
Ein Array von Größen (als Datenwerte, nicht Pixel) zwischen benachbarten Gitternetzlinien. Diese Option ist derzeit nur für numerische Achsen verfügbar, entspricht jedoch den Optionen Typ: Zahl zwischen 1 und 10 (ohne 10).
Standard: berechnet
|
vAxis.gridlines.minSpacing |
Der minimale Bildschirmabstand in Pixeln zwischen den Hauptgitternetzlinien in hAxis.
Der Standardwert für große Gitternetzlinien ist Typ:Zahl
Standard: berechnet
|
vAxis.gridlines.mehrere |
Alle Gitternetz- und Teilstrichwerte müssen ein Vielfaches des Werts dieser Option sein. Beachten Sie, dass im Gegensatz zu Intervallen das Zehnfache des Vielfachen nicht berücksichtigt wird.
Sie können z. B. erzwingen, dass Ticks als Ganzzahlen angegeben werden, oder erzwingen, dass Ticks ein Vielfaches von 1.000 sind, wenn Sie 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.interval |
Die Option „Nebengrills.interval“ entspricht der Intervalloption für die Hauptgitternetzlinien. Das ausgewählte Intervall ist jedoch immer ein gleichmäßiger Teiler des Hauptgitternetzintervalls.
Das Standardintervall für lineare Skalen ist Typ:Zahl
Standard: 1
|
vAxis.minorGridlines.minSpancing |
Der erforderliche Mindestabstand in Pixeln zwischen benachbarten kleinen Gitternetzlinien und zwischen kleinen und großen Gitternetzlinien. Der Standardwert ist 1/2 des minSpacing der Hauptgitterlinien für lineare Skalen und 1/5 des minSpacing für Logskalierungen. Typ: Zahl
Standard:berechnet
|
vAxis.minorGridlines.mehrere |
Wie bei der 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 |
Diese Option wird nur für eine 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 Balken, Einträge in Legenden und Kategorien.
Ein Balken entspricht einer Zelle in der Datentabelle, einem Legendeneintrag für eine Spalte (Zeilenindex ist null) und einer Kategorie für eine Zeile (Spaltenindex ist null).
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 Balken, Einträge in Legenden und Kategorien.
Ein Balken entspricht einer Zelle in der Datentabelle, einem Legendeneintrag für eine Spalte (Zeilenindex ist null) und einer Kategorie für eine Zeile (Spaltenindex ist null).
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. 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. 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.