Visualisierung: Kreisdiagramm (alte Version)

Eingestellte Funktionen

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

  1. Overview
  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 auf Segmente geklickt wird. Segmente werden beim Klicken auf Legendeneinträge animiert.

Von: Google

Beispiel

Im Visualization Playground selbst programmieren

<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 „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 sein und das Segmentlabel enthalten. 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:
  • Einen String mit einer von HTML unterstützten Farbe, z. B. „red“ oder „#00cc00“ oder
  • Die 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 Dicke des Diagrammrahmens in Pixeln angibt. Wenn kein Rahmen vorhanden ist, kann dieser Wert auf 0 festgelegt werden.
      Beispiel: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}.
borderColor String oder Objekt Standardfarbe Der Rahmen um Diagrammelemente. Mögliche Werte sind die der backgroundColor-Konfigurationsoption.
Farben Array von Strings oder Objekten Standardfarben

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

  • Bei is3D=false ist dies ein Array von HTML-Farben. Beispiel: color:['#00FF00','orange']
  • Bei is3D=true ist dies ein Array aus HTML-Farben oder Objekten dieses Typs: {color:face_color, darker:shade_color}, wobei color die Gesichtsfarbe des Elements und darker die Schattierungsfarbe ist. Wenn Sie jedoch eine HTML-Farbe für ein 3D-Objekt angeben, haben Gesicht und Schattierung die gleiche Farbe und der 3D-Effekt wird reduziert. Beispiel: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip boolean true Ist sie auf „true“ gesetzt, werden Kurzinfos angezeigt, wenn der Nutzer auf ein Segment klickt.
focusBorderColor String oder Objekt Standardfarbe Der Rahmen um Diagrammelemente, die im Fokus sind (mit der Maus darauf zeigen). Mögliche Werte sind die der backgroundColor-Konfigurationsoption.
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.
Legende String 'rechts' Position und Typ der Legende. Folgende sind möglich:
  • "right": rechts neben dem Diagramm
  • 'left' – links neben dem Diagramm
  • 'top' (über dem Diagramm)
  • 'bottom': unter dem Diagramm
  • "label" – Labels in der Nähe von Segmenten.
  • "none": Es wird keine Legende angezeigt.
legendBackgroundColor String oder Objekt Standardfarbe Die Hintergrundfarbe für den Legendenbereich des Diagramms. Mögliche Werte sind die der backgroundColor-Konfigurationsoption.
legendFontSize number automatisch Die Größe der Legendenschrift in Pixeln.
legendTextColor String oder Objekt Standardfarbe Die Schriftfarbe der Legende. Mögliche Werte sind die der backgroundColor-Konfigurationsoption.
pieJoinAngle number 0 Jedes Segment, das kleiner als dieser Winkel ist, wird in einem generischen Segment mit der Bezeichnung „Sonstige“ zusammengefasst.
pieMinimalAngle number 0

Scheiben, die kleiner als dieser Winkel sind, werden nicht im Kreisdiagramm gezeichnet. Allerdings wird ein Legendeneintrag dafür angezeigt. Die verbleibenden Segmente werden erweitert, um den Kreis in einem festen Proportion zu füllen. Hinweis: Dies kann die offensichtlichen Werte verzerren, insbesondere wenn diese Zahl groß ist, da eine Menge aus dem Kreis entfernt wird.

Zur Berechnung der Segmentgröße werden zuerst Winkel, die kleiner als pieJoinAngle sind, mit dem Segment "Other" verbunden. Anschließend werden alle Segmente gezeichnet, die größer als pieMinimalAngle sind.
Titel String kein Titel Text, der über dem Diagramm angezeigt werden soll.
titleColor String oder Objekt Standardfarbe Die Farbe für den Diagrammtitel. Mögliche Werte sind die der backgroundColor-Konfigurationsoption.
titleFontSize number automatisch Die Schriftgröße des Diagrammtitels in Pixeln.

tooltipFontSize		 number 11 Die Schriftgröße der Kurzinfo. Dieser Wert kann reduziert sein, wenn die Kurzinfo zu klein ist, um den Text in der angegebenen Schriftart aufzunehmen.
tooltipHeight
 number 60 Die Höhe der Kurzinfo in Pixeln. Die Höhe der Kurzinfo ist unveränderlich. Sie wird nie größer oder kleiner, um die Länge oder Schriftgröße des Textes anzupassen. Aber alles, was über 1/3 der Diagrammhöhe liegt, wird abgeschnitten.
tooltipWidth number 120 Die Breite der Kurzinfo in Pixeln. Die Breite der Kurzinfo ist festgelegt. Sie wird niemals vergrößert oder verkleinert und so an die Länge oder Schriftgröße des Textes angepasst. Aber alles, was größer als die Diagrammbreite ist, wird abgeschnitten.
width number Breite des Containers 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 gleichzeitig auswählen.
setSelection() keine Standardimplementierung von setSelection(), 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 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 erfolgt erst nach dem Auslösen des Ereignisses. Ohne
select

Wird ausgelöst, wenn der Nutzer auf ein Segment oder eine Legende klickt. Bei Auswahl eines Segments wird die entsprechende Zelle in der Datentabelle ausgewählt. Bei Auswahl einer Legende wird die entsprechende Spalte in der Datentabelle ausgewählt. Wenn Sie wissen möchten, was ausgewählt wurde, rufen Sie getSelection() auf.

Hinweis: Durch das Klicken auf ein Segment wird nicht zwischen dem Auswählen und dem Aufheben der Auswahl einer Zelle gewechselt. Wenn Sie auf ein Segment klicken, wird es immer ausgewählt. Wenn Sie jedoch auf einen Legendeneintrag klicken, können Sie die Zeile auswählen oder die Auswahl aufheben.

Ohne

Datenrichtlinie

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