Visualisierung: Streudiagramm

Übersicht

In Streudiagrammen werden Punkte in einer Grafik dargestellt. Wenn der Nutzer den Mauszeiger auf die Punkte bewegt, werden Kurzinfos mit weiteren Informationen angezeigt.

Google-Streudiagramme werden je nach Browserfunktionen im Browser mit SVG oder VML gerendert.

Beispiel

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Formen ändern und animieren

Standardmäßig sind Streudiagramme die Elemente Ihres Datasets mit Kreisen. Mit der Option pointShape können Sie weitere Formen angeben, die in der Dokumentation Punkte anpassen beschrieben werden.

Wie bei den meisten anderen Google-Diagrammen kannst du sie mit Ereignissen animieren. Sie können einen Ereignis-Listener für das erste ready-Ereignis hinzufügen und das Diagramm nach den gewünschten Änderungen neu zeichnen. Nach dem ersten ready-Ereignis können Sie auf das animationfinish-Ereignis warten, um den Vorgang zu wiederholen, was zu einer kontinuierlichen Animation führt. Mit der Option animation wird festgelegt, wie die Neuzeichnung ausgeführt werden soll: sofort (keine Animation) oder reibungslos und wenn reibungslos und mit welchem Verhalten.

Gute Teile
  var options = {
    legend: 'none',
    colors: ['#087037'],
    pointShape: 'star',
    pointSize: 18,
    animation: {
      duration: 200,
      easing: 'inAndOut',
    }
  };

  // Start the animation by listening to the first 'ready' event.
  google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

  // Control all other animations by listening to the 'animationfinish' event.
  google.visualization.events.addListener(chart, 'animationfinish', randomWalk);
  ...
  function randomWalk() {
    ...
  }
Vollständiges HTML
<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 = new google.visualization.DataTable();
      data.addColumn('number');
      data.addColumn('number');

      var radius = 100;
      for (var i = 0; i < 6.28; i += 0.1) {
        data.addRow([radius * Math.cos(i), radius * Math.sin(i)]);
      }

      // Our central point, which will jiggle.
      data.addRow([0, 0]);

      var options = {
        legend: 'none',
        colors: ['#087037'],
        pointShape: 'star',
        pointSize: 18,
        animation: {
          duration: 200,
          easing: 'inAndOut',
        }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div'));

      // Start the animation by listening to the first 'ready' event.
      google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

      // Control all other animations by listening to the 'animationfinish' event.
      google.visualization.events.addListener(chart, 'animationfinish', randomWalk);

      chart.draw(data, options);

      function randomWalk() {
        var x = data.getValue(data.getNumberOfRows() - 1, 0);
        var y = data.getValue(data.getNumberOfRows() - 1, 1);
        x += 5 * (Math.random() - 0.5);
        y += 5 * (Math.random() - 0.5);
        if (x * x + y * y > radius * radius) {
          // Out of bounds. Bump toward center.
          x += Math.random() * ((x < 0) ? 5 : -5);
          y += Math.random() * ((y < 0) ? 5 : -5);
        }
        data.setValue(data.getNumberOfRows() - 1, 0, x);
        data.setValue(data.getNumberOfRows() - 1, 1, y);
        chart.draw(data, options);
      }
    }
  </script>
  </head>
  <body>
    <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div>
  </body>
</html>

Material-Streudiagramme erstellen

2014 kündigte Google Richtlinien an, die ein einheitliches Erscheinungsbild für alle Properties und Apps (z. B. Android-Apps) von Google unterstützen sollen. Wir nennen dies Material Design. Wir stellen „Material“-Versionen all unserer Kerndiagramme bereit. Wenn ihr möchtet, könnt ihr sie gerne verwenden.

Das Erstellen eines Materialstreudiagramms ähnelt dem Erstellen eines sogenannten „klassischen“ Streudiagramms. Sie laden die Google Visualization API (aber mit dem Paket 'scatter' anstelle des Pakets 'corechart'), definieren Ihre Datentabelle und erstellen dann ein Objekt (anstelle der Klasse google.charts.Scatter anstelle von google.visualization.ScatterChart).

Hinweis:Material-Diagramme funktionieren in älteren Versionen des Internet Explorer nicht. Internet Explorer 8 und frühere Versionen unterstützen kein SVG, was für Material Charts erforderlich ist.

