Histogramm

Übersicht

Ein Histogramm ist ein Diagramm, in dem numerische Daten in Klassen gruppiert werden, wobei die Klassen als segmentierte Spalten dargestellt werden. Sie werden verwendet, um die Verteilung eines Datasets darzustellen und zu bestimmen, wie oft Werte in Bereiche fallen.

In Google Charts wird automatisch die Anzahl der Behälter für Sie ausgewählt. Alle Klassen sind gleich breit und haben eine proportionale Anzahl von Datenpunkten. In anderer Hinsicht ähneln Histogramme Spaltendiagrammen.

Beispiel

Hier ist ein Histogramm der Dinosaurierlänge:

Das Histogramm zeigt uns, dass der häufigste Behälter weniger als 10 Meter beträgt und dass es nur einen Dinosaurier über 40 Meter gibt. Wir können den Mauszeiger über den Balken bewegen, um zu sehen, dass es sich um den Seismosaurus handelt, der nur ein sehr großer Diplodocus ist (Paläontologen sind nicht sicher).

Den Code zum Generieren dieses Histogramms finden Sie unten. Nachdem Sie die Daten definiert haben (hier mit google.visualization.arrayToDataTable), wird das Diagramm mit einem Aufruf von google.visualization.Histogram definiert und mit der Methode draw gezeichnet.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Dinosaur', 'Length'],
          ['Acrocanthosaurus (top-spined lizard)', 12.2],
          ['Albertosaurus (Alberta lizard)', 9.1],
          ['Allosaurus (other lizard)', 12.2],
          ['Apatosaurus (deceptive lizard)', 22.9],
          ['Archaeopteryx (ancient wing)', 0.9],
          ['Argentinosaurus (Argentina lizard)', 36.6],
          ['Baryonyx (heavy claws)', 9.1],
          ['Brachiosaurus (arm lizard)', 30.5],
          ['Ceratosaurus (horned lizard)', 6.1],
          ['Coelophysis (hollow form)', 2.7],
          ['Compsognathus (elegant jaw)', 0.9],
          ['Deinonychus (terrible claw)', 2.7],
          ['Diplodocus (double beam)', 27.1],
          ['Dromicelomimus (emu mimic)', 3.4],
          ['Gallimimus (fowl mimic)', 5.5],
          ['Mamenchisaurus (Mamenchi lizard)', 21.0],
          ['Megalosaurus (big lizard)', 7.9],
          ['Microvenator (small hunter)', 1.2],
          ['Ornithomimus (bird mimic)', 4.6],
          ['Oviraptor (egg robber)', 1.5],
          ['Plateosaurus (flat lizard)', 7.9],
          ['Sauronithoides (narrow-clawed lizard)', 2.0],
          ['Seismosaurus (tremor lizard)', 45.7],
          ['Spinosaurus (spiny lizard)', 12.2],
          ['Supersaurus (super lizard)', 30.5],
          ['Tyrannosaurus (tyrant lizard)', 15.2],
          ['Ultrasaurus (ultra lizard)', 30.5],
          ['Velociraptor (swift robber)', 1.8]]);

        var options = {
          title: 'Lengths of dinosaurs, in meters',
          legend: { position: 'none' },
        };

        var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Die Labels (hier die Dinosauriernamen) können weggelassen werden. In diesem Fall wird in den Kurzinfos nur der numerische Wert angezeigt.

Farben steuern

Hier ist ein Histogramm der landesweiten Bevölkerung:

Es gibt mehr als 200 Länder mit weniger als 100 Millionen Einwohnern und einem starken Rückgang.

Dieses Histogramm verwendet die Option colors, um die Daten in Grün zu zeichnen:

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['green'],
  };

Wie bei allen Google-Diagrammen können die Farben entweder als englische Namen oder als Hexadezimalwerte angegeben werden.

Buckets steuern

Standardmäßig wählt Google Charts automatisch die Bucket-Größe aus und verwendet dafür einen bekannten Algorithmus für Histogramme. Manchmal möchten Sie dies jedoch überschreiben. Das Diagramm oben ist ein Beispiel. Bei so vielen Ländern im ersten Bucket ist es schwierig, die anderen Länder zu untersuchen.

In solchen Fällen bietet das Histogramm zwei Optionen: histogram.bucketSize, die den Algorithmus überschreiben und die Bucket-Größe hartcodiert, und histogram.lastBucketPercentile. Für die zweite Option ist eine weitere Erläuterung erforderlich: Sie ändert die Berechnung der Bucket-Größen, sodass die Werte, die höher oder niedriger als die verbleibenden Werte sind, um den von Ihnen angegebenen Prozentsatz ignoriert werden. Die Werte sind weiterhin im Histogramm enthalten, haben jedoch keinen Einfluss darauf, wie sie in Buckets aufgeteilt werden. Das ist hilfreich, wenn Sie nicht möchten, dass Ausreißer in ihren eigenen Buckets landen. Sie werden stattdessen mit dem ersten oder letzten Bucket gruppiert.

