Visualisation: Graphique à secteurs (image)

Important:La section "Graphiques d'images" de Google Outils de création de graphiques a été officiellement abandonnée depuis le 20 avril 2012. Elle continuera de fonctionner conformément à notre Règlement relatif aux abandons.

  1. Overview
  2. Exemple
  3. Loading
  4. Format des données
  5. Options de configuration
  6. Méthodes
  7. Événements
  8. Règles concernant les données

Présentation

Graphique à secteurs affiché sous forme d'image à l'aide de l'API Google Charts.

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:["imagepiechart"]});
      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 chart = new google.visualization.ImagePieChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Chargement...

Le nom du package google.charts.load est "imagepiechart":

  google.charts.load('current', {packages: ['imagepiechart']});

Le nom de classe de la visualisation est google.visualization.ImagePieChart

  var visualization = new google.visualization.ImagePieChart(container);

Format des données

Deux colonnes. La première colonne doit être une chaîne et contenir le libellé de la tranche. La deuxième colonne doit contenir un nombre et la valeur de la tranche.

Options de configuration

Vous pouvez spécifier les options suivantes dans l'objet options transmis dans la méthode draw() de la visualisation.

Nom Type Par défaut Description
backgroundColor chaîne '#FFFFFF' (blanc) Couleur d'arrière-plan du graphique dans le format de couleurs de l'API Chart
color chaîne Auto Spécifie une couleur de base à utiliser pour toutes les séries. Chaque série correspond à un dégradé de la couleur spécifiée. Les couleurs sont spécifiées dans le format de couleurs de l'API Chart. Ignoré si colors est spécifié.
colors Tableau<chaîne> Auto Utilisez cette option pour attribuer des couleurs spécifiques à chaque série de données. Les couleurs sont spécifiées dans le format de couleurs de l'API Chart. La couleur i est utilisée pour la colonne de données i, en encadrant le début jusqu'au début s'il y a plus de colonnes de données que de couleurs. Si les variantes d'une seule couleur sont acceptables pour toutes les séries, utilisez plutôt l'option color.
enableEvents boolean false Entraîne la génération d'événements déclenchés par l'utilisateur dans les graphiques, tels qu'un clic ou le survol de la souris. Compatible uniquement avec des types de graphiques spécifiques. Consultez la section Événements ci-dessous.
taille Nombre Hauteur du conteneur Hauteur du graphique en pixels.
is3D boolean false Si la valeur est "true", affiche un graphique en trois dimensions.
étiquettes chaîne "none" (aucune)

Libellé, le cas échéant, à afficher pour chaque secteur. Choisissez l'une des valeurs suivantes:

  • "none" : aucun libellé.
  • "value" : utilise la valeur de la tranche comme libellé.
  • "name" : utilisez le nom de la tranche (le nom de la colonne).
légende chaîne 'droite' Emplacement de la légende sur le graphique. Choisissez l'une des valeurs suivantes: "top", "bottom", "left", "right" ou "none".
titre chaîne sans titre Texte à afficher au-dessus du graphique.
largeur Nombre Largeur du conteneur Largeur du graphique en pixels.

Méthodes

Méthode Type renvoyé Description
draw(data, options) none Permet de dessiner le graphique.

Événements

Vous pouvez vous inscrire pour entendre les événements décrits sur la page Graphique d'images génériques.

Règles concernant les données

Veuillez consulter Règles de journalisation de l'API Chart.