Cette page a été traduite par l'API Cloud Translation.

Info-bulles

Info-bulles: présentation
Spécifier le type d'info-bulle
Info-bulles standards
Personnaliser le contenu des info-bulles
Utiliser des info-bulles HTML
Personnaliser le contenu HTML
Rotation des info-bulles
Placer des graphiques dans les info-bulles
Actions de l'info-bulle
Annoter des données
Graphiques compatibles

Info-bulles: présentation

Les info-bulles sont les petites cases qui s'affichent lorsque vous pointez sur un élément. (Les fiches informatives sont plus générales et peuvent apparaître n'importe où sur l'écran. Elles sont toujours associées à un élément, comme un point sur un graphique à nuage de points ou une barre sur un graphique à barres.)

Dans cette documentation, vous apprendrez à créer et à personnaliser des info-bulles dans Google Charts.

Google Charts crée automatiquement des info-bulles pour tous les graphiques principaux. Par défaut, elles seront affichées au format SVG, sauf dans IE 8 où elles le seront au format VML. Vous pouvez créer des info-bulles HTML sur les graphiques principaux en spécifiant tooltip.isHtml: true dans les options du graphique transmises à l'appel draw(), ce qui vous permettra également de créer des actions pour les info-bulles.

Info-bulles standards

En l'absence de contenu personnalisé, le contenu de l'info-bulle est automatiquement généré en fonction des données sous-jacentes. Vous pouvez afficher l'info-bulle en passant la souris sur l'une des barres du graphique.

Pointez sur les barres pour afficher les info-bulles standards.

Dans cet exemple, nous ajoutons du contenu personnalisé aux info-bulles en ajoutant une colonne à la DataTable et en lui attribuant le rôle Info-bulle.

Remarque:cela n'est pas pris en charge par la visualisation Graphique à bulles.

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

      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'Year');
        dataTable.addColumn('number', 'Sales');
        // A column for custom tooltip content
        dataTable.addColumn({type: 'string', role: 'tooltip'});
        dataTable.addRows([
          ['2010', 600,'$600K in our first year!'],
          ['2011', 1500, 'Sunspot activity made this our best year ever!'],
          ['2012', 800, '$800K in 2012.'],
          ['2013', 1000, '$1M in sales last year.']
        ]);

        var options = { legend: 'none' };
        var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_action'));
        chart.draw(dataTable, options);
      }

Utiliser des info-bulles HTML

Cet exemple s'appuie sur le précédent en activant les info-bulles HTML. Notez l'ajout de tooltip.isHtml: true aux options du graphique.

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

      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'Year');
        dataTable.addColumn('number', 'Sales');
        // A column for custom tooltip content
        dataTable.addColumn({type: 'string', role: 'tooltip'});
        dataTable.addRows([
          ['2010', 600,'$600K in our first year!'],
          ['2011', 1500, 'Sunspot activity made this our best year ever!'],
          ['2012', 800, '$800K in 2012.'],
          ['2013', 1000, '$1M in sales last year.']
        ]);

        var options = {
          tooltip: {isHtml: true},
          legend: 'none'
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_html_tooltip'));
        chart.draw(dataTable, options);
      }

Cela n'a pas l'air très différent, mais nous pouvons maintenant personnaliser le code HTML.

Personnaliser le contenu HTML

Tous les exemples précédents utilisaient des info-bulles avec du contenu en texte brut, mais les info-bulles HTML ont toute leur utilité lorsqu'elles peuvent être personnalisées à l'aide du balisage HTML. Pour l'activer, vous devez effectuer deux opérations:

Spécifiez tooltip.isHtml: true dans les options du graphique. Cela indique au graphique de dessiner les info-bulles en HTML (par opposition au format SVG).
Marquez une colonne entière ou une cellule spécifique de la table de données avec la propriété personnalisée html. Une colonne de tableau de données avec le rôle d'info-bulle et la propriété HTML se présenterait comme suit:
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})
Remarque:cela ne fonctionne pas avec la visualisation Graphique à bulles. Le contenu des info-bulles HTML du graphique à bulles n'est pas personnalisable.

Important:Assurez-vous que le code HTML figurant dans vos info-bulles provient d'une source fiable. Si le contenu HTML personnalisé comporte du contenu généré par l'utilisateur, il est essentiel de l'échapper. Sinon, vos belles visualisations risquent d'être exposées à des attaques XSS.

Pour personnaliser le contenu HTML, il vous suffit d'ajouter une balise <img> ou de mettre du texte en gras:

Le contenu HTML personnalisé peut également inclure du contenu généré dynamiquement. Ici, nous ajoutons une info-bulle contenant une table générée dynamiquement pour chaque valeur de catégorie. Étant donné que l'info-bulle est associée à la valeur de la ligne, pointez sur l'une des barres pour afficher l'info-bulle HTML.