Im obigen Diagramm wurden die oberen und unteren fünf Prozent der Werte bei der Berechnung der Bucket-Größe ignoriert. Die Werte sind weiterhin grafisch dargestellt. Die einzige Änderung ist die Bucket-Größe, die Darstellung ist jedoch besser lesbar.

Dieses Beispiel zeigt auch, wie wir die Skalierung der vertikalen Achse für die Verwendung der Skalierung "Spiegelloglog" ändern können. Dies ist auch bei der Diagrammdarstellung von Daten mit langen Werten kleiner Werte hilfreich.

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['#e7711c'],
    histogram: { lastBucketPercentile: 5 },
    vAxis: { scaleType: 'mirrorLog' }
  };

Wie Sie sehen, hat das Entfernen der oberen und unteren fünf Prozent aus der Berechnung zu einer Bucket-Größe von 10.000.000 statt zu 100.000.000 geführt. Wenn Sie die ganze Zeit wissen würden,dass eine Bucket-Größe von 10.000.000 das war,was Sie wollten, hätten Sie histogram.bucketSize dazu verwenden können:

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['#e7711c'],
    histogram: { bucketSize: 10000000 }
  };

Im folgenden Beispiel wird gezeigt, wie Sie den Bucket-Bereich erweitern und viele weitere Buckets ohne Lücke dazwischen einfügen können. Mit der Option maxNumBuckets können Sie die Standardanzahl von Buckets erhöhen. Mit den Optionen histogram.minValue und histogram.maxValue wird der Bereich des Buckets erweitert. Wenn Daten außerhalb dieses Bereichs liegen, wird dieser jedoch nicht verkleinert.

Dieses Beispiel zeigt auch, dass Sie die Ticks angeben können, die für jeden Bucket angezeigt werden, indem Sie die explizite ticks-Option für hAxis verwenden. Dies hat keine Auswirkungen auf die Buckets selbst, sondern nur auf die Darstellung der Teilstriche.

Beachten Sie auch, dass wir chartArea.width so angeben, dass die Anzahl der Buckets genauer ohne visuelle Artefakte passt. Hier sehen Sie die Optionen für dieses Beispiel.

  var options = {
    title: 'Approximating Normal Distribution',
    legend: { position: 'none' },
    colors: ['#4285F4'],

    chartArea: { width: 405 },
    hAxis: {
      ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1]
    },
    bar: { gap: 0 },

    histogram: {
      bucketSize: 0.01,
      maxNumBuckets: 400,
      minValue: -1,
      maxValue: 1
    }
  };

Mehrere Serien

Hier ist ein Histogramm der Kosten für subatomare Partikel nach dem Standardmodell:

Das obige Diagramm enthält eine Reihe mit allen Partikeln. Subatomare Partikel lassen sich in vier Gruppen unterteilen: Quark, Lepton und Boson. Wir behandeln jede als eine eigene Reihe:

In diesem Diagramm verwenden wir für jeden der vier Arten von subatomaren Teilchen eine andere Reihe (und damit auch eine Farbe). Wir haben interpolateNulls explizit auf false gesetzt, um sicherzustellen, dass die Nullwerte (benötigt, weil die Reihen ungleich lang sind) nicht dargestellt werden. Außerdem wird legend.maxLines festgelegt, um der Legende eine weitere Zeile hinzuzufügen:

  var data = google.visualization.arrayToDataTable([
    ['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'],
    [2/3, -1, 0, 0],
    [2/3, -1, 0, null],
    [2/3, -1, 0, null],
    [-1/3, 0, 1, null],
    [-1/3, 0, -1, null],
    [-1/3, 0, null, null],
    [-1/3, 0, null, null]
  ]);

  var options = {
    title: 'Charges of subatomic particles',
    legend: { position: 'top', maxLines: 2 },
    colors: ['#5C3292', '#1A8763', '#871B47', '#999999'],
    interpolateNulls: false,
  };

Wird geladen

Der Paketname google.charts.load lautet "corechart".

  google.charts.load("current", {packages: ["corechart"]});

Der Klassenname der Visualisierung lautet google.visualization.Histogram:

  var visualization = new google.visualization.Histogram(container);

Datenformat

Es gibt zwei Möglichkeiten, eine Datentabelle für das Histogramm auszufüllen. Wenn es nur eine Reihe gibt:

  var data = google.visualization.arrayToDataTable([
    ['Name', 'Number'],
    ['Name 1', number1],
    ['Name 2', number2],
    ['Name 3', number3],
    ...
  ]);

