Visualisierung: Kreisdiagramm (Bild)

Wichtig: Der Bereich „Bilddiagramme“ von Google Chart Tools wurde am 20. April 2012 offiziell eingestellt. Das Programm funktioniert gemäß unserer Richtlinie zur Einstellung von Produkten und Diensten weiterhin.

  1. Overview
  2. Beispiel
  3. Loading
  4. Datenformat
  5. Konfigurationsoptionen
  6. Methoden
  7. Ereignisse
  8. Datenrichtlinie

Übersicht

Ein Kreisdiagramm, das mit der Google Charts API als Bild gerendert wird.

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:["imagepiechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',        11],
          ['Eat',         2],
          ['Commute',     2],
          ['Watch TV',    2],
          ['Sleep',       7]
        ]);

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

        chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Wird geladen

Der Paketname google.charts.load lautet "imagepiechart":

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

Der Klassenname der Visualisierung lautet google.visualization.ImagePieChart

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

Datenformat

Zwei Spalten. Die erste Spalte sollte ein String sein und das Segmentlabel enthalten. Die zweite Spalte sollte eine Zahl sein und den Segmentwert enthalten.

Konfigurationsoptionen

Sie können die folgenden Optionen als Teil des Objekts options angeben, das an die Methode draw() der Visualisierung übergeben wird.

Name Typ Standard Beschreibung
backgroundColor String #FFFFFF (Weiß) Die Hintergrundfarbe für das Diagramm im Farbformat der Chart API.
Farbe String Auto Gibt die Grundfarbe an, die für alle Reihen verwendet werden soll. Jede Reihe ist eine Abstufung der angegebenen Farbe. Farben werden im Farbformat der Chart API angegeben. Wird ignoriert, wenn colors angegeben ist.
Farben Array<string> Auto Damit können Sie jeder Datenreihe bestimmte Farben zuweisen. Farben werden im Farbformat der Chart API angegeben. Die Farbe i wird für die Datenspalte i verwendet und springt an den Anfang, wenn mehr Datenspalten als Farben vorhanden sind. Wenn Varianten einer einzelnen Farbe für alle Reihen zulässig sind, verwenden Sie stattdessen die Option color.
enableEvents boolean false Veranlasst, dass Diagramme vom Nutzer ausgelöste Ereignisse wie Klicks oder Mouseover auslösen. Wird nur für bestimmte Diagrammtypen unterstützt. Weitere Informationen finden Sie unten im Abschnitt Ereignisse.
height number Höhe des Containers Höhe des Diagramms in Pixeln.
is3D boolean false Wenn dieser Wert auf „true“ gesetzt ist, wird ein dreidimensionales Diagramm angezeigt.
Labels String „none“

Gegebenenfalls das Label, das für die einzelnen Segmente angezeigt werden soll Wählen Sie einen der folgenden Werte aus:

  • "none" (keine Labels)
  • „value“: Der Segmentwert wird als Beschriftung verwendet.
  • 'Name': Der Segmentname (der Spaltenname).
Legende String 'rechts' Die Position der Legende im Diagramm. Wählen Sie einen der folgenden Werte aus: „top“, „bottom“, „left“, „right“, „none“.
Titel String kein Titel Text, der über dem Diagramm angezeigt werden soll.
width number Breite des Containers Breite des Diagramms in Pixeln.

Methoden

Methode Rückgabetyp Beschreibung
draw(data, options) keine Zeichnet das Diagramm.

Ereignisse

Sie können sich registrieren, um die auf der Seite Allgemeine Bilddiagramm beschriebenen Ereignisse zu hören.

Datenrichtlinie

Weitere Informationen finden Sie in der Protokollierungsrichtlinie für die Chart API.