Visualisierung: Kreisdiagramm

Übersicht

Ein Kreisdiagramm, das im Browser mit SVG oder VML gerendert wird. Zeigt Kurzinfos an, wenn der Mauszeiger auf Segmente bewegt 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':['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-Kreisdiagramm erstellen

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

is3D ist standardmäßig auf false gesetzt, also wird hier explizit true festgelegt: 

<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>

Ringdiagramm erstellen

Ein Ringdiagramm ist ein Kreisdiagramm mit einem Loch in der Mitte. Sie können Ringdiagramme mit der Option pieHole erstellen:

Für die Option pieHole muss eine Zahl zwischen 0 und 1 festgelegt werden, die dem Verhältnis der Radien zwischen dem Loch und dem Diagramm entspricht. Zahlen zwischen 0,4 und 0,6 sehen in den meisten Diagrammen am besten aus. Werte gleich oder größer als 1 werden ignoriert und ein Wert von 0 schließt Ihr Piehole vollständig.

<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. In diesem Fall wird pieHole ignoriert.

Google Charts versucht, das Label so nahe wie möglich in der Mitte des Segmentes zu platzieren. Wenn Sie ein Ringdiagramm mit nur einem Kreissegment haben, fällt die Mitte des Kreissegments möglicherweise in das Ringloch. Ändern Sie in diesem Fall die Farbe des Labels:
Optionen
        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };
Vollständige HTML-Ansicht
<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 zeigt der linke Rand der ersten Scheibe bei Kreisdiagrammen gerade nach oben. Sie können dies mit der Option pieStartAngle ändern:

Hier drehen wir das Diagramm um 100 Grad im Uhrzeigersinn mit der Option pieStartAngle: 100. (Diese Option wird gewählt, weil durch diesen bestimmten Winkel zufällig 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>

Explodieren eines Stücks

Mit der Eigenschaft offset der Option slices können Sie Kreissegmente vom Rest des Diagramms trennen:

Zum Trennen eines Slice erstellen Sie ein slices-Objekt und weisen der entsprechenden Segmentnummer ein offset zwischen 0 und 1 zu. Im Folgenden weisen wir den Segmenten 4 (Gujarati), 12 (Marathi), 14 (Oriya) und 15 (Punjabi) zunehmend größere Offsets zu: 

<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 Sichtbarkeit von Segmenten

Sie können einen Wert als Grenzwert für ein Kreissegment festlegen, das einzeln gerendert wird. Dieser Wert entspricht einem Bruchteil des Diagramms, wobei das gesamte Diagramm den Wert 1 hat. Um diesen Schwellenwert als Prozentsatz des Ganzen festzulegen, teilen 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 unter diesem Grenzwert liegen, werden in einem einzelnen Segment vom Typ „Sonstige“ zusammengefasst und haben den Gesamtwert aller Segmente unter dem Grenzwert. 

    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 „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 stellt ein Segment dar.

Columns:

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

Konfigurationsoptionen

Name
backgroundColor

Die Hintergrundfarbe für den Hauptbereich des Diagramms. Dies kann entweder ein einfacher HTML-Farbstring wie 'red' oder '#00cc00' oder ein Objekt mit den folgenden Eigenschaften sein.

Typ:String oder Objekt
Standard: 'white'
backgroundColor.stroke

Die Farbe des Diagrammrahmens als HTML-Farbstring.

Typ: String
Standard: #666
backgroundColor.strokeWidth

Die Rahmenbreite in Pixeln.

Typ:Zahl
Standard: 0
backgroundColor.fill

Die Füllfarbe des Diagramms als HTML-Farbstring.

Typ: String
Standard: 'white'
chartArea

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

Typ:Objekt
Standard:null
chartArea.backgroundColor
Hintergrundfarbe des Diagrammbereichs. Ein String kann entweder ein hexadezimaler String (z.B. '#fdc') oder einem englischen Farbnamen. Wenn ein Objekt verwendet wird, können die folgenden Attribute angegeben werden:
  • stroke: die Farbe, angegeben als Hexadezimalstring oder als englischer Farbname.
  • strokeWidth: Zeichnet einen Rahmen um den Diagrammbereich mit der angegebenen Breite (und in der Farbe stroke).
Typ:String oder Objekt
Standard: 'white'
chartArea.left

Legt fest, wie weit das Diagramm von der linken Rahmenlinie entfernt ist.

Typ:Zahl oder String
Standard:automatisch
chartArea.top

Legt fest, wie weit das Diagramm vom oberen Rand entfernt ist.

Typ:Zahl oder String
Standard:automatisch
chartArea.width

Diagrammbereichbreite.

Typ:Zahl oder String
Standard:automatisch
chartArea.height

Höhe des Diagrammbereichs.

Typ:Zahl oder String
Standard:automatisch
Farben

Die Farben, die für die Diagrammelemente verwendet werden sollen. Ein Array mit Strings, wobei jedes Element ein HTML-Farbstring ist. Beispiel: colors:['red','#004411'].

Typ:String-Array
Standard:Standardfarben
enableInteractivity

Gibt an, ob im Diagramm nutzerbasierte Ereignisse ausgelöst oder auf Nutzerinteraktionen reagiert werden Bei „false“ gibt das Diagramm keine „select“- oder anderen interaktionsbasierten Ereignisse aus (aber wir werden Bereit- oder Fehlerereignisse auslösen) und kein Hovertext anzeigen und sich je nach Nutzereingabe nicht anderweitig ändern.

Typ: Boolesch
Standardeinstellung:true
fontSize

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

Typ:Zahl
Standard:automatisch
fontName

Die Standardschriftart für den gesamten Text im Diagramm. Sie können dies mithilfe von Properties für bestimmte Diagrammelemente überschreiben.

Typ: String
Standardeinstellung: 'Arial'
forceIFrame

Zeichnet das Diagramm in einem Inline-Frame. (Beachten Sie, dass diese Option in 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

Falls wahr, wird ein dreidimensionales Diagramm angezeigt.

Typ: Boolesch
Standard: false
Legende

Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Aspekte der Legende. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Typ:Objekt
Standard:null
legend.alignment

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

  • 'start' - Am Anfang des der Legende zugewiesenen Bereichs ausgerichtet.
  • "center" - Mittig in dem Bereich, der der Legende zugewiesen wurde.
  • 'end' - Am Ende des der Legende zugewiesenen Bereichs ausgerichtet.

Anfang, Mitte und Ende beziehen sich auf den Stil - vertikal oder horizontal - der Legende. In einer Legende „rechts“ befinden sich beispielsweise „start“ und „end“ oben bzw. unten. Bei einer Legende „oben“ befinden sich „start“ und „end“ links bzw. rechts neben dem Bereich.

Der Standardwert hängt von der Position der Legende ab. Für Legenden am unteren Rand ist der Standardwert „center“, andere Legenden auf „start“.

Typ: String
Standard:automatisch
legend.position

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

  • "bottom": zeigt die Legende unter dem Diagramm an.
  • "labeled": Zeichnet Linien, die die Segmente mit ihren Datenwerten verbinden.
  • 'left': Zeigt die Legende links im Diagramm an.
  • "none" (keine Legende)
  • „right“: Zeigt die Legende rechts im Diagramm an.
  • oben: Zeigt die Legende über dem Diagramm an.
Typ: String
Standard: „right“
legend.maxLines

Maximale Anzahl der Zeilen in der Legende. Geben Sie eine Zahl größer als 1 ein, um der Legende Linien hinzuzufügen. Hinweis: Die genaue Logik, mit der die tatsächliche Anzahl der gerenderten Zeilen ermittelt wird, ist noch im Wandel.

Diese Option funktioniert derzeit nur, wenn „legende.position“ den Wert „top“ hat.

Typ:Zahl
Standard: 1
legend.textStyle

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

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

Liegt der Wert zwischen 0 und 1, wird ein Ringdiagramm angezeigt. Das Loch hat einen Radius von number multipliziert mit dem Radius des Diagramms.

Typ:Zahl
Standard: 0
pieSliceBorderColor

Die Farbe der Kreislinien. Nur anwendbar, wenn das Diagramm zweidimensional ist.

Typ: String
Standard: 'white'
pieSliceText

Der Textinhalt, der im Segment angezeigt wird. folgende Arten von Werten sind möglich:

  • "percentage" - Der Prozentsatz der Segmentgröße bezogen auf die Gesamtsumme.
  • "value": quantitativer Wert des Segments
  • „label“ – der Name des Slice.
  • "none": Es wird kein Text angezeigt.
Typ: String
Standard: „percentage“
pieSliceTextStyle

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

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

Der Winkel in Grad, um den das Diagramm gedreht werden soll. Mit der Standardeinstellung 0 wird die linke Kante des ersten Segments direkt nach oben zentriert.

Typ:Zahl
Standard: 0
reverseCategories

Falls wahr, werden die Segmente gegen den Uhrzeigersinn gezeichnet. Standardmäßig wird im Uhrzeigersinn gezeichnet.

Typ: Boolesch
Standard: false
pieResidueSliceColor

Farbe für das Kombinationssegment, das alle Segmente unter sliceVisibilityThreshold enthält.

Typ: String
Standard: #ccc
pieResidueSliceLabel

Ein Label für das Kombinationssegment, das alle Segmente unter sliceVisibilityThreshold enthält.

Typ: String
Standard: „Sonstiges“
Segmente

Ein Array von -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 (z.B. {}). 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: wie weit das Segment vom Rest des Kreises getrennt werden soll, von 0,0 (überhaupt nicht) bis 1,0 (Radius des Kreises).
  • textStyle: Überschreibt den globalen pieSliceTextStyle für dieses Segment.

Sie können entweder ein Array von Objekten angeben, die jeweils für das Segment in der angegebenen Reihenfolge gelten, oder ein Objekt angeben, bei dem jedes untergeordnete Element über einen numerischen Schlüssel verfügt, der angibt, für welches Segment es gilt. Die folgenden beiden Deklarationen sind beispielsweise identisch und deklarieren das erste Segment als schwarz und das 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: {}
sliceVisibilityThreshold

Der Bruchwert des Kreises, unter dem ein Segment nicht einzeln angezeigt wird. Alle Segmente, die diesen Grenzwert nicht überschritten haben, werden in einem einzelnen Segment vom Typ "Sonstige" zusammengefasst, dessen Größe die Summe aller ihrer Größen ist. Standardmäßig werden Segmente mit weniger als einem halben Grad nicht einzeln angezeigt. 

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

Text, der über dem Diagramm angezeigt werden soll.

Typ: String
Standard: kein Titel
titleTextStyle

Ein Objekt, das den Textstil für den Titel 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.

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

Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Kurzinfo-Elemente. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: 

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

Wenn true festgelegt ist, können Kurzinfos auf allen Seiten außerhalb des Diagrammrahmens gezeichnet werden.

Hinweis: Dies gilt nur für HTML-Kurzinfos. Wenn dies mit SVG-Kurzinfos aktiviert ist, wird jeder Überlauf außerhalb der Diagrammgrenzen abgeschnitten. Weitere Informationen finden Sie unter Inhalt der Kurzinfo anpassen.

Typ: Boolesch
Standard: false
tooltip.isHtml

Wenn die Richtlinie auf „true“ gesetzt ist, werden HTML- und keine SVG-gerenderten Kurzinfos verwendet. Weitere Informationen finden Sie unter Inhalt der Kurzinfo anpassen.

Hinweis: Die Anpassung des HTML-Kurzinfoinhalts über die Spalte „Kurzinfo-Spaltendaten“ wird von der Visualisierung Blasendiagramm nicht unterstützt.

Typ: Boolesch
Standard: false
tooltip.showColorCode

Falls wahr, werden neben den Segmentinformationen in der Kurzinfo farbige Quadrate angezeigt.

Typ: Boolesch
Standard: false
tooltip.text

Welche Informationen angezeigt werden sollen, wenn der Nutzer den Mauszeiger auf ein Kreissegment bewegt. Folgende Werte werden unterstützt:

  • „Beide“: [Standardeinstellung] Es wird sowohl der absolute Wert des Segments als auch der Prozentsatz des Ganzen angezeigt.
  • „value“: Nur der absolute Wert des Segments wird angezeigt.
  • "percentage" - zeigt nur den Prozentsatz des Ganzen für das Segment an.
Typ: String
Standard:Beide
tooltip.textStyle

Ein Objekt, das den Textstil für die 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.

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

Die Nutzerinteraktion, durch die die Kurzinfo angezeigt wird:

  • „Fokus“: Die Kurzinfo wird angezeigt, wenn der Nutzer den Mauszeiger auf das Element bewegt.
  • "none": Die Kurzinfo wird nicht angezeigt.
  • „selection“: Die Kurzinfo wird angezeigt, wenn der Nutzer das Element auswählt.
Typ: String
Standard: „Fokus“
width

Breite des Diagramms in Pixeln.

Typ:Zahl
Standard:Breite des beinhaltenden Elements

Methoden

Methode
draw(data, options)

Zeichnet das Diagramm. Das Diagramm akzeptiert erst dann weitere Methodenaufrufe, nachdem das Ereignis ready ausgelöst wurde. Extended description.

Return Type: Kein
getAction(actionID)

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

Rückgabetyp: Objekt
getBoundingBox(id)

Gibt ein Objekt zurück, das den linken und oberen Rand sowie die Breite und Höhe des Diagrammelements id enthält. Das Format für id ist noch nicht dokumentiert. Dies sind die Rückgabewerte von Event-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 des fünften Keils eines Kreisdiagramms
cli.getBoundingBox('slice#4')
Begrenzungsrahmen der Diagrammdaten eines vertikalen Diagramms (z.B. Säulendiagramm):
cli.getBoundingBox('vAxis#0#gridline')
Begrenzungsrahmen der Diagrammdaten eines horizontalen Diagramms (z.B. Balken):
cli.getBoundingBox('hAxis#0#gridline')

Die Werte beziehen sich auf den Container des Diagramms. Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Rückgabetyp: Objekt
getChartAreaBoundingBox()

Gibt ein Objekt zurück, das den linken und oberen Rand sowie die Breite und Höhe des Diagramminhalts enthält (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 dies nach dem Zeichnen des Diagramms auf.

Rückgabetyp: Objekt
getChartLayoutInterface()

Gibt ein Objekt mit Informationen zur Platzierung des Diagramms und seiner Elemente auf dem Bildschirm zurück.

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

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

Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Rückgabetyp: Objekt
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 dies nach dem Zeichnen des Diagramms auf.

Rückgabetyp: Zahl
getImageURI()

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

Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Weitere Informationen finden Sie unter PNG-Diagramme drucken.

Rückgabetyp: String
getSelection()

Gibt ein Array der ausgewählten Diagrammentitäten zurück. Auswählbare Entitäten 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 entfernt. Kann negativ sein.

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

Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Rückgabetyp: Zahl
getXLocation(dataValue, optional_axis_index)

Gibt die X-Koordinate des Pixels von dataValue relativ zum linken Rand des Diagrammcontainers zurück.

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

Rufen Sie dies nach dem Zeichnen des Diagramms auf.

Rückgabetyp: Zahl
getYLocation(dataValue, optional_axis_index)

Gibt die Y-Koordinate des Pixels von dataValue relativ zum oberen Rand des Diagrammcontainers zurück.

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

Rufen Sie dies nach dem Zeichnen des Diagramms auf.

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

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

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

Rückgabetyp: none
setSelection()

Wählt die angegebenen Diagrammentitäten aus. Verwirft die vorherige Auswahl. Auswählbare Entitäten sind Segmente und Legendeneinträge. Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden. Extended description .

Return Type: Kein
clearChart()

Löscht das Diagramm und gibt alle zugewiesenen Ressourcen frei.

Return Type: Kein

Ereignisse

Weitere Informationen zur Verwendung dieser Ereignisse finden Sie unter Grundlegende Interaktivität, Ereignisse verarbeiten und Auslösen von Ereignissen.

Name
click

Wird ausgelöst, wenn der Nutzer auf das Diagramm klickt Damit können Sie feststellen, wann auf Titel, Datenelemente, Legendeneinträge, Achsen, Gitternetzlinien oder Labels geklickt wird.

Eigenschaften: targetID
error

Wird ausgelöst, wenn beim Versuch, das Diagramm zu rendern, ein Fehler auftritt.

Properties (Eigenschaften): id, message, message
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 (der Spaltenindex ist null).

Eigenschaften: Zeile, Spalte
onmouseout

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

Eigenschaften: 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 muss erst erfolgen, nachdem das Ereignis ausgelöst wurde.

Properties:keine
select

Wird ausgelöst, wenn der Nutzer auf eine visuelle Entität klickt. Wenn Sie wissen möchten, was ausgewählt wurde, rufen Sie getSelection() auf.

Properties:keine

Datenrichtlinie

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