Bei mehreren Serien:

  var data = google.visualization.arrayToDataTable([
    ['Series Name 1', 'Series Name 2', 'Series Name 3', ...],
    [series1_number1, series2_number1, series3_number1, ...],
    [series1_number2, series2_number2, series3_number2, ...],
    [series1_number3, series2_number3, series3_number3, ...],
    ...
  ]);

Für Histogramme werden derzeit keine optionalen Spaltenrollen unterstützt.

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:

  • 'linear' - Konstante Geschwindigkeit.
  • 'In' - Ease-In - Startet langsam und beschleunigt.
  • 'out' - Ease Out - Startet schnell und verlangsamt.
  • „inAndOut“ – Einfach ein- und ausschalten – langsam starten, beschleunigen und verlangsamen
Typ: String
Standardeinstellung: „linear“
Animation.Start

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

Typ: Boolesch
Standardeinstellung false
Achsentitel

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

  • in : Zeichnen Sie die Achsentitel innerhalb des Diagrammbereichs.
  • Out - Zeichnen Sie die Achsentitel außerhalb des Diagrammbereichs.
  • Keine: Titel der Achsen weglassen
Typ: String
Standard: 'out'
backgroundColor

Die Hintergrundfarbe für den Hauptbereich des Diagramms. Kann ein einfacher HTML-Farbstring sein, z. B. 'red' oder '#00cc00', oder ein Objekt mit den folgenden Eigenschaften.

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:
  • Pixel (z. B. 50)
  • Prozentsatz der verfügbaren Breite für jede Gruppe (z. B. „20 %“). „100 %“ bedeutet, dass zwischen ihnen kein Leerzeichen steht.
Typ: Zahl oder String
Standard: Das goldene Verhältnis, ca. „61,8 %“.
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: chartArea:{left:20,top:0,width:'50%',height:'75%'}

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:
  • stroke: Die Farbe, angegeben als Hexadezimalstring oder englische Farbbezeichnung.
  • strokeWidth: zeichnet, sofern angegeben, einen Rahmen um den Diagrammbereich der angegebenen Breite (und in der Farbe stroke).
Typ: String oder Objekt
Standard: Weiß
Diagrammfläche links

Gibt an, wie weit das Diagramm vom linken Rand gezeichnet werden soll.

Typ:Zahl oder String
Standard: automatisch
ChartArea.Oben

Gibt an, wie weit das Diagramm vom oberen Rand aus gezeichnet werden soll.

Typ:Zahl oder String
Standard: automatisch
Diagrammfläche.width

Breite des Diagrammbereichs.

Typ: Zahl oder String
Standard: automatisch
Diagrammfläche.height

Höhe des Diagrammbereichs.

Typ:Zahl oder String
Standard: automatisch
Farben

Die für die Diagrammelemente zu verwendenden Farben. Ein Array von Strings, wobei jedes Element ein HTML-Farbstring ist, zum Beispiel colors:['red','#004411'].

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
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:

  • „Datum“: Fokus auf einen einzelnen Datenpunkt Korreliert mit einer Zelle in der Datentabelle.
  • 'Kategorie': Wählen Sie eine Gruppierung aller Datenpunkte entlang der Hauptachse aus. Korreliert zu einer Zeile in der Datentabelle.

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.gridlines

Ein Objekt mit Eigenschaften zum Konfigurieren der Gitternetzlinien auf der horizontalen Achse. Beachten Sie, dass die Gitternetzlinien für die horizontale Achse vertikal gezeichnet sind. Zur Angabe von Attributen dieses Objekts können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt:

{color: '#333', minSpacing: 20}
Type: Objekt
Standard: null
hAxis.gridlines.color

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

Typ: String
Standard: '#CCC'
hAxis.gridlines.count

Die ungefähre Anzahl horizontaler Gitternetzlinien im Diagrammbereich. Wenn Sie für gridlines.count eine positive Zahl angeben, wird damit die minSpacing zwischen den Gitternetzlinien berechnet. Sie können den Wert 1 angeben, wenn nur eine Gitternetzlinie gezeichnet werden soll, oder 0, um keine Gitternetzlinien zu zeichnen. Geben Sie den Standardwert „-1“ an, um die Anzahl der Gitternetzlinien auf der Grundlage anderer Optionen automatisch zu berechnen.

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 gridlines.units.<unit>.interval, die nur für Datum und Uhrzeit verwendet werden. Bei linearen Skalen ist der Standardwert [1, 2, 2.5, 5].Das bedeutet, dass die Gitternetzlinienwerte auf jede Einheit (1), auf geraden Einheiten (2) oder auf ein Vielfaches von 2,5 oder 5 fallen können. Potenz von 10-fachem Wert wird ebenfalls berücksichtigt (z.B. [10, 20, 25, 50] und [.1, .2, .25, .5]). Für Logskalierungen ist der Standardwert [1, 2, 5].

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 40 für lineare Skalen und 20 für Logskalierungen. Wenn Sie die count und nicht die minSpacing angeben, wird der minSpacing aus der Anzahl berechnet. Wenn Sie umgekehrt minSpacing und nicht count angeben, wird die Anzahl anhand der minSpacing berechnet. Wenn Sie beides angeben, überschreibt minSpacing den Wert.

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 gridlines.multiple = 1000 angeben.

