Visualisation: Diagramme circulaire

Présentation

Graphique à secteurs affiché dans le navigateur à l'aide du format SVG ou VML. Affiche des info-bulles lorsque vous pointez sur des secteurs.

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 est 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 graphique en anneau 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 nombres compris entre 0,4 et 0,6 seront mieux adaptés à la plupart des graphiques. Les valeurs supérieures ou égales à 1 sont ignorées, et une valeur de 0 ferme complètement votre trou d'orifice.

<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 l'étiquette le plus près possible du centre du secteur. Si votre graphique en anneau ne comporte qu'une seule tranche, le centre de la tranche peut se trouver dans l'orifice de l'anneau. Dans ce cas, modifiez la couleur du libellé:
Options
        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };
Full HTML
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

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

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

Rotation d'un graphique à secteurs

Par défaut, les graphiques à secteurs commencent par le bord gauche de la première tranche qui pointe directement vers le haut. Vous pouvez modifier cela avec l'option pieStartAngle :

Ici, nous faisons pivoter le graphique de 100 degrés vers la droite avec l'option pieStartAngle: 100. (Elle est donc choisie parce que cet angle particulier permet de placer le libellé "Italien" dans le segment.)

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

Exploser un segment d'application

Vous pouvez séparer les secteurs du graphique avec la propriété offset de l'option slices:

Pour séparer une tranche, créez un objet slices et attribuez le numéro de tranche approprié à une offset comprise 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>

Supprimer des secteurs

Pour omettre une tranche, remplacez la couleur par 'transparent':

Nous avons également utilisé pieStartAngle pour faire pivoter le graphique de 135 degrés, pieSliceText pour supprimer le texte des secteurs 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 segments d'application

Vous pouvez définir une valeur comme seuil pour qu'un graphique s'affiche individuellement. Cette valeur correspond à une fraction du graphique (le graphique entier ayant la valeur 1). Pour définir ce seuil sous la forme d'un pourcentage du total, divisez le pourcentage souhaité par 100 (pour un seuil de 20 %, la valeur est 0,2). 

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

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 un secteur.

Columns:

  Colonne 0 Colonne 1 ... Colonne N (facultative)
Objectif : Étiquettes des secteurs Valeurs des secteurs ... Rôles facultatifs
Type de données : chaîne Nombre ...
Rôle : domaine Données ...
Rôles de colonne facultatifs: Aucun contrôle Aucun contrôle ...

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 'red' ou '#00cc00', ou d'un objet avec les propriétés suivantes.

Type:chaîne ou objet
Par défaut : "white" (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 : "white" (blanc).
chartArea

Objet avec des membres permettant de configurer l'emplacement et la taille de la zone de graphique (où le graphique est dessiné, à l'exception des axes et des légendes). Deux formats sont acceptés: un nombre ou un nombre suivi de %. Un nombre simple est une valeur en pixels. Un nombre suivi de % est un pourcentage. Exemple : chartArea:{left:20,top:0,width:'50%',height:'75%'}

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 d'un nom de couleur anglais. Lorsqu'un objet est utilisé, les propriétés suivantes peuvent être fournies:
  • stroke: couleur fournie sous forme de chaîne hexadécimale ou de nom de couleur anglais.
  • strokeWidth: si ce champ est fourni, il dessine une bordure autour de la zone du graphique de la largeur donnée (et de la couleur stroke).
Type:chaîne ou objet
Par défaut : "white" (blanc).
chartArea.left

Distance à partir de la bordure gauche du graphique

Type:nombre ou chaîne
Par défaut:auto
chartArea.top

Distance à partir de la bordure supérieure du graphique

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
colors

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: colors:['red','#004411'].

Type:tableau de chaînes
Par défaut:couleurs par défaut
enableInteractivity

Indique si le graphique génère des événements basés sur l'utilisateur ou réagit à une interaction utilisateur. Si la valeur est définie sur "false", le graphique ne génère pas d'événements de type "select" ou d'autres événements basés sur une interaction (mais génère des événements "prêts" ou d'erreur), et n'affiche pas le texte de l'info-bulle ni ne change en fonction de l'entrée utilisateur.

Type:booléen
Valeur par défaut : "true"
fontSize

Taille de police par défaut, en pixels, de tout le texte du graphique. Vous pouvez remplacer ce paramètre à l'aide des propriétés de certains éléments du graphique.

Type:nombre
Par défaut:automatique
fontName

Type de police par défaut pour tout le texte du graphique. Vous pouvez remplacer ce paramètre à l'aide des propriétés de certains éléments du graphique.

Type:chaîne
Par défaut : "Arial"
forceIFrame

