Visualisierung: Blasendiagramm

Die Dauer der Animation in Millisekunden. Weitere Informationen finden Sie in der Dokumentation zu Animationen.

Die auf die Animation angewendete Easing-Funktion. Folgende Optionen sind verfügbar:

• "linear" – Konstante Geschwindigkeit
• „in“ – Beschleunigen – langsam starten.
• „out“ – Ease Out – Starte schnell und langsamer.
• „inAndOut“ – Leichtes Hin- und Herausbewegen: Starte langsam, beschleunige und dann langsamer.

Bestimmt, ob das Diagramm bei der ersten Zeichnung animiert wird. Bei true startet das Diagramm bei der Referenz und animiert sich in seinem endgültigen Zustand.

Die Position der Achsentitel im Vergleich zum Diagrammbereich. Unterstützte Werte:

• in: Zeichnen Sie die Achsentitel im Diagrammbereich.
• out - Achsentitel außerhalb des Diagrammbereichs zeichnen.
• none (Keine): Die Achsentitel werden weggelassen.

Die Hintergrundfarbe für den Hauptbereich des Diagramms. Dies kann entweder ein einfacher HTML-Farbstring wie 'red' oder '#00cc00' oder ein Objekt mit den folgenden Eigenschaften sein.

Die Farbe des Diagrammrahmens als HTML-Farbstring.

Die Rahmenbreite in Pixeln.

Die Füllfarbe des Diagramms als HTML-Farbstring.

Ein Objekt mit Mitgliedern zum Konfigurieren der visuellen Eigenschaften der Blasen.

Die Deckkraft der Blasen, wobei 0 vollständig transparent und 1 vollständig deckend ist.

Die Farbe der Kontur der Blasen.

Ein Objekt, das den Textstil der Blasen angibt. Das Objekt hat folgendes Format:

{color: <string>, fontName: <string>, fontSize: <number>}

color kann ein beliebiger HTML-Farbstring sein, z. B. 'red' oder '#00cc00'. Siehe auch fontName und fontSize.

Ein Objekt mit Mitgliedern zum Konfigurieren der Position und Größe des Diagrammbereichs, in dem das Diagramm selbst gezeichnet wird, ohne Achse und Legenden. Es werden zwei Formate unterstützt: eine Zahl oder eine Zahl gefolgt von %. Eine einfache Zahl ist ein Wert in Pixeln, eine Zahl gefolgt von % ein Prozentsatz. Beispiel: chartArea:{left:20,top:0,width:'50%',height:'75%'}

• stroke: die Farbe, angegeben als Hexadezimalstring oder als englischer Farbname.
• strokeWidth: Zeichnet einen Rahmen um den Diagrammbereich mit der angegebenen Breite (und in der Farbe stroke).

Legt fest, wie weit das Diagramm von der linken Rahmenlinie entfernt ist.

Legt fest, wie weit das Diagramm vom oberen Rand entfernt ist.

Diagrammbereichbreite.

Höhe des Diagrammbereichs.

Die Farben, die für die Diagrammelemente verwendet werden sollen. Ein Array mit Strings, wobei jedes Element ein HTML-Farbstring ist. Beispiel: colors:['red','#004411'].

Ein Objekt, das eine Zuordnung zwischen Farbspaltenwerten und Farben oder eine Farbverlaufsskala angibt. Zum Angeben der Eigenschaften dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt:

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}

Falls vorhanden, gibt es einen Mindestwert für Diagrammfarbdaten an. Farbdatenwerte ab diesem Wert werden als erste Farbe im Bereich colorAxis.colors gerendert.

Falls vorhanden, gibt es einen Maximalwert für Diagrammfarbdaten an. Farbdatenwerte ab diesem Wert werden als letzte Farbe im Bereich colorAxis.colors gerendert.

Falls vorhanden, wird damit gesteuert, wie Werte mit Farben verknüpft werden. Jeder Wert ist der entsprechenden Farbe im Array colorAxis.colors zugeordnet. Diese Werte gelten für die Farbdaten des Diagramms. Die Färbung erfolgt nach einem Farbverlauf der hier angegebenen Werte. Wenn Sie keinen Wert für diese Option angeben, entspricht dies der Angabe von [minValue, maxValue].

Farben, die Werten in der Visualisierung zugewiesen werden sollen. Ein Array mit Strings, wobei jedes Element ein HTML-Farbstring ist. Beispiel: colorAxis: {colors:['red','#004411']}. Sie müssen mindestens zwei Werte angeben. Der Farbverlauf enthält alle Ihre Werte sowie berechnete Zwischenwerte, wobei die erste Farbe den kleinsten Wert und die letzte Farbe den höchsten Wert hat.

Ein Objekt, das den Stil der Farblegende für den Farbverlauf angibt.

Position der Legende. folgende Arten von Werten sind möglich:

• 'top' (über dem Diagramm)
• 'bottom': unter dem Diagramm
• 'in' – innerhalb des Diagramms, ganz oben.
• "none": Es wird keine Legende angezeigt.

Ein Objekt, das den Textstil der Legende angibt. Das Objekt hat folgendes Format:

{color: <string>, fontName: <string>, fontSize: <number>}