Typ: Zahl
Standard: 1
hAxis.gridlines.units

Überschreibt das Standardformat für verschiedene Aspekte von Datentypen für Datum/Datum/Uhrzeit, wenn es mit berechneten Gitternetzlinien verwendet wird. Ermöglicht die Formatierung für Jahre, Monate, Tage, Stunden, Minuten, Sekunden und Millisekunden.

Allgemeines Format:

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

Weitere Informationen finden Sie unter Datum und Uhrzeit.

Type: Objekt
Standard: null
hAxis.minorGridlines

Ein Objekt mit Mitgliedern, um die kleinen Gitternetzlinien auf der horizontalen Achse zu konfigurieren, ähnlich der Option „hAxis.gridlines“.

Type: Objekt
Standard: null
hAxis.minorGridlines.color

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

Typ: String
Standard:Eine Mischung aus Raster- und Hintergrundfarben
hAxis.minorGridlines.count

Die Option minorGridlines.count ist größtenteils veraltet, mit Ausnahme der Deaktivierung kleinerer Gitternetzlinien durch Festlegen der Anzahl auf 0. Die Anzahl der Nebengitternetze hängt jetzt vollständig vom Intervall zwischen den Hauptgitternetzlinien (siehe hAxis.gridlines.interval) und dem erforderlichen Mindestbereich ab (siehe hAxis.minorGridlines.minSpacing).

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 [1, 1.5, 2, 2.5, 5] und für Logskalierungen [1, 2, 5].

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 gridlines.multiple.

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
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> }
    

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

Type: Objekt
Standard: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.title

hAxis-Attribut, das den Titel der horizontalen Achse angibt.

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> }
    

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

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.

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 hAxis.textPosition auf „out“ (Standard) gesetzt ist. Der Standardwert für Datumsangaben und Uhrzeiten ist false.

Typ: Boolesch
Standard: automatisch
hAxis.slantedText-Winkel

Der Winkel des Texts der horizontalen Achse, wenn er schräg gezeichnet wird. Wird ignoriert, wenn hAxis.slantedText den Wert false hat oder sich im automatischen Modus befindet und das Diagramm den Text horizontal zeichnet. Bei einem positiven Winkel ist die Drehung entgegen dem Uhrzeigersinn und bei einem negativen Winkel im Uhrzeigersinn.

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.viewWindowMode

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

  • „pretty“ – Skalieren Sie die horizontalen Werte so, dass die Maximal- und Minimalwerte innerhalb des linken und rechten Diagrammbereichs etwas gerendert werden. Das viewWindow wird auf die nächste Hauptrasterlinie für Zahlen oder die nächste Nebengitterlinie für Datumsangaben und Uhrzeiten erweitert.
  • „maximized“ (maximiert): Die horizontalen Werte werden so skaliert, dass die Maximal- und Minimalwerte den linken und rechten Rand des Diagrammbereichs berühren. Dadurch werden haxis.viewWindow.min und haxis.viewWindow.max ignoriert.
  • „explicit“ – veraltete Option zum Angeben der linken und rechten Skalierungswerte des Diagrammbereichs. (Veraltet, da es mit haxis.viewWindow.min und haxis.viewWindow.max redundant ist.) Datenwerte außerhalb dieser Werte werden zugeschnitten. Du musst ein hAxis.viewWindow-Objekt angeben, das die Höchst- und Mindestwerte für die Anzeige angibt.
Typ: String
Standard:Entspricht „pretty“, aber haxis.viewWindow.min und haxis.viewWindow.max haben bei Verwendung Vorrang.
hAxis.viewWindow

Gibt den Zuschneidebereich der horizontalen Achse an.

Type: Objekt
Standard: null
hAxis.viewWindow.max

Der nullbasierte Zeilenindex, bei dem das Zuschneidefenster endet. Datenpunkte ab diesem Index werden abgeschnitten. In Verbindung mit vAxis.viewWindowMode.min definiert es einen halb geöffneten Bereich [min, max), der die anzuzeigenden Elementindexe angibt. Das heißt, jeder Index wird so angezeigt, dass min <= index < max angezeigt wird.

Wird ignoriert, wenn hAxis.viewWindowMode „pretty“ oder „maximiert“ ist.

Typ: Zahl
Standard: automatisch
hAxis.viewWindow.Min

Der nullbasierte Zeilenindex, bei dem das Zuschneidefenster beginnt. Datenpunkte an Indizes, die darunter liegen, werden abgeschnitten. In Verbindung mit vAxis.viewWindowMode.max definiert es einen halb geöffneten Bereich [min, max), der die anzuzeigenden Elementindexe angibt. Das heißt, jeder Index wird so angezeigt, dass min <= index < max angezeigt wird.