Cet exemple montre comment associer une info-bulle HTML personnalisée à une colonne de domaine. (Dans les exemples précédents, il était associé à une colonne de données.) Pour activer l'info-bulle pour l'axe du domaine, définissez l'option focusTarget: 'category'.

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Country');
  // Use custom HTML content for the domain tooltip.
  dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
  dataTable.addColumn('number', 'Gold');
  dataTable.addColumn('number', 'Silver');
  dataTable.addColumn('number', 'Bronze');

  dataTable.addRows([
    ['USA', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg', 46, 29, 29), 46, 29, 29],
    ['China', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg', 38, 27, 23), 38, 27, 23],
    ['UK', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg', 29, 17, 19), 29, 17, 19]
  ]);

  var options = {
    title: 'London Olympics Medals',
    colors: ['#FFD700', '#C0C0C0', '#8C7853'],
    // This line makes the entire category's tooltip active.
    focusTarget: 'category',
    // Use an HTML tooltip.
    tooltip: { isHtml: true }
  };

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('custom_html_content_div')).draw(dataTable, options);
}

function createCustomHTMLContent(flagURL, totalGold, totalSilver, totalBronze) {
  return '<div style="padding:5px 5px 5px 5px;">' +
      '<img src="' + flagURL + '" style="width:75px;height:50px"><br/>' +
      '<table class="medals_layout">' + '<tr>' +
      '<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
      '<td><b>' + totalGold + '</b></td>' + '</tr>' + '<tr>' +
      '<td><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Silver_medal.svg" style="width:25px;height:25px"/></td>' +
      '<td><b>' + totalSilver + '</b></td>' + '</tr>' + '<tr>' +
      '<td><img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg" style="width:25px;height:25px"/></td>' +
      '<td><b>' + totalBronze + '</b></td>' + '</tr>' + '</table>' + '</div>';
}

Rotation des info-bulles

Dans les graphiques Google, les info-bulles peuvent être alternées avec CSS. Dans le graphique ci-dessous, les info-bulles sont pivotées de 30° dans le sens des aiguilles d'une montre avec ce CSS intégré juste avant le div du graphique:


<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>

Notez que cela ne fonctionne que pour les info-bulles HTML, c'est-à-dire celles associées à l'option isHtml: 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([
          ['Year', 'Fixations'],
          ['2015',  80],
          ['2016',  90],
          ['2017',  100],
          ['2018',  90],
          ['2019',  80],
        ]);

        var options = {
          tooltip: { isHtml: true },    // CSS styling affects only HTML tooltips.
          legend: { position: 'none' },
          bar: { groupWidth: '90%' },
          colors: ['#A61D4C']
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_rotated'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <!-- The next line rotates HTML tooltips by 30 degrees clockwise. -->
    <style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>
    <div id="tooltip_rotated" style="width: 400px; height: 400px;"></div>
  </body>
</html>

Placer des graphiques dans les info-bulles

Les info-bulles HTML peuvent inclure la plupart du contenu HTML de votre choix, y compris un graphique Google. Lorsque les graphiques sont intégrés aux info-bulles, les utilisateurs peuvent obtenir des informations supplémentaires lorsqu'ils pointent sur un élément de données. C'est un bon moyen de fournir des informations générales au premier coup d'œil tout en permettant aux utilisateurs d'aller plus loin lorsqu'ils le souhaitent.

Le graphique à colonnes ci-dessous présente le nombre de spectateurs récents les plus élevés de plusieurs événements sportifs majeurs. Pour chacun d'eux, les info-bulles affichent un graphique en courbes du nombre moyen de spectateurs au cours des dix dernières années.

Quelques points à noter ici. Tout d'abord, un graphique imprimable doit être dessiné pour chaque ensemble de données à afficher dans une info-bulle. Ensuite, chaque graphique à info-bulles nécessite un gestionnaire d'événements "ready", que nous appelons via addListener pour créer un graphique imprimable.

IMPORTANT:Tous les graphiques à info-bulles doivent être affichés avant le graphique principal. Cette opération est nécessaire pour récupérer les images à ajouter au tableau de données du graphique principal.

Sections importantes

      // Draws your charts to pull the PNGs for your tooltips.
      function drawTooltipCharts() {

        var data = new google.visualization.arrayToDataTable(tooltipData);
        var view = new google.visualization.DataView(data);

        // For each row of primary data, draw a chart of its tooltip data.
        for (var i = 0; i < primaryData.length; i++) {

          // Set the view for each event's data
          view.setColumns([0, i + 1]);

          var hiddenDiv = document.getElementById('hidden_div');
          var tooltipChart = new google.visualization.LineChart(hiddenDiv);

          google.visualization.events.addListener(tooltipChart, 'ready', function() {

            // Get the PNG of the chart and set is as the src of an img tag.
            var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';

            // Add the new tooltip image to your data rows.
            primaryData[i][2] = tooltipImg;

          });
          tooltipChart.draw(view, tooltipOptions);
        }
        drawPrimaryChart();
      }

      function drawPrimaryChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Event');
        data.addColumn('number', 'Highest Recent Viewership');

        // Add a new column for your tooltips.
        data.addColumn({
          type: 'string',
          label: 'Tooltip Chart',
          role: 'tooltip',
          'p': {'html': true}
        });

        // Add your data (with the newly added tooltipImg).
        data.addRows(primaryData);

        var visibleDiv = document.getElementById('visible_div');
        var primaryChart = new google.visualization.ColumnChart(visibleDiv);
        primaryChart.draw(data, primaryOptions);

      }

Page Web complète

<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(drawTooltipCharts);

      // Set up data for visible chart.
      var primaryData = [
        ['NBA Finals', 22.4],
        ['NFL Super Bowl', 111.3],
        ['MLB World Series', 19.2],
        ['UEFA Champions League Final', 1.9],
        ['NHL Stanley Cup Finals', 6.4],
        ['Wimbledon Men\'s Championship', 2.4]
      ];

      // Set up data for your tooltips.
      var tooltipData = [
        ['Year', 'NBA Finals', 'NFL Super Bowl', 'MLB World Series',
        'UEFA Champions League Final', 'NHL Stanley Cup Finals',
        'Wimbledon Men\'s Championship'],
        ['2005', 12.5, 98.7, 25.3, 0.6, 3.3, 2.8],
        ['2006', 13.0, 90.7, 17.1, 0.8, 2.8, 3.4],
        ['2007', 9.3, 93.0, 15.8, 0.9, 1.8, 3.8],
        ['2008', 14.9, 97.5, 17.1, 1.3, 4.4, 5.1],
        ['2009', 14.3, 98.7, 13.6, 2.1, 4.9, 5.7],
        ['2010', 18.2, 106.5, 19.4, 2.2, 5.2, 2.3],
        ['2011', 17.4, 111.0, 14.3, 4.2, 4.6, 2.7],
        ['2012', 16.8, 111.3, 16.6, 2.0, 2.9, 3.9],
        ['2013', 16.6, 108.7, 12.7, 1.4, 5.8, 2.5],
        ['2014', 15.7, 111.3, 15.0, 1.9, 4.7, 2.4]
      ];

      var primaryOptions = {
        title: 'Highest U.S. Viewership for Most Recent Event (in millions)',
        legend: 'none',
        tooltip: {isHtml: true} // This MUST be set to true for your chart to show.
      };

      var tooltipOptions = {
        title: 'U.S. Viewership Over The Last 10 Years (in millions)',
        legend: 'none'
      };

      // Draws your charts to pull the PNGs for your tooltips.
      function drawTooltipCharts() {

        var data = new google.visualization.arrayToDataTable(tooltipData);
        var view = new google.visualization.DataView(data);

        // For each row of primary data, draw a chart of its tooltip data.
        for (var i = 0; i < primaryData.length; i++) {

          // Set the view for each event's data
          view.setColumns([0, i + 1]);

          var hiddenDiv = document.getElementById('hidden_div');
          var tooltipChart = new google.visualization.LineChart(hiddenDiv);

          google.visualization.events.addListener(tooltipChart, 'ready', function() {

            // Get the PNG of the chart and set is as the src of an img tag.
            var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';

            // Add the new tooltip image to your data rows.
            primaryData[i][2] = tooltipImg;

          });
          tooltipChart.draw(view, tooltipOptions);
        }
        drawPrimaryChart();
      }

      function drawPrimaryChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Event');
        data.addColumn('number', 'Highest Recent Viewership');

        // Add a new column for your tooltips.
        data.addColumn({
          type: 'string',
          label: 'Tooltip Chart',
          role: 'tooltip',
          'p': {'html': true}
        });

        // Add your data (with the newly added tooltipImg).
        data.addRows(primaryData);

        var visibleDiv = document.getElementById('visible_div');
        var primaryChart = new google.visualization.ColumnChart(visibleDiv);
        primaryChart.draw(data, primaryOptions);

      }
    </script>
  </head>
