Présentation
Un graphique à secteurs affiché dans le navigateur à l'aide de SVG ou de VML Affiche des info-bulles lorsque vous pointez sur des tranches.
Exemple
<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>
Créer un graphique à secteurs en 3D
Si vous définissez l'option is3D sur true, votre graphique à secteurs sera dessiné comme s'il avait trois dimensions:
is3D est false par défaut. Ici, nous le définissons donc explicitement sur true:
<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>
Créer un graphique en anneau
Un donut est un graphique à secteurs avec un trou au centre. Vous pouvez créer des graphiques en anneau avec l'option pieHole :
L'option pieHole doit être définie sur un nombre compris entre 0 et 1, correspondant au ratio de rayons entre le trou et le graphique. Les chiffres compris entre 0,4 et 0,6 sont les plus adaptés à la plupart des graphiques.
Les valeurs supérieures ou égales à 1 seront ignorées et la valeur 0 fermera complètement votre trou.
<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>
Vous ne pouvez pas combiner les options pieHole et is3D. Si vous le faites, pieHole sera ignoré.
Notez que Google Charts tente de placer le libellé le plus près possible du centre de la tranche. Si vous avez un graphique en anneau avec une seule tranche, le centre de la tranche peut tomber dans le trou du donut. Dans ce cas, modifiez la couleur du libellé:
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>
Rotation d'un graphique à secteurs
Par défaut, les graphiques à secteurs commencent avec le bord gauche de la première tranche pointant vers le haut. Vous pouvez modifier ce paramètre à l'aide de l'option pieStartAngle :
Ici, nous faisons pivoter le graphique de 100 degrés vers la droite avec une option de pieStartAngle: 100. (Ce choix est dû au fait que l'étiquette "italienne" se trouve dans la tranche.
<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>
Explosion d'une tranche
Vous pouvez séparer les secteurs du reste du graphique avec la propriété offset de l'option slices:
Pour séparer une tranche, créez un objet slices et attribuez-lui un offset compris entre 0 et 1. Ci-dessous, nous attribuons des décalages progressivement plus grands aux tranches 4 (Gujarati), 12 (marathi), 14 (oriya) et 15 (pendjabi):
<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>
Retirer des secteurs
Pour omettre une tranche, remplacez la couleur par 'transparent' :
Nous avons également utilisé pieStartAngle pour faire pivoter le graphique à 135 degrés, pieSliceText pour supprimer le texte des tranches et tooltip.trigger pour désactiver les info-bulles:
<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>
Seuil de visibilité des secteurs
Vous pouvez définir une valeur comme seuil pour un secteur à afficher individuellement. Cette valeur correspond à une fraction du graphique (la valeur entière du graphique étant 1). Pour définir ce seuil sous forme de pourcentage de l'ensemble, divisez le pourcentage souhaité par 100 (pour un seuil de 20 %, la valeur est de 0,2).
sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.
Toutes les tranches inférieures à ce seuil seront combinées en une seule tranche "Autre" et auront la valeur combinée de toutes les tranches inférieures au seuil.
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);
}
Chargement...
Le nom du package google.charts.load est "corechart".
google.charts.load("current", {packages: ["corechart"]});
Le nom de classe de la visualisation est google.visualization.PieChart.
var visualization = new google.visualization.PieChart(container);
Format des données
Lignes:chaque ligne du tableau représente une tranche.
Columns:
| Colonne 0 | Colonne 1 | … | Colonne N (facultatif) | |
|---|---|---|---|---|
| Objectif : | Libellés de secteurs | Valeurs des secteurs | … | Rôles facultatifs |
| Type de données: | chaîne | number (nombre) | … | |
| Rôle : | domaine | données | … | |
| Rôles de colonne facultatifs : | Aucune note | Aucune note | … |
Options de configuration
| Nom | |
|---|---|
| backgroundColor |
Couleur d'arrière-plan de la zone principale du graphique. Il peut s'agir d'une simple chaîne de couleur HTML, par exemple Type : chaîne ou objet
Par défaut : "blanc"
|
| backgroundColor.stroke |
Couleur de la bordure du graphique, sous forme de chaîne de couleur HTML. Type : chaîne
Par défaut : "#666"
|
| backgroundColor.strokeWidth |
Largeur de la bordure, en pixels. Type:nombre
Par défaut:0
|
| backgroundColor.fill |
Couleur de remplissage du graphique, sous forme de chaîne de couleur HTML. Type:chaîne
Par défaut : "blanc"
|
| zone du graphique |
Objet avec des membres permettant de configurer l'emplacement et la taille de la zone du graphique (à l'endroit où le graphique est dessiné, à l'exclusion de l'axe et des légendes) Deux formats sont acceptés: un nombre, ou un nombre suivi du pourcentage. Un nombre simple est une valeur en pixels ; un nombre suivi de % est un pourcentage. Exemple : Type : objet
Par défaut : null
|
| chartArea.backgroundColor |
Couleur d'arrière-plan de la zone de graphique. Lorsqu'une chaîne est utilisée, il peut s'agir d'une chaîne hexadécimale (par exemple, "#fdc") ou un nom de couleur anglais. Lorsqu'un objet est utilisé, les propriétés suivantes peuvent être fournies:
Type:chaîne ou objet
Par défaut : "blanc"
|
| chartArea.gauche |
La distance à laquelle vous souhaitez dessiner le graphique à partir de la bordure de gauche Type : nombre ou chaîne
Par défaut:auto
|
| chartArea.top |
La distance à laquelle vous souhaitez dessiner le graphique à partir de la bordure supérieure. Type : nombre ou chaîne
Par défaut : auto
|
| chartArea.width |
Largeur de la zone du graphique. Type : nombre ou chaîne
Par défaut:auto
|
| chartArea.height |
Hauteur de la zone de graphique Type : nombre ou chaîne
Par défaut : auto
|
| couleurs |
Couleurs à utiliser pour les éléments du graphique. Tableau de chaînes, où chaque élément est une chaîne de couleur HTML (par exemple, Type:tableau de chaînes
Par défaut : couleurs par défaut
|
| ActiverInteractivité |
Indique si le graphique génère des événements utilisateur ou réagit aux interactions des utilisateurs. Si la valeur est "false", le graphique ne génère pas de "sélection" ni d'autres événements basés sur les interactions (mais lancera des événements prêts ou d'erreur). Il n'affichera pas de texte au passage de la souris ni ne changera d'une autre manière selon l'entrée utilisateur. Type : booléen
Par défaut:true
|
| Taille de police |
Taille de police par défaut, en pixels, de tout le texte du graphique. Vous pouvez remplacer ce paramètre en utilisant des propriétés pour des éléments de graphique spécifiques. Type : nombre
Par défaut:automatique
|
| Nom de la police |
Police par défaut pour tout le texte du graphique. Vous pouvez remplacer ce paramètre en utilisant des propriétés pour des éléments de graphique spécifiques. Type:chaîne
Par défaut : "Arial"
|
| Forcer le cadre iFrame |
Dessine le graphique dans un cadre intégré. (Notez que dans IE8, cette option est ignorée. Tous les graphiques IE8 sont dessinés dans des cadres iFrame.) Type:booléen
Par défaut : false
|
| hauteur |
Hauteur du graphique, en pixels. Type:nombre
Par défaut : hauteur de l'élément conteneur.
|
| is3D |
Si la valeur est "true", affiche un graphique en trois dimensions. Type : booléen
Par défaut : false
|
| légende |
Objet avec des membres permettant de configurer divers aspects de la légende. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme indiqué ci-dessous: {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type:objet
Par défaut:null
|
| légende.alignement |
Alignement de la légende. Les possibilités suivantes s'offrent à vous :
Le début, le centre et la fin se rapportent au style (vertical ou horizontal) de la légende. Par exemple, dans une légende "à droite", "start" et "end" sont respectivement en haut et en bas. Pour une légende "top", "start" et "end" sont respectivement situés à gauche et à droite de la zone. La valeur par défaut dépend de la position de la légende. Pour les légendes de bas de page, la valeur par défaut est "center". Les autres légendes sont définies par défaut sur "start". Type:chaîne
Par défaut : automatique
|
| légende.position |
Position de la légende. Les possibilités suivantes s'offrent à vous :
Type:chaîne
Par défaut : "right"
|
| légende.maxLines |
Nombre maximal de lignes dans la légende. Définissez ce nombre sur un nombre supérieur à un pour ajouter des lignes à votre légende. Remarque: La logique exacte utilisée pour déterminer le nombre réel de lignes à afficher est toujours en flux. Cette option ne fonctionne actuellement que lorsque légende.position est "haut". Type : nombre
Par défaut:1
|
| légende.texteStyle |
Objet spécifiant le style de légende. L'objet a le format suivant:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Le Type : objet
Par défaut :
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| Pile Hole |
Si cette valeur est comprise entre 0 et 1, affiche un graphique en anneau. Le trou présente un rayon égal à Type:nombre
Par défaut : 0
|
| Couleur de bordure de tarte |
Couleur des bordures des tranches. Uniquement applicable lorsque le graphique est bidimensionnel. Type:chaîne
Par défaut : "blanc"
|
| SecteurSlice |
Contenu du texte affiché sur la tranche. Les possibilités suivantes s'offrent à vous :
Type : chaîne
Par défaut : 'percentage'
|
| Style de secteurs de secteurs |
Objet spécifiant le style de texte de la tranche. L'objet a le format suivant: {color: <string>, fontName: <string>, fontSize: <number>}
Le Type:objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| AnglededébutSecteur |
Angle, en degrés, qui servira à faire pivoter le graphique. Par défaut, Type : nombre
Par défaut :
0 |
| catégories inversées |
Si la valeur est "true", les tranches sont dessinées dans le sens inverse des aiguilles d'une montre. Par défaut, il est dessiné dans le sens horaire. Type : booléen
Par défaut : false
|
| Couleur de tarte aux résidus |
Couleur de la tranche de combinaison qui contient toutes les tranches sous sliceVisibilityThreshold. Type : chaîne
Par défaut : "#ccc"
|
| SecteurResidueSliceLabel |
Libellé pour la tranche de combinaison qui contient toutes les tranches en dessous de sliceVisibilityThreshold. Type : chaîne
Par défaut : "Autre"
|
| tranches |
Tableau d'objets, chacun décrivant le format de la tranche correspondante dans le graphique. Pour utiliser des valeurs par défaut pour une tranche, spécifiez un objet vide (par exemple,
Vous pouvez spécifier un tableau d'objets, chacun s'appliquant à la tranche de l'ordre spécifié, ou spécifier un objet où chaque enfant possède une clé numérique indiquant la tranche à laquelle il s'applique. Par exemple, les deux déclarations suivantes sont identiques et déclarent la première tranche comme noire et la quatrième comme rouge:
slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
Type : tableau d'objets (objets avec objets imbriqués)
Par défaut:{}
|
| Seuil de visibilité |
Valeur fractionnelle du graphique, en dessous de laquelle une tranche ne s'affiche pas individuellement. Toutes les tranches qui n'ont pas atteint ce seuil seront combinées en une seule tranche "Autre", dont la taille correspond à la somme de toutes leurs tailles. Par défaut, les tranches de moins d'un demi-degré ne s'affichent pas individuellement.
// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
Type:nombre
Par défaut:demi-degré (0,5/360, 1/720 ou ,0014)
|
| title |
Texte à afficher au-dessus du graphique. Type:chaîne
Par défaut : pas de titre
|
| titreTexteStyle |
Objet spécifiant le style du titre. L'objet a le format suivant:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Le Type : objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| info-bulle |
Objet avec des membres permettant de configurer divers éléments d'info-bulles. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme indiqué ci-dessous: {textStyle: {color: '#FF0000'}, showColorCode: true}
Type : objet
Par défaut : null
|
| tooltip.ignoreBounds |
Si la valeur est définie sur Remarque : Cela ne s'applique qu'aux info-bulles HTML. Si cette option est activée avec les info-bulles SVG, tout dépassement en dehors des limites du graphique sera recadré. Pour en savoir plus, consultez Personnaliser le contenu des info-bulles. Type:booléen
Par défaut : false
|
| tooltip.isHtml |
Si la valeur est "true", utilisez les info-bulles au format HTML (plutôt qu'au format SVG). Pour en savoir plus, consultez Personnaliser le contenu des info-bulles. Remarque : La personnalisation du contenu de l'info-bulle HTML via le rôle de données de la colonne d'info-bulles n'est pas compatible avec la visualisation Graphique à bulles. Type : booléen
Par défaut : false
|
| tooltip.showColorCode |
Si la valeur est "true", des carrés de couleur sont affichés à côté des informations sur la tranche dans l'info-bulle. Type : booléen
Par défaut : false
|
| tooltip.text |
Informations à afficher lorsque l'utilisateur passe la souris sur un secteur. Les valeurs suivantes sont acceptées:
Type : chaîne
Par défaut : "les deux"
|
| tooltip.textStyle |
Objet spécifiant le style de texte de l'info-bulle. L'objet a le format suivant:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Le Type : objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| tooltip.trigger |
Interaction de l'utilisateur qui entraîne l'affichage de l'info-bulle:
Type:chaîne
Par défaut : "focus"
|
| largeur |
Largeur du graphique, en pixels. Type : nombre
Par défaut:largeur de l'élément conteneur
|
Méthodes
| Méthode | |
|---|---|
draw(data, options) |
Dessine le graphique. Le graphique n'accepte d'autres appels de méthode qu'après le déclenchement de l'événement Return Type (Type de retour) : aucun
|
getAction(actionID) |
Renvoie l'objet d'action info-bulle avec le Return Type:objet
|
getBoundingBox(id) |
Renvoie un objet contenant les éléments "left", "top", "width" et "height" de l'élément de graphique
Les valeurs sont relatives au conteneur du graphique. Appelez-le après le graphique. Return Type : objet
|
getChartAreaBoundingBox() |
Renvoie un objet contenant les éléments "left", "top", "width" et "height" dans le contenu du graphique (c'est-à-dire, à l'exclusion des libellés et de la légende):
Les valeurs sont relatives au conteneur du graphique. Appelez-le après le graphique. Return Type : objet
|
getChartLayoutInterface() |
Renvoie un objet contenant des informations sur l'emplacement à l'écran du graphique et de ses éléments. Les méthodes suivantes peuvent être appelées sur l'objet renvoyé:
Appelez-le après le graphique. Return Type:objet
|
getHAxisValue(xPosition, optional_axis_index) |
Renvoie la valeur de données horizontale à Exemple : Appelez-le après le graphique. Return Type (Type de retour) : nombre
|
getImageURI() |
Renvoie le graphique sérialisé en tant qu'URI d'image. Appelez-le après le graphique. Consultez Imprimer des graphiques PNG. Type de retour:chaîne
|
getSelection() |
Affiche un tableau des entités de graphique sélectionnées.
Vous pouvez sélectionner des segments et des entrées de légende.
Pour ce graphique, une seule entité peut être sélectionnée à un moment donné.
Type de renvoi : tableau des éléments de sélection
|
getVAxisValue(yPosition, optional_axis_index) |
Renvoie la valeur de données verticales à Exemple : Appelez-le après le graphique. Return Type (Type de retour) : nombre
|
getXLocation(dataValue, optional_axis_index) |
Renvoie la coordonnée X du pixel de Exemple : Appelez-le après le graphique. Return Type (Type de retour) : nombre
|
getYLocation(dataValue, optional_axis_index) |
Renvoie la coordonnée Y en pixels de Exemple : Appelez-le après le graphique. Return Type (Type de retour) : nombre
|
removeAction(actionID) |
Supprime l'action d'info-bulle avec le Type de retour :
none |
setAction(action) |
Définit une action d'info-bulle à exécuter lorsque l'utilisateur clique sur le texte de l'action.
La méthode
Toutes les actions de l'info-bulle doivent être définies avant d'appeler la méthode Type de retour :
none |
setSelection() |
Sélectionne les entités de graphique spécifiées. Annule toute sélection précédente.
Vous pouvez sélectionner des segments et des entrées de légende.
Pour ce graphique, une seule entité peut être sélectionnée à la fois.
Return Type (Type de retour) : aucun
|
clearChart() |
Efface le graphique et libère toutes ses ressources allouées. Return Type (Type de retour) : aucun
|
Événements
Pour en savoir plus sur l'utilisation de ces événements, consultez les sections Interactivité de base, Gestion des événements et Déclenchement d'événements.
| Nom | |
|---|---|
click |
Déclenché lorsque l'utilisateur clique dans le graphique Permet d'identifier le clic sur le titre, les éléments de données, les entrées de légende, les axes, le quadrillage ou les libellés. Properties (Propriétés) : targetID
|
error |
Déclenché en cas d'erreur lors de la tentative d'affichage du graphique Properties (Propriétés) : id, message
|
onmouseover |
Déclenché lorsque l'utilisateur passe la souris sur une entité visuelle. Transmet les index de ligne et de colonne de l'élément du tableau de données correspondant. Une entrée de tranche ou de légende correspond à une ligne du tableau de données (l'index de colonne est nul). Properties (Propriétés) : ligne, colonne
|
onmouseout |
Déclenché lorsque l'utilisateur éloigne le curseur d'une entité visuelle Transmet les index de ligne et de colonne de l'élément de table de données correspondant. Une entrée de tranche ou de légende correspond à une ligne du tableau de données (l'index de colonne est nul). Properties (Propriétés) : ligne, colonne
|
ready |
Le graphique est prêt pour les appels de méthode externe. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir tracé, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode Properties (Propriétés) : aucune
|
select |
Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez Properties (Propriétés) : aucune
|
Règles relatives aux données
L'ensemble du code et des données est traité et affiché dans le navigateur. Aucune donnée n'est envoyée à un serveur.