Wird ignoriert, wenn hAxis.viewWindowMode „pretty“ oder „maximiert“ ist.

Typ: Zahl
Standard: automatisch
histogram.bucketSize

Die Größe der einzelnen Histogrammbalken hartcodieren, anstatt sie algorithmisch zu bestimmen.

Typ:Zahl
Standard: automatisch
histogram.hideBucketItems

Lassen Sie die dünnen Unterteilungen zwischen den Blöcken des Histogramms weg und bilden Sie eine Reihe durchgehender Balken.

Typ: Boolesch
Standard: false
histogram.lastBucketPercentile

Ignorieren Sie beim Berechnen der Bucket-Größe des Histogramms den oberen und unteren lastBucketPercentile-Prozent-Wert. Die Werte sind weiterhin im Histogramm enthalten, wirken sich aber nicht auf den Bucketing aus.

Typ: Zahl
Standard: 0
Histogramm.minValue

Maximieren Sie den Bucket-Bereich, um diesen Wert einzubeziehen.

Typ:Zahl
Standard: auto – Datenmin. verwenden
Histogramm.maxValue

Maximieren Sie den Bucket-Bereich, um diesen Wert einzubeziehen.

Typ:Zahl
Standard:automatisch – max. Datennutzung
histogram.numBucketsRule

So berechnen Sie die Standardanzahl von Buckets. Folgende Werte sind möglich:

  • 'sqrt': Berechnet die Quadratwurzel der Anzahl von Datenpunkten.
  • 'sturges': abgeleitet von der Binomialverteilung. Vermutlich eine ungefähr normale Verteilung annehmen.
  • 'rice': Eine einfachere Alternative zu Sturges.
Weitere Informationen finden Sie unter Wikipedia – Histogramm: Anzahl der Klassen und Breite.

Typ: String
Standard:'sqrt'
height

Höhe des Diagramms in Pixeln.

Typ: Zahl
Standard: Höhe des beinhaltenden Elements
interpolateNulls

Gibt an, ob der Wert fehlender Punkte erraten werden soll. Wenn der Wert „true“ ist, wird der Wert fehlender Daten anhand von benachbarten Punkten geschätzt. Bei „false“ wird an der unbekannten Stelle eine Unterbrechung in der Zeile eingefügt.

Dies wird in Flächendiagrammen mit der Option isStacked: true/'percent'/'relative'/'absolute' nicht unterstützt.

Typ: Boolesch
Standard: false
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 isStacked unterstützt auch 100 %-Stapel, wobei die Stapel von Elementen bei jedem Domainwert neu skaliert werden, sodass die Summe 100 % ergibt.

