Visualisierung: Streudiagramm

Übersicht

Bei Streudiagrammen werden Punkte in einem Diagramm dargestellt. Wenn der Nutzer den Mauszeiger auf die Punkte bewegt, werden Kurzinfos mit weiteren Informationen angezeigt.

Google-Streudiagramme werden je nach Browserfunktionen in SVG oder mit VML im Browser 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 stellen Streudiagramme die Elemente Ihres Datasets mit Kreisen dar. Mit der Option pointShape können Sie andere Formen festlegen. Eine Anleitung dazu finden Sie in der Dokumentation zum Anpassen von Punkten.

Wie die meisten anderen Google-Diagramme lassen sich auch Ereignisse animieren. Sie können einen Event-Listener für das erste ready-Ereignis hinzufügen und das Diagramm neu zeichnen, nachdem Sie die gewünschten Änderungen vorgenommen haben. Nach dem ersten ready-Ereignis können Sie auf das animationfinish-Ereignis warten, um den Vorgang zu wiederholen, was zu einer fortlaufenden Animation führt. Mit der Option animation wird gesteuert, wie das Zeichnen erfolgen soll: sofort (keine Animation) oder reibungslos und ob reibungslos wie schnell 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 Properties und Apps (z. B. Android-Apps) auf Google-Plattformen schaffen sollen. Wir nennen dies Material Design. Wir stellen Material-Versionen aller unserer Kerndiagramme bereit. Sie können diese gerne verwenden, wenn Sie ihnen gefallen.

Ein Material-Streudiagramm wird ähnlich erstellt wie das, was wir jetzt als „klassisches“ Streudiagramm bezeichnen. Sie laden die Google Visualization API (obwohl mit dem Paket 'scatter' anstelle des Pakets 'corechart'), definieren Sie Ihre Datentabelle und erstellen dann ein Objekt (aber der Klasse google.charts.Scatter statt google.visualization.ScatterChart).

Hinweis: Material Charts funktionieren in alten Versionen des Internet Explorer nicht. IE8 und frühere Versionen unterstützen das SVG-Format, das für Material Charts erforderlich ist, nicht.

Material-Streudiagramme haben gegenüber klassischen Streudiagrammen viele kleine Verbesserungen, darunter eine variable Deckkraft für die Lesbarkeit von sich überschneidenden Punkten, 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 Material Charts befinden sich in der Betaphase. Darstellung und Interaktivität sind weitgehend endgültig, aber viele der in klassischen Diagrammen verfügbaren Optionen sind dort noch nicht verfügbar. Eine Liste der Optionen, die noch nicht unterstützt werden, finden Sie in dieser Ausgabe.

Außerdem ist die Deklaration der Optionen noch nicht endgültig. Wenn Sie also eine der klassischen Optionen verwenden, müssen Sie sie in Materialoptionen umwandeln. Ersetzen Sie dazu diese Zeile:

chart.draw(data, options);


...durch diese Zeile:

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

Dual-Y-Diagramme

Manchmal möchten Sie vielleicht zwei Reihen in einem Streudiagramm mit zwei unabhängigen Y-Achsen darstellen: eine linke Achse für eine Reihe und eine rechte Achse für eine andere:

Beachten Sie, dass die beiden Y-Achsen nicht nur unterschiedlich beschriftet sind („Abschlussprüfungsnote“ im Vergleich zu „Studienstunden“), sondern sie jeweils eigene unabhängige Maßstäbe und Gitternetzlinien haben. Wenn Sie dieses Verhalten anpassen möchten, verwenden Sie die Optionen für vAxis.gridlines.

Im folgenden Code geben die Optionen axes und series zusammen die duale Y-Darstellung des Diagramms an. Mit der Option series wird angegeben, welche Achse jeweils verwendet werden soll ('final grade' und 'hours studied'; sie müssen keinen Bezug zu den Spaltennamen in der Datentabelle haben). Die Option axes macht dieses Diagramm dann zu einem Dual-Y-Diagramm, wobei die 'Final Exam Grade'-Achse auf der linken und die 'Hours Studied'-Achse auf der rechten Seite platziert wird. 

      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: Die oberen x-Achsen sind nur für Materialdiagramme verfügbar, also für solche mit Paket scatter.