Material Streudiagramme bieten viele kleine Verbesserungen im Vergleich zu klassischen Streudiagrammen, darunter eine variable Deckkraft für die Lesbarkeit überlappender Punkte, eine verbesserte Farbpalette, eine klarere Labelformatierung, engere Standardabstände, weichere Gitternetzlinien und Titel sowie das Hinzufügen von Untertiteln. 

      google.charts.load('current', {'packages':['scatter']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67], [1, 88], [2, 77],
          [3, 93], [4, 85], [5, 91],
          [6, 71], [7, 78], [8, 93],
          [9, 80], [10, 82],[0, 75],
          [5, 80], [3, 90], [1, 72],
          [5, 75], [6, 68], [7, 98],
          [3, 82], [9, 94], [2, 79],
          [2, 95], [2, 86], [3, 67],
          [4, 60], [2, 80], [6, 92],
          [2, 81], [8, 79], [9, 83],
          [3, 75], [1, 80], [3, 71],
          [3, 89], [4, 92], [5, 85],
          [6, 92], [7, 78], [6, 95],
          [3, 81], [0, 64], [4, 85],
          [2, 83], [3, 96], [4, 77],
          [5, 89], [4, 89], [7, 84],
          [4, 92], [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          hAxis: {title: 'Hours Studied'},
          vAxis: {title: 'Grade'}
        };

        var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

        chart.draw(data, google.charts.Scatter.convertOptions(options));
      }

Die Materialdiagramme befinden sich in der Betaphase. Das Erscheinungsbild und die Interaktivität sind weitgehend endgültig, aber viele der Optionen, die in klassischen Diagrammen verfügbar sind, sind dort noch nicht verfügbar. Eine Liste der noch nicht unterstützten Optionen finden Sie hier.

Die Art und Weise, wie Optionen deklariert werden, ist also nicht abgeschlossen. Wenn Sie also die klassischen Optionen verwenden, müssen Sie sie in Material-Optionen konvertieren. Ersetzen Sie dazu diese Zeile:

chart.draw(data, options);

...durch:

chart.draw(data, google.charts.Scatter.convertOptions(options));

Dual-Y-Diagramme

Manchmal möchten Sie zwei Reihen in einem Streudiagramm darstellen, mit zwei unabhängigen y-Achsen: einer linken Achse für eine Reihe und einer rechten Achse für eine andere:

Unsere zwei Y-Achsen sind nicht nur anders beschriftet („Abschlussprüfung“ statt „Studienstunden“), sondern auch ihre eigenen unabhängigen Skalen und Gitternetzlinien. Wenn Sie dieses Verhalten anpassen möchten, verwenden Sie die Optionen vAxis.gridlines.

