Visualisierung: Kreisdiagramm (Bild)

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

Übersicht

Ein Kreisdiagramm, das als Bild mit der Google Charts API 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 mit dem Segmentlabel sein. Die zweite Spalte sollte eine Zahl sein und den Segmentwert enthalten.

Konfigurationsoptionen

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

Name Typ Standard Beschreibung
backgroundColor String „#FFFFFF“ (weiß) Die Hintergrundfarbe für das Diagramm im Farbformat der Chart API.
Farbe String Automatisch Gibt eine 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> Automatisch Hiermit können Sie jeder Datenreihe bestimmte Farben zuweisen. Farben werden im Farbformat der Chart API angegeben. Farbe i wird für Datenspalte i verwendet und schließt sich an den Anfang, wenn es mehr Datenspalten als Farben gibt. Wenn Varianten einer einzigen Farbe für alle Reihen akzeptabel sind, verwenden Sie stattdessen die Option color.
enableEvents boolean false Veranlasst Diagramme, dass vom Nutzer ausgelöste Ereignisse wie Klicken oder Mouseover ausgelöst werden. Wird nur für bestimmte Diagrammtypen unterstützt. Weitere Informationen finden Sie unten im Abschnitt Ereignisse.
height Zahl Containerhöhe Höhe des Diagramms in Pixeln.
Is3D boolean false Wenn dieser Wert auf „true“ gesetzt ist, wird ein dreidimensionales Diagramm angezeigt.
labels String „Keine“

Gibt an, welches Label (falls vorhanden) für die einzelnen Segmente angezeigt werden soll. Wählen Sie einen der folgenden Werte aus:

  • "none": keine Labels
  • „value“: Der Segmentwert wird als Label verwendet.
  • „name“: Verwenden Sie den Segmentnamen (den Spaltennamen).
Legende String „right“ Die Position der Legende im Diagramm. Wählen Sie einen der folgenden Werte aus: 'top', 'bottom', 'left', 'right', 'none'.
title String kein Titel Text, der über dem Diagramm angezeigt werden soll.
width Zahl Containerbreite Breite des Diagramms in Pixeln.

Methoden

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

Ereignisse

Du kannst dich registrieren, um die auf der Seite Generische Bildgrafik beschriebenen Ereignisse zu hören.

Datenrichtlinie

Weitere Informationen finden Sie in der Chart API-Protokollierungsrichtlinie.