Visualisierung: Kreisdiagramm (alte Version)

Verworfen

Diese Visualisierung wurde durch eine neue Version ersetzt. Verwenden Sie stattdessen diese. Informationen zur einfachen Migration finden Sie auf der Seite Versionshinweise.

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

Übersicht

Ein Kreisdiagramm, das im Browser mit SVG oder VML gerendert wird. Zeigt Tipps an, wenn Sie auf Segmente klicken. Animiert Segmente, wenn auf Legendeneinträge geklickt wird.

Von: Google

Beispiel

Selbst programmieren auf dem Visualization Playground

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["piechart"]});
      google.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.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Wird geladen

Der Paketname von google.load lautet "piechart"

  google.load("visualization", "1", {packages: ["piechart"]});

Der Klassenname der Visualisierung lautet google.visualization.PieChart 

  var visualization = new google.visualization.PieChart(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

Name Typ Standard Beschreibung
backgroundColor String oder Objekt Standardfarbe Die Hintergrundfarbe für den Hauptbereich des Diagramms. Eine der folgenden Optionen:
  • Ein String mit einer von HTML unterstützten Farbe, z. B. „red“ oder „#00cc00“ oder
  • Eine Beschreibung eines n-Objekts mit den folgenden Eigenschaften:
    • stroke: Ein HTML-Farbstring, der die Rahmenfarbe des Diagramms beschreibt.
    • fill: Ein HTML-Farbstring, der die Hintergrundfarbe des Diagramms beschreibt.
    • strokeSize: Eine Zahl, die die Stärke des Diagrammrahmens in Pixeln beschreibt. Wenn kein Rahmen vorhanden ist, kann dieser Wert auf 0 gesetzt werden.
      Beispiel: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}.
Rahmenfarbe String oder Objekt Standardfarbe Der Rahmen um Diagrammelemente. Mögliche Werte sind die Werte der Konfigurationsoption backgroundColor.
Farben Array von Strings oder Objekten Standardfarben

Ein Array von Farben, wobei jedes Element die Farbe einer Reihe angibt. Sie sollten für jede Datenreihe ein Arrayelement angeben.

  • Wenn is3D=false, ist dies ein Array von HTML-Farben. Beispiel: color:['#00FF00','orange']
  • Bei is3D=true ist dies ein Array mit HTML-Farben oder Objekten dieses Typs: {color:face_color, darker:shade_color}, wobei color die Gesichtsfarbe des Elements und darker die Schattierungsfarbe ist. Wenn du jedoch eine HTML-Farbe für ein 3D-Objekt angibst, haben Gesicht und Schattierung dieselbe Farbe und der 3D-Effekt wird reduziert. Beispiel: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
Kurzinfo aktivieren boolean true Ist sie auf „true“ gesetzt, werden Kurzinfos angezeigt, wenn der Nutzer auf ein Segment klickt.
Fokusrahmenfarbe String oder Objekt Standardfarbe Der Rahmen um Diagrammelemente, die gerade im Fokus sind (mit der Maus zeigen). Mögliche Werte sind die Werte der Konfigurationsoption backgroundColor.
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.
Legende String „right“ Position und Typ der Legende. Folgende sind möglich:
  • „right“: rechts neben dem Diagramm
  • „Links“ – Links neben dem Diagramm
  • 'Oben': Oberhalb des Diagramms.
  • 'bottom' – unter dem Diagramm.
  • „label“ – Labels in der Nähe von Segmenten.
  • „Keine“: Es wird keine Legende angezeigt.
LegendeHintergrundfarbe String oder Objekt Standardfarbe Die Hintergrundfarbe für den Legendenbereich des Diagramms. Mögliche Werte sind die Werte der Konfigurationsoption backgroundColor.
LegendeSchriftgröße Zahl automatisch Die Größe der Legendenschrift in Pixeln.
LegendeTextfarbe String oder Objekt Standardfarbe Die Textfarbe der Legende. Mögliche Werte sind die Werte der Konfigurationsoption backgroundColor.
piejoinAngle Zahl 0 Alle Segmente, die kleiner als dieser Winkel sind, werden in einem generischen Segment mit der Bezeichnung „Sonstiges“ zusammengefasst.
PieMinimalAngle Zahl 0

