Info-bulles

Conseils: Introduction

Les info-bulles sont de petites zones qui s'affichent lorsque vous pointez sur un élément. Les cartes de visite sont plus générales et peuvent apparaître n'importe où sur l'écran. Les info-bulles sont toujours associées à un élément, tel qu'un point sur un graphique à nuage de points ou une barre sur un graphique à barres.

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

Spécifier le type d'info-bulle

Google Charts crée automatiquement des info-bulles pour tous les graphiques de base. Ils seront affichés par défaut au format SVG, sauf sous IE 8 où ils seront rendus au format VML. Vous pouvez créer des info-bulles HTML sur des graphiques de base en spécifiant tooltip.isHtml: true dans les options de graphique transmises à l'appel draw(), ce qui vous permettra également de créer des actions dans 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. Pour afficher l'info-bulle, pointez sur l'une des barres du graphique.

Passez la souris sur les barres pour afficher les info-bulles standards.

Personnaliser le contenu des info-bulles

Dans cet exemple, nous ajoutons du contenu personnalisé aux info-bulles en ajoutant une colonne à la table de données et en la marquant avec le rôle Info-bulle.

Remarque : Cela n'est pas compatible avec 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 les 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);
      }

Ce n'est pas très différent, mais nous pouvons maintenant personnaliser le code HTML.

Personnaliser le contenu HTML

Les exemples précédents ont tous utilisé des info-bulles avec du contenu en texte brut, mais la vraie puissance des info-bulles HTML se manifeste lorsque vous pouvez les personnaliser à l'aide du balisage HTML. Pour cela, vous devez effectuer les deux opérations suivantes:

  1. Spécifiez tooltip.isHtml: true dans les options du graphique. Cela indique au graphique de dessiner les info-bulles en HTML (par opposition à SVG).
  2. Marquez une colonne entière ou une cellule spécifique dans le tableau de données avec la propriété personnalisée html. Voici une colonne de données avec le rôle d'info-bulle et la propriété HTML :
    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 inclus dans vos info-bulles provient d'une source fiable. Si le contenu HTML personnalisé contient du contenu généré par l'utilisateur, il est essentiel d'échapper ce contenu. Sinon, vos superbes visualisations peuvent être ouvertes aux attaques XSS.

Pour personnaliser le contenu HTML, il 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 une info-bulle HTML personnalisée peut être associée à une colonne de domaine. (Dans les exemples précédents, il était associé à une colonne de données.) Pour activer l'info-bulle sur 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>';
}

Info-bulles en rotation

Il est possible d'alterner les info-bulles dans Google Charts avec le CSS. Dans le graphique ci-dessous, les info-bulles sont orientées de 30° vers la droite à l'aide de ce CSS intégré, juste avant l'élément 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 avec 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>

Insérer des graphiques dans des info-bulles

Les info-bulles HTML peuvent inclure la plupart des contenus HTML de votre choix, même un graphique Google. Grâce aux graphiques inclus dans les info-bulles, les utilisateurs peuvent obtenir des informations supplémentaires lorsqu'ils passent la souris sur un élément de données: un bon moyen de fournir des informations détaillées au premier coup d'œil, tout en permettant aux utilisateurs d'approfondir le sujet lorsqu'ils le souhaitent.

Le graphique à colonnes ci-dessous présente le nombre de vues les plus récentes de plusieurs grands événements sportifs, avec des info-bulles pour chaque graphique représentant le nombre moyen de spectateurs enregistrés au cours des 10 dernières années.

Voici quelques points à noter. Tout d'abord, un graphique imprimable doit être dessiné pour chaque ensemble de données à afficher dans une info-bulle. Deuxièmement, chaque graphique d'info-bulle a besoin d'un gestionnaire d'événements "ready", que nous appelons via addListener pour créer un graphique imprimable.

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

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

Actions d'info-bulles

Les info-bulles peuvent également inclure des actions définies par JavaScript. Voici un exemple d'info-bulle avec une action qui s'affiche lorsque l'utilisateur clique sur "Voir un exemple de livre" :

L'option tooltip se déclenche lorsque l'utilisateur sélectionne un bord de tarte, 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 ou les deux. Lorsqu'un graphique Google est affiché, une action d'info-bulle ne s'affiche que si elle est visible et n'est cliquable que si elle est activée. (Les actions désactivées sont visibles, mais 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. Cependant, avec les actions de l'info-bulle, selection est préférable. L'info-bulle persiste, ce qui permet à l'utilisateur de sélectionner l'action plus facilement.

Les actions ne doivent pas être des alertes, bien sûr: tout ce que vous pouvez faire à partir d'une action JavaScript est possible. Ici, nous allons ajouter deux actions : une pour agrandir un coin de notre graphique à secteurs et une autre pour la 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 dans un graphique Google en utilisant annotationText au lieu de tooltip comme colonne de la colonne. (Vous pouvez afficher l'info-bulle en passant la souris sur l'annotation.)

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 graphique suivants :

Si vous utilisez les rôles annotationText ou tooltip, veuillez consulter la documentation sur les rôles pour en savoir plus sur les modifications futures et découvrir comment éviter les difficultés futures.