Dessine le graphique dans un cadre intégré. Notez que dans IE8, cette option est ignorée, car tous les graphiques IE8 sont dessinés dans des i-frames.

Type:booléen
Par défaut : "false"
taille

Hauteur du graphique, en pixels.

Type:nombre
Par défaut:hauteur de l'élément parent
is3D

Si la valeur est "true", un graphique en trois dimensions s'affiche.

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 littérale d'objet, comme indiqué ci-dessous: 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type:objet
Par défaut:null
legend.alignment

Alignement de la légende. Les possibilités suivantes s'offrent à vous :

  • "start" : aligné sur le début de la zone allouée à la légende.
  • "center" : centré dans la zone allouée à la légende.
  • "end" : aligné à la fin de la zone allouée à la légende.

Le début, le centre et la fin dépendent du style (vertical ou horizontal) de la légende. Par exemple, dans une légende "droite", "début" et "fin" se trouvent respectivement en haut et en bas. Pour une légende "haut", "début" et "fin" se trouvent respectivement à gauche et à droite de la zone.

La valeur par défaut dépend de la position de la légende. Pour les légendes "bas", la valeur par défaut est "center" ; les autres légendes sont "start" (début).

Type:chaîne
Par défaut:automatique
legend.position

Position de la légende. Les possibilités suivantes s'offrent à vous :

  • "bottom" : affiche la légende sous le graphique.
  • "labeled" : trace des lignes reliant les tranches à leurs valeurs de données.
  • "left" : affiche la légende à gauche du graphique.
  • "none" : n'affiche aucune légende.
  • "right" : affiche la légende à droite du graphique.
  • "top" : affiche la légende au-dessus du graphique.
Type:chaîne
Par défaut : "right" (droite)
legend.maxLines

Nombre maximal de lignes dans la légende. Définissez ce paramètre sur un nombre supérieur à 1 pour ajouter des lignes à votre légende. Remarque: La logique exacte utilisée pour déterminer le nombre réel de lignes affichées est toujours en mouvement.

Pour le moment, cette option ne fonctionne que lorsque la valeur "caption.position" est définie sur "top".

Type:nombre
Par défaut : 1
legend.textStyle

Objet qui spécifie le style du texte de la légende. L'objet a le format suivant:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color peut être n'importe quelle chaîne de couleur HTML, par exemple 'red' ou '#00cc00'. Voir également fontName et fontSize.

Type:objet
Par défaut: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
pieHole

Si elle est comprise entre 0 et 1, un graphique en anneau s'affiche. Le trou dont le rayon est égal à number fois le rayon du graphique

Type:nombre
Par défaut:0
pieSliceBorderColor

Couleur des bordures des secteurs. Uniquement applicable lorsque le graphique est bidimensionnel.

Type:chaîne
Par défaut : "white" (blanc).
pieSliceText

Contenu du texte affiché sur le secteur. Les possibilités suivantes s'offrent à vous :

  • "percentage" : pourcentage de la taille du secteur par rapport au total.
  • "valeur" : valeur quantitative de la tranche.
  • "label" : nom du secteur.
  • "none" : aucun texte n'est affiché.
Type:chaîne
Par défaut : "percentage"
pieSliceTextStyle

Objet spécifiant le style de texte du secteur. L'objet a le format suivant:

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

color peut être n'importe quelle chaîne de couleur HTML, par exemple 'red' ou '#00cc00'. Voir également fontName et fontSize.

Type:objet
Par défaut: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
pieStartAngle

Angle, en degrés, selon lequel faire pivoter le graphique. La valeur par défaut 0 oriente directement le bord le plus à gauche de la première tranche vers le haut.

Type:nombre
Par défaut:0
reverseCategories

Si la valeur est "true", les secteurs sont dessinés dans le sens inverse des aiguilles d'une montre. Par défaut, les dessins sont dessinés dans le sens des aiguilles d'une montre.

Type:booléen
Par défaut : "false"
pieResidueSliceColor

Couleur de la tranche combinée contenant tous les secteurs en dessous de sliceVisibilityThreshold.

Type:chaîne
Par défaut : "#ccc"
pieResidueSliceLabel

Étiquette de la tranche combinée contenant toutes les tranches situées en dessous de sliceVisibilityThreshold.

Type:chaîne
Par défaut : "Autre"
segments