isStacked bietet folgende Optionen:

  • false: Die Elemente werden nicht gestapelt. Das ist die Standardeinstellung.
  • true: Stackt Elemente für alle Reihen bei jedem Domainwert.
  • 'percent': Stackt Elemente für alle Reihen bei jedem Domainwert und skaliert sie so, dass sie insgesamt 100 % ergeben, wobei der Wert jedes Elements als Prozentsatz von 100 % berechnet wird.
  • 'relative': stapelt Elemente für alle Reihen an jedem Domainwert und skaliert sie so, dass sie insgesamt 1 ergeben, wobei der Wert jedes Elements als Bruchzahl 1 berechnet wird.
  • 'absolute': Funktioniert wie isStacked: true.

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 'relative' und 0 bis 100% für 'percent' gesetzt. (Hinweis: Wenn Sie die Option 'percent' verwenden, werden die Werte für die Achsen und Teilstriche in Prozent angegeben. Die tatsächlichen Werte sind jedoch die relativen Skalenwerte von 0 bis 1. Der Grund hierfür ist, dass die Teilpunkte der Achse auch das Format „#.##%“ auf die relativen Skalawerte von 0–1 anwenden. Wenn Sie isStacked: 'percent' verwenden, achten Sie darauf, Tick-/Rasterlinien mit den relativen Skalawerten von 0–1 anzugeben. Sie können die Gitternetzlinien/Tickwerte und die Formatierung mithilfe der entsprechenden hAxis/vAxis-Optionen anpassen.

Ein 100 %-Stapel unterstützt nur Datenwerte vom Typ number und muss eine Baseline von null haben.

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.Ausrichtung

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

  • „start“: Auf den Anfang der Fläche ausgerichtet, die für die Legende zugewiesen ist.
  • „center“ – zentriert im Bereich, der der Legende zugewiesen ist
  • 'Ende': Ausgerichtet am Ende des Bereichs, der der Legende zugewiesen ist.

Anfang, Mittelpunkt und Ende sind relativ zum Stil der Legende (vertikal oder horizontal). In der Legende „Rechts“ befinden sich „Start“ und „Ende“ oben bzw. unten. Bei einer Legende „Oben“ befinden sich „Start“ bzw. „Ende“ am linken bzw. rechten Rand des Bereichs.

Der Standardwert hängt von der Position der Legende ab. Für Legenden des Typs "Unten" lautet die Standardeinstellung "Mitte", andere Legenden standardmäßig "Anfang".

Typ: String
Standard: automatisch
Legende.maxLines

Maximale Anzahl von Zeilen in der Legende. Legen Sie eine Zahl größer als eins fest, um der Legende Zeilen hinzuzufügen. Hinweis: Die genaue Logik zum Ermitteln der tatsächlichen Anzahl der gerenderten Zeilen ist noch in der Entwicklung.

Diese Option funktioniert derzeit nur, wenn „legend“ für „position“ festgelegt ist.

Typ:Zahl
Standard: 1
Legende.Seitenindex

Anfänglich ausgewählter nullbasierter Seitenindex der Legende.

Typ:Zahl
Standard: 0
Legende.Position

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

  • 'bottom' – unter dem Diagramm.
  • „left“: Links neben dem Diagramm, sofern der linken Achse keine Reihen zugeordnet sind. Wenn die Legende also links angezeigt werden soll, verwenden Sie die Option targetAxisIndex: 1.
  • 'In': Innerhalb des Diagramms, links oben.
  • „Keine“: Es wird keine Legende angezeigt.
  • „right“: rechts neben dem Diagramm Nicht mit der Option vAxes kompatibel.
  • 'Oben': Oberhalb des Diagramms.
Typ: String
Standardeinstellung: „right“
Legende.textStyle

Ein Objekt, das den Legendentextstil angibt. Das Objekt hat folgendes Format:

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

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

Type: Objekt
Standard: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Ausrichtung

Die Ausrichtung des Diagramms. Wenn 'vertical' festgelegt ist, werden die Achsen des Diagramms so gedreht, dass (z. B.) ein Säulendiagramm zu einem Balkendiagramm wird und ein Flächendiagramm nach rechts statt nach oben wächst:

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.

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:

  • color: Die für diese Reihe zu verwendende Farbe. Geben Sie einen gültigen HTML-Farbstring an.
  • labelInLegend: Die Beschreibung der Datenreihe, die in der Diagrammlegende angezeigt werden soll.
  • targetAxisIndex: Die Achse, der diese Reihe zugewiesen werden soll, wobei 0 die Standardachse und 1 die Gegenachse ist. Der Standardwert ist 0. Wird auf 1 festgelegt, um ein Diagramm zu definieren, in dem verschiedene Reihen an verschiedenen Achsen gerendert werden. Der Standardachse wurde mindestens eine Reihe zugewiesen. Sie können für verschiedene Achsen eine andere Skala definieren.
  • visibleInLegend: Ein boolescher Wert, wobei "true" bedeutet, dass die Reihe einen Legendeneintrag enthalten sollte, und "false", dass dies nicht der Fall ist. Der Standardwert ist „true“.

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:

  • „maximiert“: maximiert den Bereich des Diagramms und zeichnet die Legende sowie alle Labels im Diagrammbereich. Legen Sie die folgenden Optionen fest:
    chartArea: {width: '100%', height: '100%'},
    legend: {position: 'in'},
    titlePosition: 'in', axisTitlesPosition: 'in',
    hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
            
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:

  • in : Zeichnen Sie den Titel in den Diagrammbereich.
  • out: Zeichnen Sie den Titel außerhalb des Diagrammbereichs.
  • Keine: Titel auslassen.
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> }
    

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

Type: Objekt
Standard: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Kurzinfo

Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Kurzinfo-Elemente. Zur Angabe von Attributen dieses Objekts können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt:

{textStyle: {color: '#FF0000'}, showColorCode: true}
Type: Objekt
Standard: null
tooltip.isHtml

Wenn die Richtlinie auf „true“ gesetzt ist, werden HTML-gerenderte statt SVG-Kurzinfos verwendet. Weitere Informationen finden Sie unter Kurzinfos anpassen.

Hinweis:Die Anpassung der HTML-Kurzinfos über die Datenrolle der Kurzinfo-Spalte wird von der Visualisierung des Blasendiagramms nicht unterstützt.

Typ: Boolesch
Standard: false
tooltip.showColorCode

Wenn dies der Fall ist, werden in der Kurzinfo farbige Quadrate neben den Reiheninformationen angezeigt. Die Standardeinstellung ist „true“, wenn focusTarget auf „category“ festgelegt ist. Andernfalls ist die Standardeinstellung „false“.

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> }
    

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

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:

  • „Fokus“: Die Kurzinfo wird angezeigt, wenn der Nutzer den Mauszeiger auf das Element bewegt.
  • „Keine“: Die Kurzinfo wird nicht angezeigt.