<body>
<div id="hidden_div" style="display:none"></div>
<div id="visible_div" style="height:300px"></div>
</body>
</html>

Les info-bulles peuvent également inclure des actions définies par JavaScript. À titre d'exemple, voici une info-bulle avec une action qui affiche une boîte de dialogue lorsque l'utilisateur clique sur "Voir un exemple de livre":

L'option tooltip se déclenche lorsque l'utilisateur sélectionne un coin du graphique, ce qui entraîne l'exécution du code défini dans setAction:

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Genre', 'Percentage of my books'],
          ['Science Fiction', 217],
          ['General Science', 203],
          ['Computer Science', 175],
          ['History', 155],
          ['Economics/Political Science', 98],
          ['General Fiction', 72],
          ['Fantasy', 51],
          ['Law', 29]
        ]);

        var chart = new google.visualization.PieChart(
          document.getElementById('tooltip_action'));

        var options = { tooltip: { trigger: 'selection' }};

        chart.setAction({
          id: 'sample',
          text: 'See sample book',
          action: function() {
            selection = chart.getSelection();
            switch (selection[0].row) {
              case 0: alert('Ender\'s Game'); break;
              case 1: alert('Feynman Lectures on Physics'); break;
              case 2: alert('Numerical Recipes in JavaScript'); break;
              case 3: alert('Truman'); break;
              case 4: alert('Freakonomics'); break;
              case 5: alert('The Mezzanine'); break;
              case 6: alert('The Color of Magic'); break;
              case 7: alert('The Law of Superheroes'); break;
            }
          }
        });

        chart.draw(data, options);
      }