color kann ein beliebiger HTML-Farbstring sein, z. B. 'red' oder '#00cc00'. Siehe auch fontName und fontSize.

Ein Formatstring für numerische Labels. Dies ist eine Teilmenge des Mustersatzes der ICU . Beispielsweise gibt {numberFormat:'.##'} die Werte "10.66", "10.6" und "10.0" für die Werte 10.666, 10.6 und 10 an.

Gibt an, ob im Diagramm nutzerbasierte Ereignisse ausgelöst oder auf Nutzerinteraktionen reagiert werden Bei „false“ gibt das Diagramm keine „select“- oder anderen interaktionsbasierten Ereignisse aus (aber wir werden Bereit- oder Fehlerereignisse auslösen) und kein Hovertext anzeigen und sich je nach Nutzereingabe nicht anderweitig ändern.

Mit der Option explorer können Nutzer Google-Diagramme schwenken und zoomen. explorer: {} stellt das Standardverhalten des Explorers bereit. Damit können Nutzer durch Ziehen horizontal und vertikal schwenken und durch Scrollen heran- und herauszoomen.

Diese Funktion ist experimentell und kann sich in zukünftigen Versionen ändern.

Hinweis: Der Explorer funktioniert nur mit fortlaufenden Achsen, z. B. Zahlen oder Datumsangaben.

Der Google Charts-Explorer unterstützt drei Aktionen:

• dragToPan: Ziehen, um das Diagramm horizontal und vertikal zu schwenken. Wenn Sie nur entlang der horizontalen Achse schwenken möchten, verwenden Sie explorer: { axis: 'horizontal' }. Das Gleiche gilt für die vertikale Achse.
• dragToZoom: Standardmäßig zoomt der Explorer heran oder heraus, wenn der Nutzer scrollt. Wenn explorer: { actions: ['dragToZoom', 'rightClickToReset'] } verwendet wird, wird durch Ziehen über einen rechteckigen Bereich der Bereich herangezoomt. Wir empfehlen, rightClickToReset immer dann zu verwenden, wenn dragToZoom verwendet wird. Informationen zum Anpassen des Zooms findest du unter explorer.maxZoomIn, explorer.maxZoomOut und explorer.zoomDelta.
• rightClickToReset: Wenn Sie mit der rechten Maustaste auf das Diagramm klicken, wird es auf die ursprüngliche Schwenk- und Zoomstufe zurückgesetzt.

Standardmäßig können Nutzer sowohl horizontal als auch vertikal schwenken, wenn die Option explorer verwendet wird. Wenn Nutzer nur horizontal schwenken sollen, verwenden Sie explorer: { axis: 'horizontal' }. Entsprechend aktiviert explorer: { axis: 'vertical' } das reine vertikale Schwenken.

Standardmäßig können Nutzer unabhängig vom Ort der Daten alle Seiten schwenken. Verwenden Sie explorer: { keepInBounds: true }, damit Nutzer nicht über das ursprüngliche Diagramm hinaus schwenken.

Das Maximum, das der Explorer heranzoomen kann. Standardmäßig können Nutzer so weit heranzoomen, dass sie nur 25% der ursprünglichen Ansicht sehen. Wenn explorer: { maxZoomIn: .5 } festgelegt ist, können Nutzer nur so weit heranzoomen, dass sie die Hälfte der Originalansicht sehen.

Das Maximum, das der Entdecker herauszoomen kann. Standardmäßig können Nutzer so weit herauszoomen, dass das Diagramm nur ein Viertel des verfügbaren Platzes einnimmt. Wenn explorer: { maxZoomOut: 8 } festgelegt ist, können Nutzer so weit herauszoomen, dass das Diagramm nur 1/8 des verfügbaren Platzes einnehmen würde.

Wenn Nutzer heran- oder herauszoomen, legt explorer.zoomDelta fest, wie weit sie heranzoomen. Je kleiner die Zahl, desto flüssiger und langsamer wird der Zoomfaktor.

Die Standardschriftgröße des gesamten Textes im Diagramm in Pixeln. Sie können dies mithilfe von Properties für bestimmte Diagrammelemente überschreiben.

Die Standardschriftart für den gesamten Text im Diagramm. Sie können dies mithilfe von Properties für bestimmte Diagrammelemente überschreiben.

Zeichnet das Diagramm in einem Inline-Frame. (Beachten Sie, dass diese Option in IE8 ignoriert wird; alle IE8-Diagramme werden in iFrames gezeichnet.)

Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener horizontaler Achsenelemente. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    

Die Referenz für die horizontale Achse.

Die Farbe der Baseline für die horizontale Achse. Kann ein beliebiger HTML-Farbstring sein, z. B. 'red' oder '#00cc00'.

Die Richtung, in die die Werte entlang der horizontalen Achse wachsen. Geben Sie -1 an, um die Reihenfolge der Werte umzukehren.

Ein Formatstring für Beschriftungen numerischer Achsen. Dies ist eine Teilmenge des Mustersatzes der ICU . {format:'#,###%'} gibt beispielsweise die Werte „1.000 %“, „750 %“ und „50 %“ für die Werte 10, 7,5 und 0,5 an. Sie können auch Folgendes angeben:

• {format: 'none'}: zeigt Zahlen ohne Formatierung an (z.B. 8000000)
• {format: 'decimal'}: zeigt Zahlen mit Tausendertrennzeichen an (z.B. 8.000.000)
• {format: 'scientific'}: zeigt Zahlen in wissenschaftlicher Notation an (z.B. 8e6)
• {format: 'currency'}: Zeigt die Zahlen in der lokalen Währung an (z.B. $8.000.000,00)
• {format: 'percent'}: zeigt Zahlen als Prozentsätze an (z.B. 800.000.000%)
• {format: 'short'}: Zeigt Abkürzungen an (z.B. 8 Mio.)
• {format: 'long'}: zeigt Zahlen als vollständige Wörter an (z.B. 8 Millionen)

Die tatsächliche Formatierung, die auf das Label angewendet wird, wird aus der Sprache abgeleitet, mit der die API geladen wurde. Weitere Informationen finden Sie unter Diagramme mit einer bestimmten Sprache laden .

Bei der Berechnung von Teilstrichen und Gitternetzlinien werden mehrere alternative Kombinationen aller relevanten Gitternetzlinienoptionen berücksichtigt. Alternativen werden abgelehnt, wenn die formatierten Teilstriche dupliziert werden oder sich überschneiden. Sie können also format:"#" angeben, wenn nur ganzzahlige Teilstriche angezeigt werden sollen. Wenn jedoch keine Alternative diese Bedingung erfüllt, werden auch keine Gitternetzlinien oder Teilstriche angezeigt.

Ein Objekt mit Eigenschaften zum Konfigurieren der Gitternetzlinien auf der horizontalen Achse. Gitternetzlinien für horizontale Achsen werden vertikal gezeichnet. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt:

{color: '#333', minSpacing: 20}

Die Farbe der horizontalen Gitternetzlinien im Diagrammbereich. Geben Sie einen gültigen HTML-Farbstring an.

Die ungefähre Anzahl der horizontalen Gitternetzlinien im Diagrammbereich. Wenn Sie eine positive Zahl für gridlines.count angeben, wird sie verwendet, um den minSpacing zwischen Gitternetzlinien zu berechnen. Sie können den Wert 1 angeben, um nur eine Gitternetzlinie zu zeichnen, oder 0, um keine Gitternetzlinien zu zeichnen. Geben Sie den Standardwert „-1“ an, um die Anzahl der Gitternetzlinien anhand anderer Optionen automatisch zu berechnen.

Überschreibt das Standardformat für verschiedene Aspekte von Datums-/Datums-/Uhrzeitdatentypen, wenn sie mit berechneten Gitternetzlinien im Diagramm verwendet werden. Ermöglicht die Formatierung von Jahren, Monaten, Tagen, Stunden, Minuten, Sekunden und Millisekunden.

Das allgemeine Format ist:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Weitere Informationen finden Sie unter Datums- und Uhrzeitwerte.

Ein Objekt mit Mitgliedern zum Konfigurieren der kleinen Gitternetzlinien auf der horizontalen Achse, ähnlich wie bei der Option „hAxis.gridlines“.

Die Farbe der horizontalen kleineren Gitternetzlinien im Diagrammbereich. Geben Sie einen gültigen HTML-Farbstring an.

Die Option minorGridlines.count wurde größtenteils verworfen, außer dass kleinere Gitternetzlinien durch Festlegen der Anzahl auf 0 deaktiviert werden. Die Anzahl der kleineren Gitternetzlinien hängt jetzt vollständig vom Intervall zwischen den großen Gitternetzlinien (siehe hAxis.gridlines.interval) und dem erforderlichen Mindestabstand ab (siehe hAxis.minorGridlines.minSpacing).

Überschreibt das Standardformat für verschiedene Aspekte von Datum/Uhrzeit/Uhrzeit-Datentypen, wenn sie mit berechneten MinorGridlines für Diagramme verwendet werden. Ermöglicht die Formatierung von Jahren, Monaten, Tagen, Stunden, Minuten, Sekunden und Millisekunden.

Das allgemeine Format ist:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Weitere Informationen finden Sie unter Datums- und Uhrzeitwerte.

hAxis-Eigenschaft, die die horizontale Achse zu einer logarithmischen Skala macht (alle Werte müssen positiv sein). Setzen Sie den Wert auf „true“ (wahr) für „yes“.

hAxis, die die horizontale Achse zu einer logarithmischen Skala macht. folgende Arten von Werten sind möglich:

• null - Es wird keine logarithmische Skalierung durchgeführt.
• „log“ – logarithmische Skalierung. Negative Werte und Nullwerte werden nicht dargestellt. Diese Option entspricht der Einstellung hAxis: { logscale: true }.
• "mirrorLog" - logarithmische Skalierung, bei der negative und Nullwerte dargestellt werden. Der dargestellte Wert einer negativen Zahl ist der negative Wert des Logs des Absolutwerts. Werte nahe 0 werden auf einer linearen Skala dargestellt.

Position des Textes der horizontalen Achse im Verhältnis zum Diagrammbereich. Unterstützte Werte: „out“, „in“, „none“.