Tableau d'objets, chacun décrivant le format du secteur correspondant dans le graphique. Pour utiliser des valeurs par défaut pour une tranche, spécifiez un objet vide (par exemple, {}). Si aucune tranche ou valeur n'est spécifiée, la valeur globale est utilisée. Chaque objet accepte les propriétés suivantes:

  • color : couleur à utiliser pour ce secteur. Indiquez une chaîne de couleur HTML valide.
  • offset : pourcentage de séparation entre le secteur et le reste du graphique, compris entre 0,0 (pas du tout) et 1,0 (rayon du graphique).
  • textStyle - Remplace le pieSliceTextStyle global pour cette tranche.

Vous pouvez spécifier un tableau d'objets, chacun s'appliquant à la tranche dans l'ordre indiqué, ou vous pouvez spécifier un objet dans lequel chaque enfant possède une clé numérique indiquant à quelle tranche il s'applique. Par exemple, les deux déclarations suivantes sont identiques, et la première tranche est noire et la quatrième est rouge: 

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
Type:tableau d'objets ou objet avec des objets imbriqués
Par défaut : {}
sliceVisibilityThreshold

Valeur fractionnaire du graphique, en dessous de laquelle un secteur ne s'affiche pas individuellement. Toutes les tranches qui n'ont pas dépassé ce seuil seront combinées en une seule tranche "Autre", dont la taille correspond à la somme de toutes leurs tailles. Par défaut, les secteurs inférieurs à 0,5 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:un demi-degré (0,5/360, 1/720 ou 0,0014)
titre

Texte à afficher au-dessus du graphique.

Type:chaîne
Par défaut:aucun titre
titleTextStyle

Objet spécifiant le style du texte du titre. L'objet a le format suivant:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color peut être n'importe quelle chaîne de couleur HTML, par exemple 'red' ou '#00cc00'. Voir également fontName et fontSize.

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-bulle. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Type:objet
Par défaut:null
tooltip.ignoreBounds

Si la valeur est true, autorise le dessin des info-bulles en dehors des limites du graphique sur tous les côtés.

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 rogné. Pour en savoir plus, consultez Personnaliser le contenu des info-bulles.

Type:booléen
Par défaut : "false"
tooltip.isHtml

Si elle est définie sur "True", utilisez les info-bulles affichées en HTML (plutôt que 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 des colonnes d'info-bulles n'est pas disponible pour la visualisation Graphique à bulles.

Type:booléen
Par défaut : "false"
tooltip.showColorCode

Si la valeur est "true", des carrés de couleur s'affichent à côté des informations sur le secteur dans l'info-bulle.

Type:booléen
Par défaut : "false"
tooltip.text

Informations à afficher lorsque l'utilisateur pointe sur un secteur. Les valeurs suivantes sont acceptées :

  • les deux : [par défaut] affiche la valeur absolue de la tranche et le pourcentage de l'ensemble.
  • "value" : affiche uniquement la valeur absolue du secteur.
  • "pourcentage" : affiche uniquement le pourcentage de l'ensemble représenté par le secteur.
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> }

color peut être n'importe quelle chaîne de couleur HTML, par exemple 'red' ou '#00cc00'. Voir également fontName et fontSize.

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:

  • "sélectionner" : l'info-bulle s'affiche lorsque l'utilisateur pointe sur l'élément.
  • "none" : l'info-bulle ne s'affiche pas.
  • "selection" : l'info-bulle s'affiche lorsque l'utilisateur sélectionne l'élément.
Type:chaîne
Par défaut : "focus"
largeur

Largeur du graphique, en pixels.

Type:nombre
Par défaut:largeur de l'élément parent

Méthodes

Méthode
draw(data, options)

Permet de dessiner le graphique. Le graphique n'accepte d'autres appels de méthode qu'après le déclenchement de l'événement ready. Extended description.

Return Type (Type renvoyé) : aucun
getAction(actionID)

Renvoie l'objet d'action d'info-bulle avec l'élément actionID demandé.

Type renvoyé:objet
getBoundingBox(id)

Renvoie un objet contenant les valeurs gauche, supérieure, largeur et hauteur de l'élément de graphique id. Le format de id n'est pas encore documenté (il s'agit des valeurs renvoyées des gestionnaires d'événements), mais voici quelques exemples:

var cli = chart.getChartLayoutInterface();

Hauteur de la zone de graphique
cli.getBoundingBox('chartarea').height
Largeur de la troisième barre de la première série d'un graphique à barres ou à colonnes
cli.getBoundingBox('bar#0#2').width
Cadre de délimitation du cinquième coin d'un graphique à secteurs
cli.getBoundingBox('slice#4')
Cadre de délimitation des données d'un graphique vertical (par exemple, un graphique à colonnes) :
cli.getBoundingBox('vAxis#0#gridline')
Cadre de délimitation des données d'un graphique horizontal (par exemple, un graphique à barres) :
cli.getBoundingBox('hAxis#0#gridline')