Typ: String
Standardeinstellung: „focus“
Vaxe

Gibt die Eigenschaften für einzelne vertikale Achsen an, wenn das Diagramm über mehrere vertikale Achsen verfügt. Jedes untergeordnete Objekt ist ein vAxis-Objekt und kann alle von vAxis unterstützten Attribute enthalten. Diese Property-Werte überschreiben alle globalen Einstellungen für dieselbe Property.

Wenn Sie ein Diagramm mit mehreren vertikalen Achsen angeben möchten, definieren Sie zuerst mit series.targetAxisIndex eine neue Achse und konfigurieren Sie diese dann mit vAxes. Im folgenden Beispiel wird der rechten Achse die Reihe 2 zugewiesen und dafür ein benutzerdefinierter Titel und Textstil festgelegt:

{
  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 vAxis-Objekt identisch:

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

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

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. 'red' oder '#00cc00'.

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 -1 an, um die Reihenfolge der Werte umzukehren.

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 {format:'#,###%'} werden beispielsweise die Werte „1.000 %“, „750 %“ und „50 %“ für die Werte 10, 7.5 und 0,5 angezeigt. Sie können auch Folgendes angeben:

  • {format: 'none'}: Zeigt Zahlen ohne Formatierung an (z.B. 8.000.000)
  • {format: 'decimal'}: Zeigt Zahlen mit Tausenden von Trennzeichen an (z.B. 8.000.000)
  • {format: 'scientific'}: Zeigt Zahlen in wissenschaftlicher Notation (z.B. 8e6)
  • {format: 'currency'}: Zeigt Zahlen in der Landeswährung an (z.B. 8.000.000,00 $)
  • {format: 'percent'}: Zeigt Zahlen in Prozent an (z.B. 800.000.000%)
  • {format: 'short'}: Abgekürzte Zahlen (z.B. 8 Mio.)
  • {format: 'long'}: Die Zahlen werden als vollständige Wörter angezeigt, z.B. 8 Millionen)

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 format:"#" angeben, wenn Sie nur Ganzzahlwerte anzeigen möchten. Wenn keine Alternative diese Bedingung erfüllt, werden keine Gitternetzlinien oder Teilstriche angezeigt.

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 gridlines.count eine positive Zahl angeben, wird damit die minSpacing zwischen den Gitternetzlinien berechnet. Sie können den Wert 1 angeben, wenn nur eine Gitternetzlinie gezeichnet werden soll, oder 0, um keine Gitternetzlinien zu zeichnen. Geben Sie den Standardwert „-1“ an, um die Anzahl der Gitternetzlinien auf der Grundlage anderer Optionen automatisch zu berechnen.

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 gridlines.units.<unit>.interval, die nur für Datum und Uhrzeit verwendet werden. Bei linearen Skalen ist der Standardwert [1, 2, 2.5, 5].Das bedeutet, dass die Gitternetzlinienwerte auf jede Einheit (1), auf geraden Einheiten (2) oder auf ein Vielfaches von 2,5 oder 5 fallen können. Potenz von 10-fachem Wert wird ebenfalls berücksichtigt (z.B. [10, 20, 25, 50] und [.1, .2, .25, .5]). Für Logskalierungen ist der Standardwert [1, 2, 5].

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 40 für lineare Skalen und 20 für Logskalierungen. Wenn Sie die count und nicht die minSpacing angeben, wird der minSpacing aus der Anzahl berechnet. Wenn Sie umgekehrt minSpacing und nicht count angeben, wird die Anzahl anhand der minSpacing berechnet. Wenn Sie beides angeben, überschreibt minSpacing den Wert.

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 gridlines.multiple = 1000 angeben.

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 [1, 1.5, 2, 2.5, 5] und für Logskalierungen [1, 2, 5].

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 gridlines.multiple.

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

vAxis-Eigenschaft, die die vertikale Achse zur logarithmischen Skala macht. folgende Arten von Werten sind möglich:

  • null: Es wird keine logarithmische Skalierung durchgeführt.
  • „log“ – Logarithmische Skalierung. Negative und Nullwerte werden nicht dargestellt. Diese Option entspricht der Einstellung vAxis: { logscale: true }.
  • „mirrorLog“ – Logarithmische Skalierung, in der negative und Nullwerte dargestellt werden. Der dargestellte Wert einer negativen Zahl ist das negative Ergebnis des Logwerts des absoluten Werts. Werte nahe 0 werden auf einer linearen Skala dargestellt.
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> }
    

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

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 v für den Tickwert und eine optionale f-Eigenschaft mit dem Literalstring haben, der als Label angezeigt werden soll.