Ein Objekt, das den Textstil der horizontalen Achse angibt. Das Objekt hat folgendes Format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color kann ein beliebiger HTML-Farbstring sein, z. B. 'red' oder '#00cc00'. Siehe auch fontName und fontSize.

Ersetzt die automatisch generierten Ticks auf der X-Achse durch das angegebene Array. Jedes Element des Arrays sollte entweder ein gültiger Tick-Wert (z. B. eine Zahl, ein Datum, Datum/Uhrzeit oder Uhrzeit) oder ein Objekt sein. Wenn es sich um ein Objekt handelt, sollte es die Eigenschaft v für den Tickwert und eine optionale f-Eigenschaft mit dem literalen String haben, der als Label angezeigt werden soll.

Das ViewWindow wird automatisch um den Mindest- und Höchstwert erweitert, sofern Sie keine viewWindow.min oder viewWindow.max zum Überschreiben angeben.

Beispiele:

• hAxis: { ticks: [5,10,15,20] }
• hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
• hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
• hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

hAxis-Eigenschaft, die den Titel der horizontalen Achse angibt.

Ein Objekt, das den Textstil für den Titel der horizontalen Achse angibt. Das Objekt hat folgendes Format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color kann ein beliebiger HTML-Farbstring sein, z. B. 'red' oder '#00cc00'. Siehe auch fontName und fontSize.

Verschiebt den Maximalwert der horizontalen Achse auf den angegebenen Wert. Dieser entspricht in den meisten Diagrammen nach rechts. Wird ignoriert, wenn dieser auf einen Wert festgelegt wird, der kleiner als der maximale x-Wert der Daten ist. hAxis.viewWindow.max überschreibt diese Property.

Verschiebt den Mindestwert der horizontalen Achse auf den angegebenen Wert; in den meisten Diagrammen nach links. Wird ignoriert, wenn dieser auf einen Wert festgelegt ist, der größer als der minimale x-Wert der Daten ist. hAxis.viewWindow.min überschreibt diese Property.

Gibt an, wie die horizontale Achse skaliert werden soll, um die Werte im Diagrammbereich zu rendern. Die folgenden Stringwerte werden unterstützt:

• "pretty" – Skaliert die horizontalen Werte, sodass die Maximal- und Minimalwerte etwas innerhalb links und rechts des Diagrammbereichs gerendert werden. „viewWindow“ wird auf die nächste große Gitternetzlinie für Zahlen oder die nächste kleinere Gitternetzlinie für Datum und Uhrzeit maximiert.
• „maximiert“: Skaliert die horizontalen Werte so, dass die Maximal- und Minimalwerte den linken und rechten Bereich des Diagramms berühren. Dies führt dazu, dass haxis.viewWindow.min und haxis.viewWindow.max ignoriert werden.
• „explicit“: Eine nicht mehr unterstützte Option zur Angabe der Werte für die linke und rechte Skala des Diagrammbereichs. (Eingestellt, da es mit haxis.viewWindow.min und haxis.viewWindow.max redundant ist.) Datenwerte außerhalb dieser Werte werden abgeschnitten. Sie müssen ein hAxis.viewWindow-Objekt angeben, das die Maximal- und Minimalwerte beschreibt, die angezeigt werden sollen.

Gibt den Zuschneidebereich der horizontalen Achse an.

Der maximale horizontale Datenwert, der gerendert werden soll.

Wird ignoriert, wenn hAxis.viewWindowMode „schön“ oder „maximiert“ ist.

Der minimale horizontale Datenwert, der gerendert werden soll.

Wird ignoriert, wenn hAxis.viewWindowMode „schön“ oder „maximiert“ ist.

Höhe des Diagramms in Pixeln

Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Aspekte der Legende. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}

Ausrichtung der Legende. folgende Arten von Werten sind möglich:

• 'start' - Am Anfang des der Legende zugewiesenen Bereichs ausgerichtet.
• "center" - Mittig in dem Bereich, der der Legende zugewiesen wurde.
• 'end' - Am Ende des der Legende zugewiesenen Bereichs ausgerichtet.

Anfang, Mitte und Ende beziehen sich auf den Stil - vertikal oder horizontal - der Legende. In einer Legende „rechts“ befinden sich beispielsweise „start“ und „end“ oben bzw. unten. Bei einer Legende „oben“ befinden sich „start“ und „end“ links bzw. rechts neben dem Bereich.

Der Standardwert hängt von der Position der Legende ab. Für Legenden am unteren Rand ist der Standardwert „center“, andere Legenden auf „start“.

Maximale Anzahl der Zeilen in der Legende. Geben Sie eine Zahl größer als 1 ein, um der Legende Linien hinzuzufügen. Hinweis: Die genaue Logik, mit der die tatsächliche Anzahl der gerenderten Zeilen ermittelt wird, ist noch im Wandel.

Diese Option funktioniert derzeit nur, wenn „legende.position“ den Wert „top“ hat.

Ursprünglich ausgewählter nullbasierter Seitenindex der Legende.

Position der Legende. folgende Arten von Werten sind möglich:

• 'bottom': unter dem Diagramm
• 'left' (Links): Links vom Diagramm, vorausgesetzt, der linken Achse ist keine Reihe zugeordnet. Wenn Sie also die Legende auf der linken Seite sehen möchten, verwenden Sie die Option targetAxisIndex: 1.
• "in": im Diagramm in der oberen linken Ecke
• "none": Es wird keine Legende angezeigt.
• "right": rechts neben dem Diagramm Nicht mit der Option vAxes kompatibel.
• 'top' (über dem Diagramm)

Ein Objekt, das den Textstil der Legende angibt. Das Objekt hat folgendes Format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color kann ein beliebiger HTML-Farbstring sein, z. B. 'red' oder '#00cc00'. Siehe auch fontName und fontSize.

Wenn selectionMode den Wert 'multiple' hat, können Nutzer mehrere Datenpunkte auswählen.

Ein Objekt mit -Objekten, wobei die Schlüssel Reihennamen (die Werte in der Spalte "Farbe") und jedes Objekt sind, das das Format der entsprechenden Reihe im Diagramm beschreibt. Wenn keine Reihe oder kein Wert angegeben ist, wird der globale Wert verwendet. Jedes Objekt unterstützt die folgenden Attribute:

• color – Farbe, die für diese Reihe verwendet werden soll. Geben Sie einen gültigen HTML-Farbstring an.
• visibleInLegend: ein boolescher Wert, wobei „wahr“ bedeutet, dass die Reihe einen Legendeneintrag haben sollte, „falsch“, dass dies nicht der Fall ist. Standardwert ist True.

series: {'Europe': {color: 'green'}}

Ein Objekt mit Mitgliedern, um zu konfigurieren, wie Werte der Blasengröße zugeordnet werden. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt:

 {minValue: 0,  maxSize: 20}

Maximaler Radius der größtmöglichen Blase in Pixeln.

Der Größenwert (wie in den Diagrammdaten angezeigt), der sizeAxis.maxSize zugeordnet werden soll. Größere Werte werden auf diesen Wert zugeschnitten.

Mindestradius der kleinstmöglichen Blase in Pixeln

Der Größenwert (wie in den Diagrammdaten angezeigt), der sizeAxis.minSize zugeordnet werden soll. Kleinere Werte werden auf diesen Wert zugeschnitten.

Falls wahr, werden die Blasen nach Größe sortiert, sodass die kleineren Blasen über den größeren angezeigt werden. Bei „false“ werden die Blasen nach ihrer Reihenfolge in der DataTable sortiert.

Ein Design ist eine Reihe vordefinierter Optionswerte, die im Zusammenspiel ein bestimmtes Diagrammverhalten oder einen bestimmten visuellen Effekt erzielen. Derzeit ist nur ein Design verfügbar:

• „maximized“ (maximiert): Maximiert den Bereich des Diagramms und zeichnet die Legende und alle Beschriftungen innerhalb des Diagrammbereichs auf. Legt die folgenden Optionen fest:

  chartArea: {width: '100%', height: '100%'},
  legend: {position: 'in'},
  titlePosition: 'in', axisTitlesPosition: 'in',
  hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
          

Text, der über dem Diagramm angezeigt werden soll.

Wo der Diagrammtitel im Vergleich zum Diagrammbereich platziert werden soll. Unterstützte Werte:

• in: Titel in den Diagrammbereich zeichnen
• out : Titel außerhalb des Diagrammbereichs zeichnen.
• none: Den Titel weglassen

Ein Objekt, das den Textstil für den Titel angibt. Das Objekt hat folgendes Format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color kann ein beliebiger HTML-Farbstring sein, z. B. 'red' oder '#00cc00'. Siehe auch fontName und fontSize.

Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Kurzinfo-Elemente. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt:

{textStyle: {color: '#FF0000'}, showColorCode: true}

Wenn die Richtlinie auf „true“ gesetzt ist, werden HTML- und keine SVG-gerenderten Kurzinfos verwendet. Weitere Informationen finden Sie unter Inhalt der Kurzinfo anpassen.

Hinweis: Die Anpassung des HTML-Kurzinfoinhalts über die Spalte „Kurzinfo-Spaltendaten“ wird von der Visualisierung Blasendiagramm nicht unterstützt.

Ein Objekt, das den Textstil für die Kurzinfo angibt. Das Objekt hat folgendes Format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color kann ein beliebiger HTML-Farbstring sein, z. B. 'red' oder '#00cc00'. Siehe auch fontName und fontSize.

Die Nutzerinteraktion, durch die die Kurzinfo angezeigt wird:

• „Fokus“: Die Kurzinfo wird angezeigt, wenn der Nutzer den Mauszeiger auf das Element bewegt.
• "none": Die Kurzinfo wird nicht angezeigt.
• „selection“: Die Kurzinfo wird angezeigt, wenn der Nutzer das Element auswählt.

Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener vertikaler Achsenelemente. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}

vAxis-Eigenschaft, die die Referenz für die vertikale Achse angibt. Wenn die Grundlinie größer als die höchste Rasterlinie oder kleiner als die unterste Rasterlinie ist, wird sie auf die nächste Gitterlinie gerundet.

