Ü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:
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 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. 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: 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:
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 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:
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:
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> }
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 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:
Typ: String
Standard: 'percentage'
|
| PieSliceTextStyle |
Ein Objekt, das den Stil des Segmenttexts angibt. Das Objekt hat folgendes Format: {color: <string>, fontName: <string>, fontSize: <number>}
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 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.
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> }
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 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:
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> }
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:
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 Rückgabetyp: Keine
|
getAction(actionID) |
Gibt das Kurzinfo-Aktionsobjekt mit dem angeforderten Return Type: Objekt für die Rückgabe
|
getBoundingBox(id) |
Gibt ein Objekt zurück, das links, oben, breit und hoch des Diagrammelements
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:
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:
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 Beispiel: 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.
Rückgabetyp:Array von Auswahlelementen
|
getVAxisValue(yPosition, optional_axis_index) |
Gibt den vertikalen Datenwert bei Beispiel: Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde. Rückgabetyp: Nummer
|
getXLocation(dataValue, optional_axis_index) |
Gibt die Pixel-x-Koordinate von Beispiel: Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde. Rückgabetyp: Nummer
|
getYLocation(dataValue, optional_axis_index) |
Gibt die Pixel-y-Koordinate von Beispiel: Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde. Rückgabetyp: Nummer
|
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.
Für die Methode
Alle Kurzinfo-Aktionen sollten vor dem Aufruf der 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.
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 Eigenschaften: Keine
|
select |
Wird ausgelöst, wenn der Nutzer auf ein visuelles Element klickt. Rufen Sie Eigenschaften: Keine
|
Datenrichtlinie
Der gesamte Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.