Les valeurs sont relatives au conteneur du graphique. Appelez-le après que le graphique est dessiné.

Type renvoyé:objet
getChartAreaBoundingBox()

Renvoie un objet contenant les valeurs de gauche, de haut, de largeur et de hauteur du contenu du graphique (à l'exclusion des libellés et des légendes):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

Les valeurs sont relatives au conteneur du graphique. Appelez-le après que le graphique est dessiné.

Type renvoyé: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é:

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

Appelez-le après que le graphique est dessiné.

Type renvoyé:objet
getHAxisValue(xPosition, optional_axis_index)

Renvoie la valeur de données horizontales à xPosition, qui correspond à un décalage de pixels par rapport au bord gauche du conteneur du graphique. Peut être négatif.

Exemple : chart.getChartLayoutInterface().getHAxisValue(400)

Appelez-le après que le graphique est dessiné.

Type renvoyé:nombre
getImageURI()

Renvoie le graphique sérialisé en tant qu'URI d'image.

Appelez-le après que le graphique est dessiné.

Consultez la page Imprimer des graphiques PNG.

Type renvoyé:chaîne
getSelection()

Renvoie un tableau des entités de graphique sélectionnées. Les entités sélectionnables sont des tranches et des entrées de légende. Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois. Extended description .

Type renvoyé:tableau d'éléments de sélection
getVAxisValue(yPosition, optional_axis_index)

Renvoie la valeur de données verticales à yPosition, qui correspond à un décalage de pixels par rapport au bord supérieur du conteneur du graphique. Peut être négatif.

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

Appelez-le après que le graphique est dessiné.

Type renvoyé:nombre
getXLocation(dataValue, optional_axis_index)

Renvoie la coordonnée X en pixels de dataValue par rapport au bord gauche du conteneur du graphique.

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

Appelez-le après que le graphique est dessiné.

Type renvoyé:nombre
getYLocation(dataValue, optional_axis_index)

Renvoie la coordonnée Y en pixels de dataValue par rapport au bord supérieur du conteneur du graphique.

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

Appelez-le après que le graphique est dessiné.

Type renvoyé:nombre
removeAction(actionID)

Supprime l'action d'info-bulle avec l'élément actionID demandé du graphique.

Type renvoyé: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 setAction utilise un objet comme paramètre d'action. Cet objet doit spécifier trois propriétés: id (ID de l'action en cours de définition), text (texte à afficher dans l'info-bulle de l'action) et action (fonction à exécuter lorsqu'un utilisateur clique sur le texte de l'action).

Toutes les actions d'info-bulle doivent être définies avant d'appeler la méthode draw() du graphique. Description étendue :

Type renvoyé:none
setSelection()

Sélectionne les entités de graphique spécifiées. Annule toute sélection précédente. Les entités sélectionnables sont des tranches et des entrées de légende. Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois. Extended description .

Return Type (Type renvoyé) : aucun
clearChart()

Efface le graphique et libère toutes les ressources allouées.

Return Type (Type renvoyé) : aucun

Événements

Pour en savoir plus sur l'utilisation de ces événements, consultez les sections Interactivité de base, Gérer les événements et Déclencher des événements.

Nom
click

Déclenché lorsque l'utilisateur clique dans le graphique. Permet de déterminer quand un utilisateur clique sur le titre, les éléments de données, les entrées de légende, les axes, le quadrillage ou les libellés.

Propriétés:targetID
error

Déclenché lorsqu'une erreur se produit lors de la tentative d'affichage du graphique.

Propriétés:id, message
onmouseover

Déclenché lorsque l'utilisateur pointe sur une entité visuelle. Renvoie les index de ligne et de colonne de l'élément correspondant du tableau de données. Une entrée de tranche ou de légende correspond à une ligne de la table de données (l'index de colonne est nul).

Propriétés:ligne, colonne
onmouseout

Déclenché lorsque l'utilisateur éloigne le curseur de la souris d'une entité visuelle. Renvoie les index de ligne et de colonne de l'élément correspondant du tableau de données. Une entrée de tranche ou de légende correspond à une ligne de la table de données (l'index de colonne est nul).

Propriétés:ligne, colonne
ready

Le graphique est prêt pour les appels de méthode externes. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir dessiné, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode draw, puis ne les appeler qu'après le déclenchement de l'événement.

Propriétés:aucune
select

Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez getSelection().

Propriétés:aucune

Règles concernant les données

L'ensemble du code et des données sont traités et affichés dans le navigateur. Aucune donnée n'est envoyée à aucun serveur.