Kleinere Segmente werden nicht im Kreisdiagramm gezeichnet, erhalten aber trotzdem einen Legendeneintrag. Die verbleibenden Segmente werden auf eine feste Größe erweitert. Hinweis: Dies kann die sichtbaren Werte verzerren, insbesondere bei einer hohen Anzahl, da eine Menge aus dem Kreis entfernt wird.

Um die Größe der Segmente zu berechnen, werden die ersten Winkel kleiner als pieJoinAngle mit dem Segment „Andere“ verknüpft. Dann werden alle Segmente über pieMinimalAngle gezeichnet.
title String kein Titel Text, der über dem Diagramm angezeigt werden soll.
Titelfarbe String oder Objekt Standardfarbe Die Farbe für den Diagrammtitel. Mögliche Werte sind die Werte der Konfigurationsoption backgroundColor.
Titelschriftgröße Zahl automatisch Die Schriftgröße für den Diagrammtitel in Pixeln.

tooltipFontSize		 Zahl 11 Die Schriftgröße des Kurzinfotexts. Dieser Wert kann reduziert werden, wenn die Kurzinfo zu klein ist, um den Text in der angegebenen Schriftart zu speichern.
tooltipHöhe
 Zahl 60 Höhe der Kurzinfo in Pixel. Die Höhe der Kurzinfo ist festgelegt und wird nicht an die Länge oder Schriftgröße des Textes angepasst. Aber alles, was größer als 1/3 der Diagrammhöhe ist, wird zugeschnitten.
tooltipBreite Zahl 120 Die Breite der Kurzinfo in Pixel. Die Breite der Kurzinfo ist unveränderlich und wird nie an die Länge oder Schriftgröße des Textes angepasst. Alles, was größer als das Diagramm ist, wird zugeschnitten.
width Zahl Containerbreite Breite des Diagramms in Pixeln.

Methoden

Methode Rückgabetyp Beschreibung
draw(data, options) keine Zeichnet das Diagramm.
getSelection() Array von Auswahlelementen Standardimplementierung von getSelection() Ausgewählte Elemente sind Zeilen- und Zellenelemente. Der Nutzer kann mehrere Zeilen und/oder eine einzelne Zelle auswählen.
setSelection() keine Standardmäßige setSelection()-Implementierung, unterstützt jedoch die Auswahl mehrerer Zeilen und/oder einer Zelle. Behandelt jeden Auswahleintrag als Zeilen- oder Zellenauswahl.

Ereignisse

Name Beschreibung Attribute
onmouseover Wird ausgelöst, wenn der Nutzer die Maus über ein Segment bewegt und die Zeilen- und Spaltenindexe der entsprechenden Zelle übergibt. Zeile, Spalte
onmouseout Wird ausgelöst, wenn der Nutzer die Maus von einem Segment wegbewegt und die Zeilen- und Spaltenindexe der entsprechenden Zelle übergibt. 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. –
select

Wird ausgelöst, wenn der Nutzer auf ein Segment oder eine Legende klickt Wenn ein Segment ausgewählt ist, wird die entsprechende Zelle in der Datentabelle ausgewählt. Ist eine Legende ausgewählt, wird auch die entsprechende Spalte in der Datentabelle ausgewählt. Rufen Sie getSelection() auf, um zu erfahren, was ausgewählt wurde.

Hinweis: Durch Klicken auf ein Segment wird nicht automatisch zwischen Zellen gewechselt. Wenn Sie auf ein Segment klicken, wird es immer ausgewählt. Wenn Sie auf einen Legendeneintrag klicken, können Sie zwischen der Auswahl und dem Aufheben der Auswahl der Zeile wechseln.

–

Datenrichtlinie

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