Im folgenden Code geben die Optionen axes und series zusammen die Dual-Y-Darstellung des Diagramms an. Mit der Option series wird festgelegt, welche Achsen jeweils verwendet werden sollen ('final grade' und 'hours studied'). Sie müssen keinen Bezug zu den Spaltennamen in der Datentabelle haben. Mit der Option axes wird dieses Diagramm dann zu einem Dual-Y-Diagramm. Dabei wird die 'Final Exam Grade'-Achse links und die 'Hours Studied'-Achse rechts platziert. 

      google.charts.load('current', {'packages':['corechart', 'scatter']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Student ID');
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 0, 67],  [1, 1, 88],   [2, 2, 77],
          [3, 3, 93],  [4, 4, 85],   [5, 5, 91],
          [6, 6, 71],  [7, 7, 78],   [8, 8, 93],
          [9, 9, 80],  [10, 10, 82], [11, 0, 75],
          [12, 5, 80], [13, 3, 90],  [14, 1, 72],
          [15, 5, 75], [16, 6, 68],  [17, 7, 98],
          [18, 3, 82], [19, 9, 94],  [20, 2, 79],
          [21, 2, 95], [22, 2, 86],  [23, 3, 67],
          [24, 4, 60], [25, 2, 80],  [26, 6, 92],
          [27, 2, 81], [28, 8, 79],  [29, 9, 83]
        ]);

        var materialOptions = {
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          width: 800,
          height: 500,
          series: {
            0: {axis: 'hours studied'},
            1: {axis: 'final grade'}
          },
          axes: {
            y: {
              'hours studied': {label: 'Hours Studied'},
              'final grade': {label: 'Final Exam Grade'}
            }
          }
        };

        var classicOptions = {
          width: 800,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Students\' Final Grades - based on hours studied',

          vAxes: {
            // Adds titles to each axis.
            0: {title: 'Hours Studied'},
            1: {title: 'Final Exam Grade'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Scatter(chartDiv);
          materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ScatterChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };

Top-X-Charts

Hinweis:Achsen von oben sind nur für Materialdiagramme mit Paketen scatter verfügbar.

Wenn Sie die X-Achsen-Labels und -Titel oben im Diagramm platzieren möchten, können Sie dies in Material-Diagrammen mit der Option axes.x tun: 

      google.charts.load('current', {'packages':['scatter']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67],  [1, 88],  [2, 77],
          [3, 93],  [4, 85],  [5, 91],
          [6, 71],  [7, 78],  [8, 93],
          [9, 80],  [10, 82], [0, 75],
          [5, 80],  [3, 90],  [1, 72],
          [5, 75],  [6, 68],  [7, 98],
          [3, 82],  [9, 94],  [2, 79],
          [2, 95],  [2, 86],  [3, 67],
          [4, 60],  [2, 80],  [6, 92],
          [2, 81],  [8, 79],  [9, 83],
          [3, 75],  [1, 80],  [3, 71],
          [3, 89],  [4, 92],  [5, 85],
          [6, 92],  [7, 78],  [6, 95],
          [3, 81],  [0, 64],  [4, 85],
          [2, 83],  [3, 96],  [4, 77],
          [5, 89],  [4, 89],  [7, 84],
          [4, 92],  [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          axes: {
            x: {
              0: {side: 'top'}
            }
          }
        };

        var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));

        chart.draw(data, google.charts.Scatter.convertOptions(options));
      }

Wird geladen

Der google.charts.load-Paketname lautet "corechart" und der Klassenname der Visualisierung ist google.visualization.ScatterChart. 

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

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

Bei Material Streudiagrammen ist der google.charts.load-Paketname "scatter" und der Klassenname der Visualisierung google.charts.Scatter. 

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

  var visualization = new google.charts.Scatter(container);

Datenformat

Zeilen: Jede Zeile der Tabelle entspricht einer Reihe von Datenpunkten mit demselben Wert auf der X-Achse.

Columns:

  Spalte 0 Spalte 1 ... Spalte N
Zweck: Datenpunkte X Y-Werte der Serie 1 ... Werte der Reihe N Y
Datentyp: String, Zahl oder Datum/Datum/Uhrzeit String, Zahl oder Datum/Datum/Uhrzeit ... String, Zahl oder Datum/Datum/Uhrzeit
Rolle: Daten Daten ... Daten
Optionale Spaltenrollen:

–

 ...

Wenn Sie mehrere Reihen angeben möchten, geben Sie mindestens zwei Y-Achsenspalten und Y-Werte nur in einer Y-Spalte an:

X-Werte Y-Werte der Serie 1 Y-Werte der Serie 2
10 null 75
20 null 18
33 null 22
55 16 null
14 61 null
48 3 null

 

Konfigurationsoptionen

Name
aggregationTarget
So werden mehrere Datenauswahlen in Tooltipps zusammengefasst:
  • 'category': Ausgewählte Daten nach x-Wert gruppieren.
  • 'series': Ausgewählte Daten werden nach Reihen gruppiert.
  • 'auto': Die ausgewählten Daten werden nach x-Wert gruppiert, wenn alle Auswahlen denselben x-Wert haben, und andernfalls nach Reihe.
  • 'none': Es wird nur eine Kurzinfo pro Auswahl angezeigt.
aggregationTarget wird häufig zusammen mit selectionMode und tooltip.trigger verwendet. Beispiel: 
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
Typ: String
Standard: „auto“
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
Anmerkungen.boxStyle

In Diagrammen, die Annotationen unterstützen, steuert das annotations.boxStyle-Objekt die Darstellung der Felder, die Annotationen enthalten: 

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};

