Ü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:
var options = {
pieHole: 0.5,
pieSliceTextStyle: {
color: 'black',
},
legend: 'none'
};
<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 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: 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:
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: 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:
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:
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> }
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 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:
Typ: String
Standard: „percentage“
|
| pieSliceTextStyle |
Ein Objekt, das den Segmenttextstil angibt. Das Objekt hat folgendes Format: {color: <string>, fontName: <string>, fontSize: <number>}
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 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.
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> }
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 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:
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> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| tooltip.trigger |
Die Nutzerinteraktion, durch die die Kurzinfo angezeigt wird:
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 Return Type: Kein
|
getAction(actionID) |
Gibt das Kurzinfo-Aktionsobjekt mit dem angeforderten Rückgabetyp: Objekt
|
getBoundingBox(id) |
Gibt ein Objekt zurück, das den linken und oberen Rand sowie die Breite und Höhe des Diagrammelements
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):
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:
Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Objekt
|
getHAxisValue(xPosition, optional_axis_index) |
Gibt den horizontalen Datenwert bei Beispiel: 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.
Rückgabetyp:Array von Auswahlelementen
|
getVAxisValue(yPosition, optional_axis_index) |
Gibt den vertikalen Datenwert bei Beispiel: Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Zahl
|
getXLocation(dataValue, optional_axis_index) |
Gibt die X-Koordinate des Pixels von Beispiel: Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Zahl
|
getYLocation(dataValue, optional_axis_index) |
Gibt die Y-Koordinate des Pixels von Beispiel: Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Zahl
|
removeAction(actionID) |
Entfernt die Kurzinfo-Aktion mit dem angeforderten Rückgabetyp:
none |
setAction(action) |
Legt eine Kurzinfo-Aktion fest, die ausgeführt werden soll, wenn der Nutzer auf den Aktionstext klickt.
Die Methode
Alle Kurzinfo-Aktionen sollten vor dem Aufrufen der 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.
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 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 Properties:keine
|
Datenrichtlinie
Sämtlicher Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.