Gibt die Farbe der Baseline für die vertikale Achse an. Kann ein beliebiger HTML-Farbstring sein, z. B. 'red' oder '#00cc00'.

Die Richtung, in der die Werte entlang der vertikalen Achse wachsen. Standardmäßig werden niedrige Werte unten im Diagramm angezeigt. Geben Sie -1 an, um die Reihenfolge der Werte umzukehren.

Ein Formatstring für Beschriftungen numerischer Achsen. Dies ist eine Teilmenge des Mustersatzes der ICU . {format:'#,###%'} gibt beispielsweise die Werte „1.000 %“, „750 %“ und „50 %“ für die Werte 10, 7,5 und 0,5 an. Sie können auch Folgendes angeben:

• {format: 'none'}: zeigt Zahlen ohne Formatierung an (z.B. 8000000)
• {format: 'decimal'}: zeigt Zahlen mit Tausendertrennzeichen an (z.B. 8.000.000)
• {format: 'scientific'}: zeigt Zahlen in wissenschaftlicher Notation an (z.B. 8e6)
• {format: 'currency'}: Zeigt die Zahlen in der lokalen Währung an (z.B. $8.000.000,00)
• {format: 'percent'}: zeigt Zahlen als Prozentsätze an (z.B. 800.000.000%)
• {format: 'short'}: Zeigt Abkürzungen an (z.B. 8 Mio.)
• {format: 'long'}: zeigt Zahlen als vollständige Wörter an (z.B. 8 Millionen)

Die tatsächliche Formatierung, die auf das Label angewendet wird, wird aus der Sprache abgeleitet, mit der die API geladen wurde. Weitere Informationen finden Sie unter Diagramme mit einer bestimmten Sprache laden .

Bei der Berechnung von Teilstrichen und Gitternetzlinien werden mehrere alternative Kombinationen aller relevanten Gitternetzlinienoptionen berücksichtigt. Alternativen werden abgelehnt, wenn die formatierten Teilstriche dupliziert werden oder sich überschneiden. Sie können also format:"#" angeben, wenn nur ganzzahlige Teilstriche angezeigt werden sollen. Wenn jedoch keine Alternative diese Bedingung erfüllt, werden auch keine Gitternetzlinien oder Teilstriche angezeigt.

Ein Objekt mit Mitgliedern zum Konfigurieren der Gitternetzlinien auf der vertikalen Achse. Beachten Sie, dass Gitternetzlinien für vertikale Achsen horizontal gezeichnet werden. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt:

{color: '#333', minSpacing: 20}

Die Farbe der vertikalen Gitternetzlinien im Diagrammbereich. Geben Sie einen gültigen HTML-Farbstring an.

Die ungefähre Anzahl der horizontalen Gitternetzlinien im Diagrammbereich. Wenn Sie eine positive Zahl für gridlines.count angeben, wird sie verwendet, um den minSpacing zwischen Gitternetzlinien zu berechnen. Sie können den Wert 1 angeben, um nur eine Gitternetzlinie zu zeichnen, oder 0, um keine Gitternetzlinien zu zeichnen. Geben Sie den Standardwert „-1“ an, um die Anzahl der Gitternetzlinien anhand anderer Optionen automatisch zu berechnen.

Überschreibt das Standardformat für verschiedene Aspekte von Datums-/Datums-/Uhrzeitdatentypen, wenn sie mit berechneten Gitternetzlinien im Diagramm verwendet werden. Ermöglicht die Formatierung von Jahren, Monaten, Tagen, Stunden, Minuten, Sekunden und Millisekunden.

Das allgemeine Format ist:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}
    

Weitere Informationen finden Sie unter Datums- und Uhrzeitwerte.

Ein Objekt mit Mitgliedern zum Konfigurieren der kleinen Gitternetzlinien auf der vertikalen Achse, ähnlich wie bei der Option „vAxis.gridlines“.

Die Farbe der vertikalen kleineren Gitternetzlinien im Diagrammbereich. Geben Sie einen gültigen HTML-Farbstring an.

Die Option „MinorGridlines.count“ wurde größtenteils verworfen, mit der Ausnahme, dass kleinere Gitternetzlinien durch Festlegen der Anzahl auf „0“ deaktiviert werden. Die Anzahl der kleineren Gitternetzlinien hängt vom Intervall zwischen den großen Gitternetzlinien (siehe „vAxis.gridlines.interval)“ und dem erforderlichen Mindestabstand ab (siehe „vAxis.minorGridlines.minSpacing“).

Überschreibt das Standardformat für verschiedene Aspekte von Datum/Uhrzeit/Uhrzeit-Datentypen, wenn sie mit berechneten MinorGridlines für Diagramme verwendet werden. Ermöglicht die Formatierung von Jahren, Monaten, Tagen, Stunden, Minuten, Sekunden und Millisekunden.

Das allgemeine Format ist:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Weitere Informationen finden Sie unter Datums- und Uhrzeitwerte.

Falls wahr, wird die vertikale Achse zu einer logarithmischen Skala. Hinweis: Alle Werte müssen positiv sein.

vAxis, die die vertikale Achse zu einer logarithmischen Skala macht. folgende Arten von Werten sind möglich:

• null - Es wird keine logarithmische Skalierung durchgeführt.
• „log“ – logarithmische Skalierung. Negative Werte und Nullwerte werden nicht dargestellt. Diese Option entspricht der Einstellung vAxis: { logscale: true }.
• "mirrorLog" - logarithmische Skalierung, bei der negative und Nullwerte dargestellt werden. Der dargestellte Wert einer negativen Zahl ist der negative Wert des Logs des Absolutwerts. Werte nahe 0 werden auf einer linearen Skala dargestellt.

Position des Textes der vertikalen Achse im Verhältnis zum Diagrammbereich. Unterstützte Werte: „out“, „in“, „none“.

Ein Objekt, das den Textstil der vertikalen Achse angibt. Das Objekt hat folgendes Format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color kann ein beliebiger HTML-Farbstring sein, z. B. 'red' oder '#00cc00'. Siehe auch fontName und fontSize.

Ersetzt die automatisch generierten Ticks auf der Y-Achse durch das angegebene Array. Jedes Element des Arrays sollte entweder ein gültiger Tick-Wert (z. B. eine Zahl, ein Datum, Datum/Uhrzeit oder Uhrzeit) oder ein Objekt sein. Wenn es sich um ein Objekt handelt, sollte es die Eigenschaft v für den Tickwert und eine optionale f-Eigenschaft mit dem literalen String haben, der als Label angezeigt werden soll.

Das ViewWindow wird automatisch um den Mindest- und Höchstwert erweitert, sofern Sie keine viewWindow.min oder viewWindow.max zum Überschreiben angeben.

Beispiele:

• vAxis: { ticks: [5,10,15,20] }
• vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
• vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
• vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

vAxis-Eigenschaft, die einen Titel für die vertikale Achse angibt.

Ein Objekt, das den Textstil für den Titel der vertikalen Achse angibt. Das Objekt hat folgendes Format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

color kann ein beliebiger HTML-Farbstring sein, z. B. 'red' oder '#00cc00'. Siehe auch fontName und fontSize.

Verschiebt den Maximalwert der vertikalen Achse auf den angegebenen Wert; dieser Wert ist in den meisten Diagrammen höher. Wird ignoriert, wenn dieser auf einen Wert festgelegt wird, der kleiner als der maximale y-Wert der Daten ist. vAxis.viewWindow.max überschreibt diese Property.

Verschiebt den Mindestwert der vertikalen Achse auf den angegebenen Wert. In den meisten Diagrammen ist dieser Wert abwärts. Wird ignoriert, wenn dieser auf einen Wert festgelegt ist, der größer als der minimale y-Wert der Daten ist. vAxis.viewWindow.min überschreibt diese Property.

Gibt an, wie die vertikale Achse skaliert werden soll, um die Werte im Diagrammbereich zu rendern. Die folgenden Stringwerte werden unterstützt:

• "pretty" – die vertikalen Werte so skalieren, dass die Maximal- und Minimalwerte etwas im unteren und oberen Bereich des Diagramms gerendert werden. „viewWindow“ wird auf die nächste große Gitternetzlinie für Zahlen oder die nächste kleinere Gitternetzlinie für Datum und Uhrzeit maximiert.
• „maximized“ (maximiert): Skaliert die vertikalen Werte so, dass die Höchst- und Minimalwerte den oberen und unteren Rand des Diagrammbereichs berühren. Dies führt dazu, dass vaxis.viewWindow.min und vaxis.viewWindow.max ignoriert werden.
• „explizit“: Eine verworfene Option zum Angeben der oberen und unteren Skalenwerte des Diagrammbereichs. (Verworfen, da es mit vaxis.viewWindow.min und vaxis.viewWindow.max redundant ist. Datenwerte außerhalb dieser Werte werden abgeschnitten. Sie müssen ein vAxis.viewWindow-Objekt angeben, das die Maximal- und Minimalwerte beschreibt, die angezeigt werden sollen.

Gibt den Zuschneidebereich der vertikalen Achse an.

Der maximale vertikale Datenwert, der gerendert werden soll.

Wird ignoriert, wenn vAxis.viewWindowMode „schön“ oder „maximiert“ ist.

Der minimale vertikale Datenwert, der gerendert werden soll.

Wird ignoriert, wenn vAxis.viewWindowMode „schön“ oder „maximiert“ ist.

Breite des Diagramms in Pixeln.

Zeichnet das Diagramm. Das Diagramm akzeptiert erst dann weitere Methodenaufrufe, nachdem das Ereignis ready ausgelöst wurde. Extended description.

Gibt das Kurzinfo-Aktionsobjekt mit dem angeforderten actionID zurück.

Gibt ein Objekt zurück, das den linken und oberen Rand sowie die Breite und Höhe des Diagrammelements id enthält. Das Format für id ist noch nicht dokumentiert. Dies sind die Rückgabewerte von Event-Handlern. Hier einige Beispiele:

var cli = chart.getChartLayoutInterface();

Höhe des Diagrammbereichs

cli.getBoundingBox('chartarea').height

Breite des dritten Balkens in der ersten Reihe eines Balken- oder Säulendiagramms

cli.getBoundingBox('bar#0#2').width

Begrenzungsrahmen des fünften Keils eines Kreisdiagramms

cli.getBoundingBox('slice#4')

Begrenzungsrahmen der Diagrammdaten eines vertikalen Diagramms (z.B. Säulendiagramm):

cli.getBoundingBox('vAxis#0#gridline')

Begrenzungsrahmen der Diagrammdaten eines horizontalen Diagramms (z.B. Balken):

cli.getBoundingBox('hAxis#0#gridline')

Die Werte beziehen sich auf den Container des Diagramms. Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Gibt ein Objekt zurück, das den linken und oberen Rand sowie die Breite und Höhe des Diagramminhalts enthält (ohne Labels und Legende):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left

cli.getChartAreaBoundingBox().top

cli.getChartAreaBoundingBox().height

cli.getChartAreaBoundingBox().width

Die Werte beziehen sich auf den Container des Diagramms. Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Gibt ein Objekt mit Informationen zur Platzierung des Diagramms und seiner Elemente auf dem Bildschirm zurück.

Die folgenden Methoden können für das zurückgegebene Objekt aufgerufen werden:

• getBoundingBox
• getChartAreaBoundingBox
• getHAxisValue
• getVAxisValue
• getXLocation
• getYLocation

Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Gibt den horizontalen Datenwert bei xPosition zurück. Dies ist ein Pixelversatz vom linken Rand des Diagrammcontainers. Kann negativ sein.

Beispiel: chart.getChartLayoutInterface().getHAxisValue(400).

Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Gibt das Diagramm serialisiert als Bild-URI zurück.

Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Weitere Informationen finden Sie unter PNG-Diagramme drucken.

Gibt ein Array der ausgewählten Diagrammentitäten zurück. Auswählbare Elemente sind Blasen. Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden. Extended description .

Gibt den vertikalen Datenwert bei yPosition zurück. Dies ist ein Pixelversatz vom oberen Rand des Diagrammcontainers entfernt. Kann negativ sein.

Beispiel: chart.getChartLayoutInterface().getVAxisValue(300).

Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Gibt die X-Koordinate des Pixels von dataValue relativ zum linken Rand des Diagrammcontainers zurück.

Beispiel: chart.getChartLayoutInterface().getXLocation(400).

Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Gibt die Y-Koordinate des Pixels von dataValue relativ zum oberen Rand des Diagrammcontainers zurück.

Beispiel: chart.getChartLayoutInterface().getYLocation(300).

Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Entfernt die Kurzinfo-Aktion mit dem angeforderten actionID aus dem Diagramm.

Legt eine Kurzinfo-Aktion fest, die ausgeführt werden soll, wenn der Nutzer auf den Aktionstext klickt.

Die Methode setAction verwendet ein Objekt als Aktionsparameter. Für dieses Objekt müssen drei Attribute angegeben werden: id für die ID der festgelegten Aktion, text für den Text, der in der Kurzinfo für die Aktion angezeigt werden soll, und action für die Funktion, die ausgeführt wird, wenn ein Nutzer auf den Aktionstext klickt.

Alle Kurzinfo-Aktionen sollten vor dem Aufrufen der draw()-Methode des Diagramms festgelegt werden. Erweiterte Beschreibung:

Wählt die angegebenen Diagrammentitäten aus. Verwirft die vorherige Auswahl. Auswählbare Elemente sind Blasen. Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden. Extended description .

Löscht das Diagramm und gibt alle zugewiesenen Ressourcen frei.

Wird ausgelöst, wenn die Übergangsanimation abgeschlossen ist.

Wird ausgelöst, wenn der Nutzer auf das Diagramm klickt Damit können Sie feststellen, wann auf Titel, Datenelemente, Legendeneinträge, Achsen, Gitternetzlinien oder Labels geklickt wird.

Wird ausgelöst, wenn beim Versuch, das Diagramm zu rendern, ein Fehler auftritt.

Wird ausgelöst, wenn der Nutzer auf Pfeile zum Seitenumbruch für die Legende klickt. Gibt den nullbasierten Seitenindex der aktuellen Legende und die Gesamtzahl der Seiten zurück.

Wird ausgelöst, wenn der Nutzer den Mauszeiger auf eine visuelle Entität bewegt. Gibt die Zeilen- und Spaltenindexe des entsprechenden Datentabellenelements zurück. Ein Infofeld entspricht einer Zeile in der Datentabelle (der Spaltenindex ist null).

Wird ausgelöst, wenn der Nutzer den Mauszeiger von einer visuellen Entität entfernt Gibt die Zeilen- und Spaltenindexe des entsprechenden Datentabellenelements zurück. Ein Infofeld entspricht einer Zeile in der Datentabelle (der Spaltenindex ist null).

Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden aufrufen möchten, nachdem Sie es gezeichnet haben, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode draw aufrufen. Der Aufruf muss erst erfolgen, nachdem das Ereignis ausgelöst wurde.

Wird ausgelöst, wenn der Nutzer auf eine visuelle Entität klickt. Wenn Sie wissen möchten, was ausgewählt wurde, rufen Sie getSelection() auf.