Diese Option wird derzeit für Flächen-, Balken-, Säulen-, Kombinations-, Linien- und Streudiagramme unterstützt. Es wird vom Anmerkungsdiagramm nicht unterstützt.

Type: Objekt
Standard: null
Anmerkungen.Datum
Für Diagramme, die Annotationen unterstützen, können Sie mit dem annotations.datum-Objekt die Auswahl von Google Charts für Annotationen überschreiben, die für einzelne Datenelemente (z. B. Werte, die mit jedem Balken in einem Balkendiagramm angezeigt werden) bereitgestellt werden. Du kannst die Farbe mit annotations.datum.stem.color, die Stammlänge mit annotations.datum.stem.length und den Stil mit annotations.datum.style steuern.
Type: Objekt
Standard: Farbe ist „schwarz“, Länge ist 12, Stil ist „Punkt“.
Anmerkungen.Domain
Für Diagramme, die Annotationen unterstützen, können Sie mit dem annotations.domain-Objekt die Auswahl von Google Charts für Anmerkungen überschreiben, die für eine Domain (die Hauptachse des Diagramms, z. B. die X-Achse in einem typischen Liniendiagramm) bereitgestellt werden. Du kannst die Farbe mit annotations.domain.stem.color, die Stammlänge mit annotations.domain.stem.length und den Stil mit annotations.domain.style steuern.
Type: Objekt
Standard: Farbe ist „schwarz“, Länge ist 5, Stil ist „Punkt“.
Anmerkungen.highContrast
Bei Diagrammen, die Annotationen unterstützen, können Sie mit dem booleschen Wert annotations.highContrast die von Google Charts ausgewählte Annotationsfarbe überschreiben. Standardmäßig ist annotations.highContrast „true“. Dadurch wird in Diagrammen eine Anmerkungsfarbe mit gutem Kontrast ausgewählt: helle Farben auf dunklem Hintergrund und dunkel bei hellem Hintergrund. Wenn Sie annotations.highContrast auf „false“ setzen und keine eigene Annotationsfarbe angeben, wird in Google Charts die Standardreihenfarbe für diese Annotation verwendet:
Typ: Boolesch
Standard: true
Anmerkungen.stem
Bei Diagrammen, die Annotationen unterstützen, können Sie mit dem Objekt annotations.stem die Auswahl von Google Charts für den Stammstil überschreiben. Sie können die Farbe mit annotations.stem.color und die Stammlänge mit annotations.stem.length steuern. Die Option hat keinen Einfluss auf Anmerkungen mit dem Stil 'line': Bei 'line'-Datumsannotationen ist die Wortlänge immer mit dem Text identisch. Bei 'line'-Domainannotationen erstreckt sich die Wortstammlänge auf das gesamte Diagramm.
Type: Objekt
Standard:schwarz
Anmerkungen.Stil
Bei Diagrammen, die Annotationen unterstützen, können Sie mit der Option annotations.style die Auswahl des Anmerkungstyps in Google Charts überschreiben. Es kann entweder 'line' oder 'point' sein.
Typ: String
Standard: 'point'
Anmerkungen.textStyle
In Diagrammen, die Annotationen unterstützen, steuert das annotations.textStyle-Objekt die Darstellung des Texts der Annotation: 
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};

Diese Option wird derzeit für Flächen-, Balken-, Säulen-, Kombinations-, Linien- und Streudiagramme unterstützt. Es wird im Anmerkungsdiagramm nicht unterstützt.

Type: Objekt
Standard: null
Achsentitel

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

  • 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ß
Diagramm.Titel

Bei Material-Diagrammen gibt diese Option den Titel an.

Typ: String
Standard: null
Diagramm.Untertitel

Bei Material-Diagrammen gibt diese Option den Untertitel an. Untertitel werden nur in Material-Charts unterstützt.

Typ: String
Standard: null
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
Fadenkreuz

Ein Objekt mit den crosshair-Eigenschaften für das Diagramm.

Type: Objekt
Standard: null
Fadenkreuz