Wenn Sie die Beschriftungen und den Titel der X-Achse oben und nicht unten im Diagramm platzieren möchten, können Sie dies in Materialdiagrammen 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 Paketname google.charts.load lautet "corechart" und der Klassenname der Visualisierung lautet google.visualization.ScatterChart. 

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

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

Bei Material-Streudiagrammen lautet der Paketname google.charts.load "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 in der Tabelle stellt eine Reihe von Datenpunkten mit demselben X-Achsenwert dar.

Columns:

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

–

 ...

Wenn Sie mehrere Reihen angeben möchten, geben Sie zwei oder mehr Spalten für die Y-Achse an und geben Sie nur Y-Werte in einer einzigen Y-Spalte an:

X-Werte Reihe 1 Y-Werte Reihe 2 Y-Werte
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 Kurzinfos zusammengefasst:
  • 'category': Gruppiert ausgewählte Daten nach X-Wert.
  • 'series': Gruppiert ausgewählte Daten nach Reihen.
  • 'auto': Gruppiert ausgewählte Daten nach dem x-Wert, wenn alle Auswahlen denselben x-Wert haben, andernfalls nach Reihen.
  • 'none': Pro Auswahl wird nur eine Kurzinfo 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
Standardeinstellung: „auto“
animation.duration

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

Typ:Zahl
Standard: 0
animation.easing

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

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

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

Typ: Boolesch
Standard falsch
annotations.boxStyle

Bei Diagrammen, die Anmerkungen unterstützen, steuert das annotations.boxStyle-Objekt die Darstellung der Felder, die die Anmerkungen umgeben: 

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 Annotationsdiagramm nicht unterstützt.

Typ:Objekt
Standard:null
annotations.datum
Bei Diagrammen, die Anmerkungen unterstützen, können Sie mit dem annotations.datum-Objekt die von Google Charts ausgewählte Option für Anmerkungen überschreiben, die für einzelne Datenelemente bereitgestellt werden, z. B. für Werte, die mit jedem Balken in einem Balkendiagramm angezeigt 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 festlegen.
Typ:Objekt
Standard: Farbe ist „black“, Länge: 12 mm, Stil ist „Point“.
annotations.domain
Bei Diagrammen, die Anmerkungen unterstützen, können Sie mit dem annotations.domain-Objekt die Auswahl von Google Charts für Anmerkungen überschreiben, die für eine Domain angegeben wurden (die Hauptachse des Diagramms, z. B. die X-Achse in einem typischen Liniendiagramm). Du kannst die Farbe mit annotations.domain.stem.color, die Stammlänge mit annotations.domain.stem.length und den Stil mit annotations.domain.style festlegen.
Typ:Objekt
Standard: Farbe ist „black“, Länge: 5, Stil ist „Point“.
annotations.highContrast
Bei Diagrammen, die Anmerkungen unterstützen, können Sie mit dem booleschen Wert annotations.highContrast die von Google Charts ausgewählte Anmerkungsfarbe überschreiben. Standardmäßig ist annotations.highContrast auf „true“ gesetzt, was dazu führt, dass Diagramme eine Anmerkungsfarbe mit gutem Kontrast auswählen: helle Farben auf dunklem Hintergrund und dunkel bei hellem Hintergrund. Wenn Sie annotations.highContrast auf „false“ setzen und keine eigene Anmerkungsfarbe angeben, verwendet Google Diagramme die Standardreihenfarbe für die Anmerkung:
Typ: Boolesch
Standardeinstellung:true
annotations.stem
Bei Diagrammen, die Anmerkungen unterstützen, können Sie mit dem Objekt annotations.stem die Auswahl von Google Charts für den Stammstil überschreiben. Du kannst die Farbe mit annotations.stem.color und die Stammlänge mit annotations.stem.length steuern. Die Option für die Stammlänge hat keine Auswirkungen auf Anmerkungen mit dem Stil 'line': Bei 'line'-Bezugsanmerkungen entspricht die Wortstammlänge immer der des Textes und bei 'line'-Domainanmerkungen erstreckt sich der Stamm über das gesamte Diagramm.
Typ:Objekt
Standard: Farbe ist "black"; Länge: 5 für Domainanmerkungen und 12 für Bezugshinweise.
annotations.style
Bei Diagrammen, die Anmerkungen unterstützen, können Sie mit der Option annotations.style die von Google Charts ausgewählte Anmerkungstyp überschreiben. Dies kann entweder 'line' oder 'point' sein.
Typ: String
Standard: „point“
annotations.textStyle
Bei Diagrammen, die Anmerkungen unterstützen, steuert das Objekt annotations.textStyle die Darstellung des Textes der Anmerkung: 
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 vom Annotationsdiagramm nicht unterstützt.