Les actions peuvent être visible, enabled, les deux ou aucune. Lorsqu'un graphique Google s'affiche, une action d'info-bulle ne s'affiche que si elle est visible et cliquable uniquement si elle est activée. (désactivées, mais les actions visibles sont grisées).

visible et enabled doivent être des fonctions qui renvoient des valeurs "true" ou "false". Ces fonctions peuvent dépendre de l'ID de l'élément et de la sélection de l'utilisateur, ce qui vous permet d'ajuster la visibilité et la cliquabilité des actions.

Les info-bulles peuvent se déclencher sur focus et selection. Toutefois, pour les actions d'info-bulle, il est préférable d'utiliser selection. L'info-bulle reste alors affichée, ce qui permet à l'utilisateur de sélectionner plus facilement l'action.

Bien entendu, les actions n'ont pas besoin d'être des alertes: tout ce que vous pouvez faire à partir de JavaScript, vous pouvez le faire à partir d'une action. Ici, nous allons ajouter deux actions : l'une pour agrandir un coin de notre diagramme circulaire et l'autre pour le réduire.

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Genre', 'Percentage of my books'],
          ['Science Fiction', 217],
          ['General Science', 203],
          ['Computer Science', 175],
          ['History', 155],
          ['Economics & Political Science', 98],
          ['General Fiction', 72],
          ['Fantasy', 51],
          ['Law', 29]
        ]);

        var chart = new google.visualization.PieChart(
          document.getElementById('tooltip_action_2'));

        var options = { tooltip: { trigger: 'selection' }};

        chart.setAction({
          id: 'increase',
          text: 'Read 20 more books',
          action: function() {
            data.setCell(chart.getSelection()[0].row, 1,
                         data.getValue(chart.getSelection()[0].row, 1) + 20);
            chart.draw(data, options);
          }
        });

        chart.setAction({
          id: 'decrease',
          text: 'Read 20 fewer books',
          action: function() {
            data.setCell(chart.getSelection()[0].row, 1,
                         data.getValue(chart.getSelection()[0].row, 1) - 20);
            chart.draw(data, options);
          }
        });

        chart.draw(data, options);
      }

Annoter des données

Vous pouvez superposer du texte directement sur un graphique Google en utilisant annotationText au lieu de tooltip comme rôle dans la colonne. Vous pouvez afficher l'info-bulle en pointant sur l'annotation avec votre souris.

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Year');
  dataTable.addColumn('number', 'USA');
  dataTable.addColumn({type: 'string', role: 'annotation'});
  dataTable.addColumn({type: 'string', role: 'annotationText', p: {html:true}});
  dataTable.addColumn('number', 'China');
  dataTable.addColumn('number', 'UK');
  dataTable.addRows([
    ['2000',  94, '',  '', 58, 28],
    ['2004', 101, '',  '', 63, 30],
    ['2008', 110, 'An all time high!', '<img width=100px src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg">', 100, 47],
    ['2012', 104, '',  '', 88, 65]
  ]);

  var options = { tooltip: {isHtml: true}};
  var chart = new google.visualization.LineChart(document.getElementById('tt_6_annotation'));
  chart.draw(dataTable, options);
}

Graphiques compatibles

Les info-bulles HTML sont actuellement compatibles avec les types de graphiques suivants :

Si vous utilisez les rôles annotationText ou tooltip, consultez la documentation sur les rôles pour en savoir plus sur les modifications futures et sur la manière d'éviter d'autres problèmes à l'avenir.