Das Fadenkreuz als Farbe (z.B. „blau“) oder einem RGB-Wert (z.B. „#adf“).

Typ: String
Typ: Standard
Fadenkreuz

Ein Objekt, das die Fadenkreuz-Eigenschaften im Fokus enthält.
Beispiel: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

Type: Objekt
Standard: Standard
Fadenkreuz

Fadenkreuzdeckkraft. 0.0 ist vollständig transparent und 1.0 vollständig deckend.

Typ:Zahl
Standard: 1,0
Fadenkreuz

Das Fadenkreuz kann für vertikale Haare vertikal sein, für horizontale Haare nur horizontal, für herkömmliche Fadenkreuze beides.

Typ: String
Standard: „beide“
Fadenkreuz

Ein Objekt, das bei der Auswahl die Fadenkreuzeigenschaften enthält.
Beispiel: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

Type: Objekt
Standard: Standard
Fadenkreuz

Zeitpunkt der Anzeige von Fadenkreuzen: 'focus', 'selection' oder 'both'.

Typ: String
Standard: „beide“
CurveType

Steuert die Kurvenlinie, wenn die Linienbreite nicht null ist. folgende Arten von Werten sind möglich:

  • "none" – gerade Linien ohne Kurve
  • Funktion: Die Winkel der Linien werden geglättet.
Typ:String
Standard: „none“
Datentransparenz

Die Transparenz von Datenpunkten, wobei 1.0 vollständig deckend und 0.0 vollständig transparent ist. In Streu-, Histogramm-, Balken- und Spaltendiagrammen bezieht sich dies auf die sichtbaren Daten: Punkte im Streudiagramm und Rechtecke in den anderen. In Diagrammen, in denen bei der Auswahl von Daten ein Punkt erstellt wird, z. B. eines Linien- oder Flächendiagramms, bezieht sich dies auf die Kreise, die angezeigt werden, wenn der Mauszeiger darauf bewegt oder ausgewählt wird. Das Kombinationsdiagramm zeigt beide Verhaltensweisen. Diese Option hat keine Auswirkungen auf andere Diagramme. Informationen zum Ändern der Deckkraft einer Trendlinie finden Sie unter Trendliniendeckkraft.

Typ: Zahl
Standard: 1,0
interaktivität aktivieren

Gibt an, ob das Diagramm nutzerbasierte Ereignisse auslöst oder auf Nutzerinteraktionen reagiert. Bei „false“ wird im Diagramm kein „select“-Ereignis oder ein anderes interaktionsbasiertes Ereignis ausgelöst. Stattdessen werden Ready- oder Error-Ereignisse ausgelöst. Außerdem wird je nach Nutzereingabe kein Hover-Text angezeigt oder anderweitig geändert.

Typ: Boolesch
Standard: true
explorer

Mit der Option explorer können Nutzer schwenken und zoomen. explorer: {} bietet das Standardverhalten für Explorer, mit dem Nutzer horizontal und vertikal durch Ziehen schwenken und durch Zoomen heran- und herauszoomen können.

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

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

Type: Objekt
Standard: null
Explorer.actions

Der Google Charts-Explorer unterstützt drei Aktionen:

  • dragToPan: Durch Ziehen lässt sich das Diagramm horizontal und vertikal verschieben. Wenn Sie nur auf der horizontalen Achse schwenken möchten, verwenden Sie explorer: { axis: 'horizontal' }. Das Gleiche gilt für die vertikale Achse.
  • dragToZoom: Das Standardverhalten des Explorers ist das Heran- und Herauszoomen, wenn der Nutzer scrollt. Wenn explorer: { actions: ['dragToZoom', 'rightClickToReset'] } verwendet wird, wird dieser Bereich durch Ziehen an einem rechteckigen Bereich vergrößert. Wir empfehlen die Verwendung von rightClickToReset, wenn dragToZoom verwendet wird. Informationen zu Zoomanpassungen finden Sie 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.
Typ: Stringarray
Standard: ['dragToPan', 'rightClickToReset']
Explorer.axis

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' }. Ebenso ermöglicht explorer: { axis: 'vertical' } das ausschließliche Schwenken.

Typ: String
Standardeinstellung: Horizontal und vertikal schwenken
Explorer.keepInBounds

Standardmäßig können Nutzer schwenken, unabhängig davon, wo sich die Daten befinden. Verwenden Sie explorer: { keepInBounds: true }, um sicherzustellen, dass Nutzer das Diagramm nicht über das ursprüngliche Diagramm hinaus schwenken.

Typ: Boolesch
Standard: false
Explorer.maxZoomIn

Das Maximum, das der Explorer heranzoomen kann. Standardmäßig können Nutzer heranzoomen, sodass sie nur 25% der Originalansicht sehen. Wenn Sie explorer: { maxZoomIn: .5 } festlegen, können Nutzer nur weit genug heranzoomen, um die Hälfte der Originalansicht zu sehen.

Typ:Zahl
Standard:0,25
Explorer.maxZoomOut

Das Maximum, das der Explorer herauszoomen kann. Standardmäßig können Nutzer weit herauszoomen, sodass das Diagramm nur ein Viertel des verfügbaren Platzes einnimmt. Wenn Sie explorer: { maxZoomOut: 8 } festlegen, können Nutzer weit herauszoomen, sodass das Diagramm nur 1/8 des verfügbaren Platzes einnimmt.

Typ:Zahl
Standard: 4
Explorer.zoomDelta

Wenn Nutzer heran- oder herauszoomen, legt explorer.zoomDelta fest, um wie viel sie heranzoomen möchten. Je kleiner die Zahl, desto flüssiger und langsamer ist der Zoom.

Typ: Zahl
Standard: 1,5
Schriftgröße

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

Typ: Zahl
Standard: automatisch
Schriftname

Die Standardschriftart für den gesamten Text im Diagramm. Sie können dies mit Attributen für bestimmte Diagrammelemente überschreiben.

Typ: String
Standardeinstellung: „MongoDB“
forceIFrame

Zeichnet das Diagramm innerhalb eines Inline-Frames. Beachten Sie, dass diese Option im IE8 ignoriert wird. Alle IE8-Diagramme werden in iFrames gezeichnet.

Typ: Boolesch
Standard: false
HACHSE

Ein Objekt mit Mitgliedern zur Konfiguration verschiedener horizontaler Achsenelemente Zur Angabe von Attributen dieses Objekts können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt: 

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
Type: Objekt
Standard: null
hAxis.baseline

Der Ausgangswert für die horizontale Achse.

Typ:Zahl
Standard: automatisch
hAxis.baselineColor

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

Typ: Zahl
Standard: 'schwarz'
hAxis.direction

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

Typ:1 oder -1
Standard: 1
hAxis-Format

Ein Formatstring für Labels der numerischen Achse Dies ist eine Teilmenge des ICU-Mustersatzes. Für {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
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.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.units

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

Allgemeines Format:

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

Weitere Informationen finden Sie unter Datum und Uhrzeit.

Type: Objekt
Standard: null
hAxis.logScale

hAxis-Attribut, das die horizontale Achse zu einer logarithmischen Skala macht. Alle Werte müssen positiv sein. Für „yes“ den Wert „true“ festlegen.

Typ: Boolesch
Standard: false
hAxis.scaleType

hAxis-Eigenschaft, 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 und Nullwerte werden nicht dargestellt. Diese Option entspricht der Einstellung hAxis: { 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
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.ticks

Ersetzt die automatisch generierten X-Achsen-Ticks durch das angegebene Array. Jedes Element des Arrays muss entweder ein gültiger Tickwert (z. B. eine Zahl, ein Datum, ein Datum oder eine Uhrzeit) oder ein Objekt sein. Wenn es sich um ein Objekt handelt, sollte es die Eigenschaft 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:

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

Verschiebt den Maximalwert der horizontalen Achse auf den angegebenen Wert. Dies ist bei den meisten Diagrammen rechts. Wird ignoriert, wenn dieser Wert kleiner als der maximale x-Wert der Daten ist. hAxis.viewWindow.max überschreibt diese Property.

Typ:Zahl
Standard: automatisch
hAxis.minWert

Verschiebt den Mindestwert der horizontalen Achse auf den angegebenen Wert. In den meisten Diagrammen wird dieser Wert auf der linken Seite angezeigt. Wird ignoriert, wenn dieser Wert größer als der minimale x-Wert der Daten ist. hAxis.viewWindow.min überschreibt diese Property.

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 maximale horizontale Datenwert, der gerendert werden soll.

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

Typ:Zahl
Standard: automatisch
hAxis.viewWindow.Min

Der minimale horizontale Datenwert, der gerendert werden soll.

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

Typ:Zahl
Standard: automatisch
height

Höhe des Diagramms in Pixeln.

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

Ein Objekt mit Mitgliedern zur Konfiguration verschiedener Aspekte der Legende. Zur Angabe von Attributen dieses Objekts können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt: 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: Objekt
Standard: null
Legende.Ausrichtung

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

  • „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>}
Linienbreite

Linienbreite in Pixeln Verwenden Sie Null, um alle Linien auszublenden und nur die Punkte anzuzeigen.

Typ:Zahl
Standard: 0
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
Punktform

Die Form einzelner Datenelemente: Kreis, Dreieck, Quadrat, Diamant, Stern oder Polygon. Beispiele finden Sie in der Dokumentation zu Punkten.

Typ: String
Standardeinstellung: „Kreis“
Punktgröße

Durchmesser der Datenpunkte in Pixeln. Null verwenden, um alle Punkte auszublenden. Mit dem Attribut series können Sie Werte für einzelne Reihen überschreiben. Wenn Sie eine Trendlinie verwenden, wirkt sich diese Option auch auf die pointSize der Punkte aus, aus denen sie besteht. Dadurch ändert sich die sichtbare Breite der Trendlinie. Um dies zu vermeiden, können Sie es mit der Option trendlines.n.pointsize überschreiben.

Typ: Zahl
Standard: 7
Zugangspunkte

Legt fest, ob Punkte angezeigt werden. Legen Sie false fest, um alle Punkte auszublenden. Mit dem Attribut series können Sie Werte für einzelne Reihen überschreiben. Wenn Sie eine Trendlinie verwenden, wirkt sich die Option pointsVisible auf die Sichtbarkeit der Punkte in allen Trendlinien aus, sofern Sie sie nicht mit der Option trendlines.n.pointsVisible überschreiben.

Dies kann auch mit der Stilrolle in Form von "point {visible: true}" überschrieben werden.

Typ: Boolesch
Standard: true
Auswahlmodus

Wenn selectionMode auf 'multiple' gesetzt ist, können Nutzer mehrere Datenpunkte auswählen.

Typ: String
Standard: „einfach“
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.
  • lineWidth: Überschreibt den globalen lineWidth-Wert für diese Reihe.
  • pointShape: Überschreibt den globalen pointShape-Wert für diese Reihe.
  • pointSize: Überschreibt den globalen pointSize-Wert für diese Reihe.
  • pointsVisible: Überschreibt den globalen pointsVisible-Wert für diese Reihe.
  • 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.ignoreBounds

Durch die Einstellung true wird das Zeichnen von Kurzinfos außerhalb der Grenzen des Diagramms auf allen Seiten zugelassen.

Hinweis: Das gilt nur für HTML-Kurzinfos. Wenn diese Option mit SVG-Kurzinfos aktiviert ist, werden alle Überläufe außerhalb der Diagrammgrenzen abgeschnitten. Weitere Informationen finden Sie unter Kurzinfos anpassen.

Typ: Boolesch
Standard: false
tooltip.isHtml

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

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

Typ: Boolesch
Standard: false
tooltip.showColorCode

Wenn dies der Fall ist, werden in der Kurzinfo farbige Quadrate neben den Reiheninformationen angezeigt.

Typ: Boolesch
Standard: false
tooltip.textStyle

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

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

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.
  • „Auswahl“: Die Kurzinfo wird angezeigt, wenn der Nutzer das Element auswählt.
Typ: String
Standardeinstellung: „focus“
Trendlinien

Zeigt in den Diagrammen, die diese unterstützen, Trendlinien an. Standardmäßig werden lineare Trendlinien verwendet. Dies kann jedoch mit der Option trendlines.n.type angepasst werden.

Trendlinien werden pro Reihe angegeben, die meisten Optionen sehen also so aus: 

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
Type: Objekt
Standard: null
trendlines.n.farbe

Die Farbe der Trendlinie, angegeben entweder als englischer Farbname oder als Hexadezimalstring.

Typ: String
Standard: Standardfarbe für Reihen
trendlines.n.°

Für Trendlinien von type: 'polynomial' der Grad des Polynoms (2 für Quadrat, 3 für Kubik usw.). (Der Standardgrad kann sich in einem zukünftigen Release von Google Charts von 3 in 2 ändern.)

Typ:Zahl
Standard: 3
trendlines.n.labelInLegende

Wenn diese Option festgelegt ist, wird die Trendlinie in der Legende als String angezeigt.

Typ: String
Standard: null
trendlines.n.lineWidth (Trendlinien.n.lineWidth)

Die Linienbreite der Trendlinie in Pixeln.

Typ: Zahl
Standard: 2
trendlines.n.opacity

Die Transparenz der Trendlinie von 0,0 (transparent) bis 1,0 (undurchsichtig).

Typ:Zahl
Standard: 1,0
trendlines.n.pointSize

Trendlinien werden durch das Stempeln mehrerer Punkte im Diagramm gebildet. Mit dieser selten benötigten Option können Sie die Größe der Punkte anpassen. In der Regel ist die Option lineWidth der Trendlinie zu bevorzugen. Diese Option ist jedoch erforderlich, wenn Sie die globale Option pointSize verwenden und eine andere Punktgröße für Ihre Trendlinien wünschen.

Typ: Zahl
Standard: 1
trendlines.n.pointsSichtbar

Trendlinien werden durch das Stempeln mehrerer Punkte auf dem Diagramm erstellt. Die Option pointsVisible der Trendlinie bestimmt, ob die Punkte für eine bestimmte Trendlinie sichtbar sind.

Typ: Boolesch
Standard: true
trendlines.n.showR2

Gibt an, ob der Bestimmungskoeffizient in der Kurzinfo zur Legende oder Trendlinie angezeigt werden soll.

Typ: Boolesch
Standard: false
trendlines.n

Gibt an, ob die Trendlinien 'linear' (Standardeinstellung), 'exponential' oder 'polynomial' sind.

Typ: String
Standard: linear
trendlines.n.visibleInLegend

Gibt an, ob die Trendliniengleichung in der Legende erscheint. Er wird in der Kurzinfo zur Trendlinie angezeigt.

Typ: Boolesch
Standard: false
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.units

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

Allgemeines Format:

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

Weitere Informationen finden Sie unter Datum und Uhrzeit.

Type: Objekt
Standard: null
vAxis.minorGridlines

Ein Objekt mit Mitgliedern zur Konfiguration der kleinen Gitternetzlinien auf der vertikalen Achse, ähnlich wie bei der Option vAxis.gridlines.

Type: Objekt
Standard: null
vAxis.minorGridlines.color

Die Farbe der vertikalen Nebengitternetzlinien im Diagrammbereich. Gib einen gültigen HTML-Farbstring an.

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

Die Option MinderjährigerGridlines.count ist größtenteils veraltet, mit der Ausnahme, dass Gitternetzlinien deaktiviert werden, indem die Anzahl auf 0 gesetzt wird. Die Anzahl der Nebengitternetzlinien hängt vom Intervall zwischen den Hauptgitternetzlinien (siehe vAxis.gridlines.interval) und dem erforderlichen Mindestbereich ab (siehe vAxis.minorGridlines.minSpacing).

Typ: Zahl
Standard: 1
vAxis.minorGridlines.units

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

Allgemeines Format:

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

Weitere Informationen finden Sie unter Datum und Uhrzeit.

Type: Objekt
Standard: null
vAxis.logScale

Bei „true“ wird die vertikale Achse zu einer logarithmischen Skala. Hinweis: Alle Werte müssen positiv sein.

Typ: Boolesch
Standard: false
vAxis.scaleType

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 Punkte und Legendeneinträge. Ein Punkt entspricht einer Zelle in der Datentabelle und einem Legendeneintrag in einer Spalte (Zeilenindex ist null). 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 Punkte und Legendeneinträge. Ein Punkt entspricht einer Zelle in der Datentabelle und einem Legendeneintrag in einer Spalte (Zeilenindex ist null). 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.

Attribute: Zeile, Spalte
onmouseout

Wird ausgelöst, wenn der Nutzer die Maus von einer visuellen Entität wegbewegt Gibt die Zeilen- und Spaltenindexe des entsprechenden Datentabellenelements zurück.

Attribute:Zeile, Spalte
ready

Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden nach dem Zeichnen aufrufen möchten, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode 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.