Typ:Objekt
Standard:null
axisTitlesPosition

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

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

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

Typ:String oder Objekt
Standard: 'white'
backgroundColor.stroke

Die Farbe des Diagrammrahmens als HTML-Farbstring.

Typ: String
Standard: #666
backgroundColor.strokeWidth

Die Rahmenbreite in Pixeln.

Typ:Zahl
Standard: 0
backgroundColor.fill

Die Füllfarbe des Diagramms als HTML-Farbstring.

Typ: String
Standard: 'white'
chart.title

Für Material-Diagramme gibt diese Option den Titel an.

Typ: String
Standard:null
chart.subtitle

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

Typ: String
Standard:null
chartArea

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

Typ:Objekt
Standard:null
chartArea.backgroundColor
Hintergrundfarbe des Diagrammbereichs. Ein String kann entweder ein hexadezimaler String (z.B. '#fdc') oder einem englischen Farbnamen. Wenn ein Objekt verwendet wird, können die folgenden Attribute angegeben werden:
  • stroke: die Farbe, angegeben als Hexadezimalstring oder als englischer Farbname.
  • strokeWidth: Zeichnet einen Rahmen um den Diagrammbereich mit der angegebenen Breite (und in der Farbe stroke).
Typ:String oder Objekt
Standard: 'white'
chartArea.left

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

Typ:Zahl oder String
Standard:automatisch
chartArea.top

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

Typ:Zahl oder String
Standard:automatisch
chartArea.width

Diagrammbereichbreite.

Typ:Zahl oder String
Standard:automatisch
chartArea.height

Höhe des Diagrammbereichs.

Typ:Zahl oder String
Standard:automatisch
Farben

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

Typ:String-Array
Standard:Standardfarben
Fadenkreuz

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

Typ:Objekt
Standard:null
crosshair.color

