Visualisierung: Kreisdiagramm

Stay organized with collections Save and categorize content based on your preferences.

Übersicht

Ein Kreisdiagramm, das im Browser mit SVG oder VML gerendert wird. Zeigt Kurzinfos an, wenn Sie den Mauszeiger auf Segmente bewegen

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([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

3D-Kreisdiagramme erstellen

Wenn Sie die Option is3D auf true setzen, wird Ihr Kreisdiagramm so gezeichnet, als hätte es drei Dimensionen:

is3D ist standardmäßig false. Hier legen wir daher explizit true fest:

<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([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Donut-Diagramme erstellen

Ein Donut-Diagramm ist ein Kreisdiagramm mit einem Loch in der Mitte. Sie können Donutdiagramme mit der Option pieHole erstellen:

Die Option pieHole sollte auf eine Zahl zwischen 0 und 1 festgelegt werden, die dem Verhältnis von Radien zwischen dem Loch und dem Diagramm entspricht. Zahlen zwischen 0,4 und 0,6 eignen sich für die meisten Diagramme am besten. Werte, die größer oder gleich 1 sind, werden ignoriert und mit einem Wert von 0 wird Ihr Piehole vollständig geschlossen.

<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([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Sie können die Optionen pieHole und is3D nicht kombinieren. Andernfalls wird pieHole ignoriert.

Beachten Sie, dass Google Charts versuchen, das Label so nah wie möglich am Mittelpunkt des Segments zu platzieren. Bei einem Ringdiagramm mit nur einem Kreissegment kann die Mitte des Kreissegments in das Ringloch fallen. Ändern Sie in diesem Fall die Farbe des Labels:

Optionen
        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };
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 = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donut_single" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Kreisdiagramm drehen

Standardmäßig beginnen Kreisdiagramme mit dem linken Rand des ersten Abschnitts, der gerade nach oben zeigt. Sie können dies mit der Option pieStartAngle ändern:

Hier wird das Diagramm um 100 Grad im Uhrzeigersinn mit der Option pieStartAngle: 100 gedreht. (Das liegt daran, dass aus diesem speziellen Blickwinkel das Label „Italienisch“ in das Segment passt.)

<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([
          ['Language', 'Speakers (in millions)'],
          ['German',  5.85],
          ['French',  1.66],
          ['Italian', 0.316],
          ['Romansh', 0.0791]
        ]);

      var options = {
        legend: 'none',
        pieSliceText: 'label',
        title: 'Swiss Language Use (100 degree rotation)',
        pieStartAngle: 100,
      };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Segment teilen

Mit der Property offset der Option slices können Sie Kreisdiagramme vom Rest des Diagramms trennen:

Wenn Sie ein Segment teilen möchten, erstellen Sie ein slices-Objekt und weisen Sie ihm die entsprechende offset-Segmentnummer zwischen 0 und 1 zu. Die Schichten 4 (Gujarati), 12 (Marathi), 14 (Oriya) und 15 (Punjabi) werden immer größer.

<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([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Segmente entfernen

Wenn Sie ein Segment weglassen möchten, ändern Sie die Farbe in 'transparent':

Außerdem haben wir pieStartAngle verwendet, um das Diagramm um 135 Grad zu drehen, pieSliceText, um den Text aus den Segmenten zu entfernen, und tooltip.trigger, um Kurzinfos zu deaktivieren:

<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([
          ['Pac Man', 'Percentage'],
          ['', 75],
          ['', 25]
        ]);

        var options = {
          legend: 'none',
          pieSliceText: 'none',
          pieStartAngle: 135,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'yellow' },
            1: { color: 'transparent' }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pacman'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="pacman" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Grenzwert für die Segmentsichtbarkeit

Sie können einen Wert als Grenzwert für ein einzelnes Kreissegment festlegen. Dieser Wert entspricht einem Bruchteil des Diagramms, wobei das gesamte Diagramm den Wert 1 hat. Um diesen Grenzwert als Prozentsatz des Ganzen festzulegen, dividieren Sie den gewünschten Prozentsatz durch 100.Bei einem Grenzwert von 20 % wäre der Wert 0, 2.

sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.

Alle Segmente, die kleiner als dieser Grenzwert sind, werden in einem einzelnen „Sonstige“-Segment zusammengefasst, das den kombinierten Wert aller Segmente unter dem Grenzwert hat.

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Pizza');
      data.addColumn('number', 'Populartiy');
      data.addRows([
        ['Pepperoni', 33],
        ['Hawaiian', 26],
        ['Mushroom', 22],
        ['Sausage', 10], // Below limit.
        ['Anchovies', 9] // Below limit.
      ]);

      var options = {
        title: 'Popularity of Types of Pizza',
        sliceVisibilityThreshold: .2
      };

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

Wird geladen

Der Paketname von google.charts.load lautet "corechart".

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

Der Klassenname der Visualisierung lautet google.visualization.PieChart.

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

Datenformat

Zeilen: Jede Zeile in der Tabelle entspricht einem Segment.

Columns:

  Spalte 0 Spalte 1 ... Spalte N (optional)
Zweck: Segment-Labels Segmentwerte ... Optionale Rollen
Datentyp: String Zahl ...
Rolle: Domain Daten ...
Optionale Spaltenrollen: ...

Konfigurationsoptionen

Name
backgroundColor

Die Hintergrundfarbe für den Hauptbereich des Diagramms. Kann ein einfacher HTML-Farbstring sein, z. B. 'red' oder '#00cc00', oder ein Objekt mit den folgenden Eigenschaften.

Typ:String oder Objekt
Standard:Weiß
backgroundColor.Strike

Die Farbe des Diagrammrahmens als HTML-Farbstring.

Typ: String
Standard: „#666“
backgroundColor.strichBreite

Die Rahmenbreite in Pixeln.

Typ:Zahl
Standard: 0
backgroundColor.fill

Die Füllfarbe des Diagramms als HTML-Farbstring.

Typ: String
Standard:Weiß
Diagrammbereich

Ein Objekt mit Mitgliedern zum Konfigurieren der Platzierung und Größe des Diagrammbereichs (wo 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 % ist ein Prozentsatz. Beispiel: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type: Objekt
Standard: null
Diagrammfläche.Hintergrundfarbe
Hintergrundfarbe des Diagrammbereichs. Wenn ein String verwendet wird, kann es sich entweder um einen Hexadezimalstring handeln (z.B. „#fdc“) oder ein englischer Farbname. Wenn ein Objekt verwendet wird, können die folgenden Attribute angegeben werden:
  • stroke: Die Farbe, angegeben als Hexadezimalstring oder englische Farbbezeichnung.
  • strokeWidth: zeichnet, sofern angegeben, einen Rahmen um den Diagrammbereich der angegebenen Breite (und in der Farbe stroke).
Typ:String oder Objekt
Standard:Weiß
Diagrammfläche links

Gibt an, wie weit das Diagramm vom linken Rand gezeichnet werden soll.

Typ: Zahl oder String
Standard: automatisch
ChartArea.Oben

Gibt an, wie weit das Diagramm vom oberen Rand aus gezeichnet werden soll.

Typ:Zahl oder String
Standard: automatisch
Diagrammfläche.width

Breite des Diagrammbereichs.

Typ:Zahl oder String
Standard: automatisch
Diagrammfläche.height

Höhe des Diagrammbereichs.

Typ:Zahl oder String
Standard: automatisch
Farben

Die für die Diagrammelemente zu verwendenden Farben. Ein Array von Strings, wobei jedes Element ein HTML-Farbstring ist, zum Beispiel colors:['red','#004411'].

Typ: Stringarray
Standard:Standardfarben
interaktivität aktivieren

Gibt an, ob das Diagramm nutzerbasierte Ereignisse auslöst oder auf Nutzerinteraktionen reagiert. Bei „false“ wird im Diagramm kein „select“-Ereignis oder ein anderes interaktionsbasiertes Ereignis ausgelöst. Stattdessen werden Ready- oder Error-Ereignisse ausgelöst. Außerdem wird je nach Nutzereingabe kein Hover-Text angezeigt oder anderweitig geändert.

Typ: Boolesch
Standard: true
Schriftgröße

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

Typ:Zahl
Standard: automatisch
Schriftname

Die Standardschriftart für den gesamten Text im Diagramm. Sie können dies mit Attributen für bestimmte Diagrammelemente überschreiben.

Typ: String
Standardeinstellung: „MongoDB“
forceIFrame

Zeichnet das Diagramm innerhalb eines Inline-Frames. Beachten Sie, dass diese Option im IE8 ignoriert wird. Alle IE8-Diagramme werden in iFrames gezeichnet.

Typ: Boolesch
Standard: false
height

Höhe des Diagramms in Pixeln.

Typ: Zahl
Standard: Höhe des beinhaltenden Elements
Is3D

Bei „true“ wird ein dreidimensionales Diagramm angezeigt.

Typ: Boolesch
Standard: false
Legende

Ein Objekt mit Mitgliedern zur Konfiguration verschiedener Aspekte der Legende. Zur Angabe von Attributen dieses Objekts können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: Objekt
Standard: null
Legende.Ausrichtung

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

  • „start“: Auf den Anfang der Fläche ausgerichtet, die für die Legende zugewiesen ist.
  • „center“ – zentriert im Bereich, der der Legende zugewiesen ist
  • 'Ende': Ausgerichtet am Ende des Bereichs, der der Legende zugewiesen ist.

Anfang, Mittelpunkt und Ende sind relativ zum Stil der Legende (vertikal oder horizontal). In der Legende „Rechts“ befinden sich „Start“ und „Ende“ oben bzw. unten. Bei einer Legende „Oben“ befinden sich „Start“ bzw. „Ende“ am linken bzw. rechten Rand des Bereichs.

Der Standardwert hängt von der Position der Legende ab. Für Legenden des Typs "Unten" lautet die Standardeinstellung "Mitte", andere Legenden standardmäßig "Anfang".

Typ: String
Standard: automatisch
Legende.Position

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

  • 'bottom': zeigt die Legende unter dem Diagramm an.
  • „labeled“ – zeichnet Linien, die Segmente mit ihren Datenwerten verbinden.
  • „Left“: Zeigt die Legende links im Diagramm an
  • „Keine“: Es wird keine Legende angezeigt.
  • „right“: Die Legende rechts im Diagramm wird angezeigt.
  • „top“: Zeigt die Legende über dem Diagramm an.
Typ: String
Standardeinstellung: „right“
Legende.maxLines

Maximale Anzahl von Zeilen in der Legende. Legen Sie eine Zahl größer als eins fest, um der Legende Zeilen hinzuzufügen. Hinweis: Die genaue Logik zum Ermitteln der tatsächlichen Anzahl der gerenderten Zeilen ist noch in der Entwicklung.

Diese Option funktioniert derzeit nur, wenn „legend“ für „position“ festgelegt ist.

Typ:Zahl
Standard: 1
Legende.textStyle

Ein Objekt, das den Legendentextstil 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.

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

Wenn der Wert zwischen 0 und 1 liegt, wird ein Ringdiagramm angezeigt. Das Loch mit einem Radius ist gleich number × der Radius des Diagramms.

Typ: Zahl
Standard: 0
KreisSliceBorderColor

Die Farbe der Schnittlinien. Gilt nur, wenn das Diagramm zweidimensional ist.

Typ: String
Standard:Weiß
PieSlice-Text

Der Inhalt des im Segment angezeigten Texts. folgende Arten von Werten sind möglich:

  • 'percentage' [Prozent] - Der Prozentsatz der Segmentgröße aus der Gesamtsumme.
  • 'Wert': Der quantitative Wert des Segments.
  • Label: der Name des Segments.
  • „none“: Es wird kein Text angezeigt.
Typ: String
Standard: 'percentage'
PieSliceTextStyle

Ein Objekt, das den Stil des Segmenttexts angibt. Das Objekt hat folgendes Format:

{color: <string>, fontName: <string>, fontSize: <number>}

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

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

Der Winkel in Grad, um den das Diagramm gedreht werden soll. Der Standardwert von 0 richtet den linken Rand des ersten Abschnitts direkt nach oben.

Typ:Zahl
Standard: 0
umgekehrte Kategorien

Bei „true“ werden Segmente gegen den Uhrzeigersinn gezeichnet. Standardmäßig wird im Uhrzeigersinn gezeichnet.

Typ: Boolesch
Standard: false
Farbe für Kreiskuchenmuster

Farbe für das kombinierte Segment, das alle Segmente unter sliceViewableThreshold.

Typ: String
Standard: '#Courier'
KreisResidueSliceLabel

Ein Label für das kombinierte Segment, das alle Segmente unter sliceViewableThreshold enthält.

Typ: String
Standard: „Sonstiges“
Segmente

Ein Array mit Objekten, die jeweils das Format des entsprechenden Kreissegments beschreiben. Wenn Sie Standardwerte für ein Segment verwenden möchten, geben Sie ein leeres Objekt an. {}). Wenn kein Segment oder Wert angegeben ist, wird der globale Wert verwendet. Jedes Objekt unterstützt die folgenden Attribute:

  • color: Die für dieses Segment zu verwendende Farbe. Geben Sie einen gültigen HTML-Farbstring an.
  • offset: gibt an, wie weit das Segment vom Rest des Kreisdiagramms entfernt werden soll – von 0,0 (überhaupt) bis 1,0 (Radius).
  • textStyle: überschreibt die globale pieSliceTextStyle für dieses Segment.

Sie können entweder ein Array mit Objekten angeben, von denen jedes auf das Segment in der angegebenen Reihenfolge angewendet wird, oder ein Objekt angeben, bei dem jeder untergeordnete Schlüssel einen numerischen Schlüssel hat, der angibt, auf welches Segment es angewendet wird. Die folgenden beiden Deklarationen sind beispielsweise identisch und deklarieren das erste Segment als schwarz und die vierte als rot:

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
      
Typ:Array von Objekten oder Objekt mit verschachtelten Objekten
Standard: {}
für SwSichtbarkeitsschwelle

Der Bruchwert des Kuchens, unterhalb dessen ein Segment nicht einzeln angezeigt wird. Alle Segmente, die diesen Grenzwert nicht erreicht haben, werden zu einem einzelnen Segment vom Typ „Andere“ zusammengefasst, dessen Größe die Summe aller ihrer Größen ist. Standardmäßig werden keine Daten angezeigt, die kleiner als ein halber Grad sind.

// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
      
Typ: Zahl
Standard: 500°-Grad (0,5/360, 1/720 oder 0,0014)
title

Text, der über dem Diagramm angezeigt werden soll.

Typ: String
Standard:kein Titel
Titeltextstil

Ein Objekt, das den Stil des Titeltexts 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.

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

Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Kurzinfo-Elemente. Zur Angabe von Attributen dieses Objekts können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt:

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

Durch die Einstellung true wird das Zeichnen von Kurzinfos außerhalb der Grenzen des Diagramms auf allen Seiten zugelassen.

Hinweis:Das gilt nur für HTML-Kurzinfos. Wenn diese Option mit SVG-Kurzinfos aktiviert ist, werden alle Überläufe außerhalb der Diagrammgrenzen abgeschnitten. Weitere Informationen finden Sie unter Kurzinfos anpassen.

Typ: Boolesch
Standard: false
tooltip.isHtml

Wenn die Richtlinie auf „true“ gesetzt ist, werden HTML-gerenderte statt SVG-Kurzinfos verwendet. Weitere Informationen finden Sie unter Kurzinfos anpassen.

Hinweis:Die Anpassung der HTML-Kurzinfos über die Datenrolle der Kurzinfo-Spalte wird von der Visualisierung des Blasendiagramms nicht unterstützt.

Typ: Boolesch
Standard: false
tooltip.showColorCode

Wenn „true“ festgelegt ist, werden farbige Quadrate neben den Segmentinformationen in der Kurzinfo angezeigt.

Typ: Boolesch
Standard: false
Kurzinfo.Text

Welche Informationen zu sehen sind, wenn der Nutzer den Mauszeiger auf ein Kreissegment bewegt Die folgenden Werte werden unterstützt:

  • ' Beide' - [Standard] Zeigt sowohl den absoluten Wert des Segments als auch den Prozentsatz des Ganzen an.
  • „value“: Es wird nur der absolute Wert des Segments angezeigt.
  • 'percentage' [percentage]: Es wird nur der Prozentsatz des gesamten Bereichs angezeigt.
Typ: String
Standard: „beide“
tooltip.textStyle

Ein Objekt, das den Textstil der 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.

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

Die Nutzerinteraktion, die dazu führt, dass die Kurzinfo angezeigt wird:

  • „Fokus“: Die Kurzinfo wird angezeigt, wenn der Nutzer den Mauszeiger auf das Element bewegt.
  • „Keine“: Die Kurzinfo wird nicht angezeigt.
  • „Auswahl“: Die Kurzinfo wird angezeigt, wenn der Nutzer das Element auswählt.
Typ: String
Standardeinstellung: „focus“
width

Breite des Diagramms in Pixeln.

Typ:Zahl
Standard: Breite des beinhaltenden Elements

Methoden

Methode
draw(data, options)

Zeichnet das Diagramm. Im Diagramm sind weitere Methodenaufrufe erst möglich, nachdem das Ereignis ready ausgelöst wurde. Extended description

Rückgabetyp: Keine
getAction(actionID)

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

Return Type: Objekt für die Rückgabe
getBoundingBox(id)

Gibt ein Objekt zurück, das links, oben, breit und hoch des Diagrammelements id ist. Das Format für id ist noch nicht dokumentiert. Es sind die Rückgabewerte von Ereignis-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 im fünften Keil eines Kreisdiagramms
cli.getBoundingBox('slice#4')
Begrenzungsrahmen der Diagrammdaten eines vertikalen Diagramms (z.B. eines Spaltendiagramms):
cli.getBoundingBox('vAxis#0#gridline')
Begrenzungsrahmen der Diagrammdaten eines horizontalen Diagramms (z.B. Balkendiagramms):
cli.getBoundingBox('hAxis#0#gridline')

Die Werte beziehen sich auf den Container des Diagramms. Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde.

Return Type: Objekt für die Rückgabe
getChartAreaBoundingBox()

Gibt ein Objekt zurück, das links, oben, breit und hoch des Diagramminhalts ist, d.h. 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 diese Methode auf, nachdem das Diagramm gezeichnet wurde.

Return Type: Objekt für die Rückgabe
getChartLayoutInterface()

Gibt ein Objekt zurück, das Informationen zur Platzierung des Diagramms und seiner Elemente auf dem Bildschirm enthält.

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

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

Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde.

Return Type: Objekt für die Rückgabe
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 diese Methode auf, nachdem das Diagramm gezeichnet wurde.

Rückgabetyp: Nummer
getImageURI()

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

Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde.

Weitere Informationen finden Sie unter PNG-Diagramme drucken.

Rückgabetyp: String
getSelection()

Gibt ein Array der ausgewählten Diagrammentitäten zurück. Auswählbare Elemente sind Segmente und Legendeneinträge. 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. Kann negativ sein.

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

Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde.

Rückgabetyp: Nummer
getXLocation(dataValue, optional_axis_index)

Gibt die Pixel-x-Koordinate von dataValue relativ zum linken Rand des Containers des Diagramms zurück.

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

Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde.

Rückgabetyp: Nummer
getYLocation(dataValue, optional_axis_index)

Gibt die Pixel-y-Koordinate von dataValue relativ zum oberen Rand des Containers des Diagramms zurück.

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

Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde.

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

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

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

Rückgabetyp: none
setSelection()

Die angegebenen Diagrammentitäten werden ausgewählt. Die vorherige Auswahl wird abgebrochen. Auswählbare Elemente sind Segmente und Legendeneinträge. Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden. Extended description.

Rückgabetyp: Keine
clearChart()

Löscht das Diagramm und gibt alle zugehörigen Ressourcen frei.

Rückgabetyp: Keine

Ereignisse

Weitere Informationen zur Verwendung dieser Ereignisse finden Sie unter Grundlegende Interaktivität, Ereignisse verwalten und Auslösende Ereignisse.

Name
click

Wird ausgelöst, wenn der Nutzer in das Diagramm klickt Kann verwendet werden, um zu erkennen, wann auf den Titel, Datenelemente, Legendeneinträge, Achsen, Gitternetzlinien oder Labels geklickt wird.

Eigenschaften: targetID
error

Wird ausgelöst, wenn beim Rendern des Diagramms ein Fehler auftritt

Eigenschaften: ID, Nachricht
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. Ein Segment- oder Legendeneintrag entspricht einer Zeile in der Datentabelle (Spaltenindex ist null).

Attribute: Zeile, Spalte
onmouseout

Wird ausgelöst, wenn der Nutzer die Maus von einer visuellen Entität wegbewegt Gibt die Zeilen- und Spaltenindexe des entsprechenden Datentabellenelements zurück. Ein Segment- oder Legendeneintrag entspricht einer Zeile in der Datentabelle (Spaltenindex ist null).

Attribute: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.

Eigenschaften: Keine
select

Wird ausgelöst, wenn der Nutzer auf ein visuelles Element klickt. Rufen Sie getSelection() auf, um zu erfahren, was ausgewählt wurde.

Eigenschaften:Keine

Datenrichtlinie

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