Das viewWindow wird automatisch um die Mindest- und Höchstwerte erweitert, es sei denn, Sie geben viewWindow.min oder viewWindow.max zum Überschreiben an.

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] }
Typ: Array von Elementen
Standard: automatisch
vAxis.Titel

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

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> }
  

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

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. vAxis.viewWindow.max überschreibt diese Property.

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. vAxis.viewWindow.min überschreibt diese Property.

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:

  • „pretty“: Die vertikalen Werte werden so skaliert, dass die maximalen und minimalen Datenwerte im unteren und oberen Bereich des Diagrammbereichs ein wenig gerendert werden. Das viewWindow wird auf die nächste Hauptrasterlinie für Zahlen oder die nächste Nebengitterlinie für Datumsangaben und Uhrzeiten erweitert.
  • „maximized“ (maximiert): Die vertikalen Werte werden so skaliert, dass die Maximal- und Minimalwerte den oberen und unteren Teil des Diagrammbereichs berühren. Dadurch werden vaxis.viewWindow.min und vaxis.viewWindow.max ignoriert.
  • „explizit“: Diese Option zur Angabe der oberen und unteren Skalierungswerte des Diagrammbereichs wurde eingestellt. (Veraltet, da es mit vaxis.viewWindow.min und vaxis.viewWindow.max redundant ist. Datenwerte außerhalb dieser Werte werden zugeschnitten. Du musst ein vAxis.viewWindow-Objekt angeben, das die Höchst- und Mindestwerte für die Anzeige angibt.
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 vAxis.viewWindowMode „pretty“ oder „maximiert“ ist.

Typ:Zahl
Standard: automatisch
vAxis.viewWindow.min

Der minimale vertikale Datenwert, der gerendert werden soll.

Wird ignoriert, wenn vAxis.viewWindowMode „pretty“ oder „maximiert“ ist.

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 ready ausgelöst wurde. Extended description

Rückgabetyp: Keine
getAction(actionID)

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

Return Type: Objekt für die Rückgabe
getBoundingBox(id)

Gibt ein Objekt zurück, das links, oben, breit und hoch des Diagrammelements id ist. Das Format für id ist noch nicht dokumentiert. Es sind die Rückgabewerte von Ereignis-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 im fünften Keil eines Kreisdiagramms
cli.getBoundingBox('slice#4')
Begrenzungsrahmen der Diagrammdaten eines vertikalen Diagramms (z.B. eines Spaltendiagramms):
cli.getBoundingBox('vAxis#0#gridline')
Begrenzungsrahmen der Diagrammdaten eines horizontalen Diagramms (z.B. Balkendiagramms):
cli.getBoundingBox('hAxis#0#gridline')

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:

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 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:

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

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 xPosition zurück. Dies ist ein Pixelversatz vom linken Rand des Diagrammcontainers. Kann negativ sein.

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

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. Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden. Extended description.

Rückgabetyp:Array von Auswahlelementen
getVAxisValue(yPosition, optional_axis_index)

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

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

Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde.

Rückgabetyp: Nummer
getXLocation(dataValue, optional_axis_index)

Gibt die Pixel-x-Koordinate von dataValue relativ zum linken Rand des Containers des Diagramms zurück.

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

Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde.

Rückgabetyp: Nummer
getYLocation(dataValue, optional_axis_index)

Gibt die Pixel-y-Koordinate von dataValue relativ zum oberen Rand des Containers des Diagramms zurück.

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

Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde.

Rückgabetyp: Nummer
removeAction(actionID)

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

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 setAction wird ein Objekt als Aktionsparameter verwendet. Für dieses Objekt sollten drei Eigenschaften angegeben werden: id – die festgelegte ID, text – der Text, der in der Kurzinfo der Aktion angezeigt wird, und action – die Funktion, die ausgeführt werden soll, wenn ein Nutzer auf den Aktionstext klickt.

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

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. Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden. Extended description.

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. Ein Balken entspricht einer Zelle in der Datentabelle, einem Legendeneintrag für eine Spalte (Zeilenindex ist null) und einer Kategorie einer Zeile (Spaltenindex ist null).

Attribute: Zeile, Spalte
onmouseout

Wird ausgelöst, wenn der Nutzer die Maus von einer visuellen Entität wegbewegt Gibt die Zeilen- und Spaltenindexe des entsprechenden Datentabellenelements zurück. Ein Balken entspricht einer Zelle in der Datentabelle, einem Legendeneintrag für eine Spalte (Zeilenindex ist null) und einer Kategorie einer Zeile (Spaltenindex ist null).

Attribute: Zeile, Spalte
ready

Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden nach dem Zeichnen aufrufen möchten, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode draw aufrufen. Sie sollten sie erst aufrufen, nachdem das Ereignis ausgelöst wurde.

Eigenschaften:Keine
select

Wird ausgelöst, wenn der Nutzer auf ein visuelles Element klickt. Rufen Sie getSelection() auf, um zu erfahren, was ausgewählt wurde.

Eigenschaften: Keine

Datenrichtlinie

Der gesamte Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.