Das Fadenkreuz, ausgedrückt als Farbname (z.B. „blue“) oder einen RGB-Wert (z.B. „#adf“).

Typ: String
Typ:Standard
crosshair.focused

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

Typ:Objekt
Standard:Standard
crosshair.opacity

Die Deckkraft des Fadenkreuzes, wobei 0.0 vollständig transparent und 1.0 vollständig deckend ist.

Typ:Zahl
Standard: 1,0
crosshair.orientation

Die Ausrichtung des Fadenkreuzes, die für vertikale Haare „vertikal“, für horizontale Haare „horizontal“ oder für herkömmliches Fadenkreuz („beide“) sein kann.

Typ: String
Standard:Beide
crosshair.selected

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

Typ:Objekt
Standard:Standard
crosshair.trigger

Wann das Fadenkreuz angezeigt werden soll: auf 'focus', 'selection' oder 'both'.

Typ: String
Standard:Beide
curveType

Steuert die Kurve der Linien, wenn die Linienbreite ungleich null ist. folgende Arten von Werten sind möglich:

  • "none": Gerade Linien ohne Kurve.
  • Funktion – Die Winkel der Linie werden geglättet.
Typ:String
Standard: „keine“
dataOpacity

Die Transparenz von Datenpunkten, wobei 1.0 vollständig undurchsichtig und 0.0 vollständig transparent ist. In Streu-, Histogramm-, Balken- und Säulendiagrammen bezieht sich dies auf die sichtbaren Daten: Punkte im Streudiagramm und Rechtecke in den anderen. In Diagrammen, in denen bei der Datenauswahl ein Punkt erstellt wird, z. B. bei Linien- und Flächendiagrammen, bezieht sich dies auf die Kreise, die angezeigt werden, wenn Sie den Mauszeiger darauf bewegen oder eine Auswahl treffen. Das Kombinationsdiagramm weist beide Verhaltensweisen auf und diese Option hat keine Auswirkungen auf andere Diagramme. Informationen zum Ändern der Deckkraft einer Trendlinie finden Sie unter Deckkraft der Trendlinie .

Typ:Zahl
Standard: 1,0
enableInteractivity

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

Typ: Boolesch
Standardeinstellung:true
explorer

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

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

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

Typ:Objekt
Standard:null
explorer.actions

Der Google Charts-Explorer unterstützt drei Aktionen:

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

Typ: String
Standard: horizontales und vertikales Schwenken
explorer.keepInBounds

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

Typ: Boolesch
Standard: false
explorer.maxZoomIn

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

Typ:Zahl
Standard: 0,25
explorer.maxZoomOut

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

Typ:Zahl
Standard: 4
explorer.zoomDelta

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

Typ:Zahl
Standard: 1,5
fontSize

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

Typ:Zahl
Standard:automatisch
fontName

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

Typ: String
Standardeinstellung: 'Arial'
forceIFrame

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

Typ: Boolesch
Standard: false
hAxis

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

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

Die Referenz für die horizontale Achse.

Typ:Zahl
Standard:automatisch
hAxis.baselineColor

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

Typ:Zahl
Standard: 'black'
hAxis.direction

Die Richtung, in die 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 Beschriftungen numerischer Achsen. Dies ist eine Teilmenge des Mustersatzes der ICU . {format:'#,###%'} gibt beispielsweise die Werte „1.000 %“, „750 %“ und „50 %“ für die Werte 10, 7,5 und 0,5 an. Sie können auch Folgendes angeben:

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

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

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

Typ: String
Standard:automatisch
hAxis.gridlines

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

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

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

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

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

Typ:Zahl
Standard: -1
hAxis.gridlines.units

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

Das allgemeine Format ist:

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

Weitere Informationen finden Sie unter Datums- und Uhrzeitwerte.

Typ:Objekt
Standard:null
hAxis.minorGridlines

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

Typ:Objekt
Standard:null
hAxis.minorGridlines.color

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

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

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

Typ:Zahl
Standard: 1
hAxis.minorGridlines.units

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

Das allgemeine Format ist:

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

Weitere Informationen finden Sie unter Datums- und Uhrzeitwerte.

Typ:Objekt
Standard:null
hAxis.logScale

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

Typ: Boolesch
Standard: false
hAxis.scaleType

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

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

Position des Textes der horizontalen Achse im Verhältnis zum Diagrammbereich. Unterstützte Werte: „out“, „in“, „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.

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

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

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

Beispiele:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Typ:Array von Elementen
Standard:automatisch
hAxis.title

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

Typ: String
Standard:null
hAxis.titleTextStyle

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

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

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

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

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

Typ:Zahl
Standard:automatisch
hAxis.minValue

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

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

Gibt den Zuschneidebereich der horizontalen Achse an.

Typ:Objekt
Standard:null
hAxis.viewWindow.max

Der maximale horizontale Datenwert, der gerendert werden soll.

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

Typ:Zahl
Standard:automatisch
hAxis.viewWindow.min

Der minimale horizontale Datenwert, der gerendert werden soll.

Wird ignoriert, wenn hAxis.viewWindowMode „schön“ 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 zum Konfigurieren verschiedener Aspekte der Legende. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Typ:Objekt
Standard:null
legend.alignment

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

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

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

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

Typ: String
Standard:automatisch
legend.maxLines

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

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

Typ:Zahl
Standard: 1
legend.pageIndex

Ursprünglich ausgewählter nullbasierter Seitenindex der Legende.

Typ:Zahl
Standard: 0
legend.position

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

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

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

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

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

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

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

Typ:Zahl
Standard: 0
Ausrichtung

Die Ausrichtung des Diagramms. Wenn dieser Wert auf 'vertical' gesetzt ist, werden die Achsen des Diagramms so gedreht, dass ein Säulendiagramm beispielsweise zu einem Balkendiagramm wird und ein Flächendiagramm nach rechts statt nach oben wächst:

Typ: String
Standard:horizontal
pointShape

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

Typ: String
Standard:Kreis
pointSize

Durchmesser von Datenpunkten in Pixeln. Geben Sie 0 ein, 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 darin enthaltenen Punkte aus. Dadurch wird die angezeigte Breite der Trendlinie geändert. Um dies zu vermeiden, können Sie sie mit der Option trendlines.n.pointsize überschreiben.

Typ:Zahl
Standard: 7
pointsVisible

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 auf allen Trendlinien aus, sofern Sie sie nicht mit der Option trendlines.n.pointsVisible überschreiben.

Dies kann auch mit der Stilrolle im Format "point {visible: true}" überschrieben werden.

Typ: Boolesch
Standardeinstellung:true
selectionMode

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

Typ: String
Standard: „single“
Serien

Ein Array von -Objekten, die jeweils das Format der entsprechenden Reihe im Diagramm beschreiben. Geben Sie ein leeres Objekt {} an, um Standardwerte für eine Reihe zu verwenden. Wenn keine Reihe oder kein Wert angegeben ist, wird der globale Wert verwendet. Jedes Objekt unterstützt die folgenden Eigenschaften:

  • color – Farbe, die für diese Reihe verwendet werden soll. Geben Sie einen gültigen HTML-Farbstring an.
  • labelInLegend: Die Beschreibung der Reihe, die in der Diagrammlegende angezeigt wird.
  • lineWidth: Überschreibt den globalen Wert lineWidth für diese Reihe.
  • pointShape: Überschreibt den globalen Wert pointShape für diese Reihe.
  • pointSize: Überschreibt den globalen Wert pointSize für diese Reihe.
  • pointsVisible: Überschreibt den globalen Wert pointsVisible für diese Reihe.
  • visibleInLegend: ein boolescher Wert, wobei „wahr“ bedeutet, dass die Reihe einen Legendeneintrag haben sollte, „falsch“, dass dies nicht der Fall ist. Standardwert ist True.

Sie können entweder ein Array von Objekten angeben, die jeweils für die Reihe in der angegebenen Reihenfolge gelten, oder ein Objekt angeben, bei dem jedes untergeordnete Element einen numerischen Schlüssel hat, der angibt, für welche Reihe es gilt. Die folgenden beiden Deklarationen sind beispielsweise identisch: Die erste Reihe wird als schwarz und nicht in der Legende deklariert, während die vierte als rot und nicht in der Legende fehlt: 

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 Reihe vordefinierter Optionswerte, die im Zusammenspiel ein bestimmtes Diagrammverhalten oder einen bestimmten visuellen Effekt erzielen. Derzeit ist nur ein Design verfügbar:

  • „maximized“ (maximiert): Maximiert den Bereich des Diagramms und zeichnet die Legende und alle Beschriftungen innerhalb des Diagrammbereichs auf. Legt die folgenden Optionen fest: 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
Typ: String
Standard:null
Titel

Text, der über dem Diagramm angezeigt werden soll.

Typ: String
Standard: kein Titel
titlePosition

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

  • in: Titel in den Diagrammbereich zeichnen
  • out : Titel außerhalb des Diagrammbereichs zeichnen.
  • none: Den Titel weglassen
Typ: String
Standard: „out“
titleTextStyle

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

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

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

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

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

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

Wenn true festgelegt ist, können Kurzinfos auf allen Seiten außerhalb des Diagrammrahmens gezeichnet werden.

Hinweis: Dies gilt nur für HTML-Kurzinfos. Wenn dies mit SVG-Kurzinfos aktiviert ist, wird jeder Überlauf außerhalb der Diagrammgrenzen abgeschnitten. Weitere Informationen finden Sie unter Inhalt der Kurzinfo anpassen.

Typ: Boolesch
Standard: false
tooltip.isHtml

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

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

Typ: Boolesch
Standard: false
tooltip.showColorCode

Falls wahr, werden neben den Reiheninformationen in der Kurzinfo farbige Quadrate angezeigt.

Typ: Boolesch
Standard: false
tooltip.textStyle

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

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

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

Typ:Objekt
Standard: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

Die Nutzerinteraktion, durch die die Kurzinfo angezeigt wird:

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

Zeigt Trendlinien in den entsprechenden Diagrammen an. Standardmäßig werden lineare Trendlinien verwendet, dies kann jedoch mit der Option trendlines.n.type angepasst werden.

Trendlinien werden pro Serie angegeben, daher sehen die meisten Optionen so aus: 

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

Die Farbe der Trendlinie , ausgedrückt als englischer Farbname oder als hexadezimaler String.

Typ: String
Standard:Standardseriefarbe
trendlines.n.degree

Bei Trendlinien von type: 'polynomial' der Grad des Polynoms (2 für quadratisch, 3 für kubisch usw.). (Der Standardabschluss kann sich in einer zukünftigen Version von Google Charts von 3 zu 2 ändern.)

Typ:Zahl
Standard: 3
trendlines.n.labelInLegend

Wenn dies festgelegt ist, wird die Trendlinie in der Legende als dieser String angezeigt.

Typ: String
Standard:null
trendlines.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 erstellt, indem eine Reihe von Punkten in das Diagramm eingetragen wird. Mit dieser selten benötigten Option können Sie die Größe der Punkte anpassen. In der Regel ist die Option lineWidth der Trendlinie vorzuziehen. Sie benötigen diese Option jedoch, wenn Sie die globale Option pointSize verwenden und für die Trendlinien eine andere Punktgröße haben möchten.

Typ:Zahl
Standard: 1
trendlines.n.pointsVisible

Trendlinien werden erstellt, indem eine Reihe von Punkten in das Diagramm eingetragen wird. Mit der Option pointsVisible der Trendlinie legen Sie fest, ob die Punkte einer bestimmten Trendlinie sichtbar sind.

Typ: Boolesch
Standardeinstellung:true
trendlines.n.showR2

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

Typ: Boolesch
Standard: false
trendlines.n.type

Ob die Trendlinien 'linear' (Standardeinstellung), 'exponential' oder 'polynomial' sind.

Typ: String
Standardeinstellung:Linear
trendlines.n.visibleInLegend

Ob die Gleichung der Trendlinie in der Legende angezeigt wird. (erscheint in der Kurzinfo der Trendlinie.)

Typ: Boolesch
Standard: false
vAxis

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

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

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

Typ:Zahl
Standard:automatisch
vAxis.baselineColor

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

Typ:Zahl
Standard: 'black'
vAxis.direction

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

Typ:1 oder -1
Standard: 1
vAxis.format

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

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

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

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

Typ: String
Standard:automatisch
vAxis.gridlines

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

{color: '#333', minSpacing: 20}
Typ: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 der horizontalen Gitternetzlinien im Diagrammbereich. Wenn Sie eine positive Zahl für gridlines.count angeben, wird sie verwendet, um den minSpacing zwischen Gitternetzlinien zu berechnen. Sie können den Wert 1 angeben, um nur eine Gitternetzlinie zu zeichnen, oder 0, um keine Gitternetzlinien zu zeichnen. Geben Sie den Standardwert „-1“ an, um die Anzahl der Gitternetzlinien anhand anderer Optionen automatisch zu berechnen.

Typ:Zahl
Standard: -1
vAxis.gridlines.units

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

Das allgemeine Format ist:

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

Weitere Informationen finden Sie unter Datums- und Uhrzeitwerte.

Typ:Objekt
Standard:null
vAxis.minorGridlines

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

Typ:Objekt
Standard:null
vAxis.minorGridlines.color

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

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

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

Typ:Zahl
Standard: 1
vAxis.minorGridlines.units

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

Das allgemeine Format ist:

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

Weitere Informationen finden Sie unter Datums- und Uhrzeitwerte.

Typ:Objekt
Standard:null
vAxis.logScale

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

Typ: Boolesch
Standard: false
vAxis.scaleType

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

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

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

Typ: String
Standard: „out“
vAxis.textStyle

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.

Typ:Objekt
Standard: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

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

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

Beispiele:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Typ:Array von Elementen
Standard:automatisch
vAxis.title

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

Typ: String
Standard: kein Titel
vAxis.titleTextStyle

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

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

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

Typ:Objekt
Standard: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

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

Typ:Zahl
Standard:automatisch
vAxis.minValue

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

Typ:Zahl
Standard:null
vAxis.viewWindowMode

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

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

Gibt den Zuschneidebereich der vertikalen Achse an.

Typ:Objekt
Standard:null
vAxis.viewWindow.max

Der maximale vertikale Datenwert, der gerendert werden soll.

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

Typ:Zahl
Standard:automatisch
vAxis.viewWindow.min

Der minimale vertikale Datenwert, der gerendert werden soll.

Wird ignoriert, wenn vAxis.viewWindowMode „schön“ 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. Das Diagramm akzeptiert erst dann weitere Methodenaufrufe, nachdem das Ereignis ready ausgelöst wurde. Extended description.

Return Type: Kein
getAction(actionID)

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

Rückgabetyp: Objekt
getBoundingBox(id)

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

var cli = chart.getChartLayoutInterface();

Höhe des Diagrammbereichs
cli.getBoundingBox('chartarea').height
Breite des dritten Balkens in der ersten Reihe eines Balken- oder Säulendiagramms
cli.getBoundingBox('bar#0#2').width
Begrenzungsrahmen des fünften Keils eines Kreisdiagramms
cli.getBoundingBox('slice#4')
Begrenzungsrahmen der Diagrammdaten eines vertikalen Diagramms (z.B. Säulendiagramm):
cli.getBoundingBox('vAxis#0#gridline')
Begrenzungsrahmen der Diagrammdaten eines horizontalen Diagramms (z.B. Balken):
cli.getBoundingBox('hAxis#0#gridline')

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

Rückgabetyp: Objekt
getChartAreaBoundingBox()

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

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

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

Rückgabetyp: Objekt
getChartLayoutInterface()

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

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

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

Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Rückgabetyp: Objekt
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 dies nach dem Zeichnen des Diagramms auf.

Rückgabetyp: Zahl
getImageURI()

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

Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Weitere Informationen finden Sie unter PNG-Diagramme drucken.

Rückgabetyp: String
getSelection()

Gibt ein Array der ausgewählten Diagrammentitäten zurück. Auswählbare Entitäten sind Punkte und Legendeneinträge. Ein Punkt entspricht einer Zelle in der Datentabelle und ein Legendeneintrag zu einer Spalte (der 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 entfernt. Kann negativ sein.

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

Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Rückgabetyp: Zahl
getXLocation(dataValue, optional_axis_index)

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

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

Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Rückgabetyp: Zahl
getYLocation(dataValue, optional_axis_index)

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

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

Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Rückgabetyp: Zahl
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.

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

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

Rückgabetyp: none
setSelection()

Wählt die angegebenen Diagrammentitäten aus. Verwirft die vorherige Auswahl. Auswählbare Entitäten sind Punkte und Legendeneinträge. Ein Punkt entspricht einer Zelle in der Datentabelle und ein Legendeneintrag zu einer Spalte (der Zeilenindex ist null). Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden. Extended description .

Return Type: Kein
clearChart()

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

Return Type: Kein

Ereignisse

Weitere Informationen zur Verwendung dieser Ereignisse finden Sie unter Grundlegende Interaktivität, Ereignisse verarbeiten und Auslösen von Ereignissen.

Name
animationfinish

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

Properties:keine
click

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

Eigenschaften: targetID
error

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

Properties (Eigenschaften): id, message, message
legendpagination

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

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.

Eigenschaften: Zeile, Spalte
onmouseout

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

Eigenschaften: Zeile, Spalte
ready

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

Properties:keine
select

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

Properties:keine

Datenrichtlinie

Sämtlicher Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.