Dicas

  1. Dicas de ferramenta: introdução
  2. Como especificar o tipo de dica
  3. Dicas padrão
  4. Como personalizar o conteúdo da dica
  5. Como usar dicas de HTML
  6. Como personalizar o conteúdo HTML
  7. Dicas de rotação
  8. Como posicionar gráficos em dicas
  9. Ações de dica
  10. Como anotar dados
  11. Gráficos compatíveis

Dicas de ferramenta: introdução

As dicas são as pequenas caixas que aparecem quando você passa o cursor sobre algo. Os cartões de visita são mais gerais e podem aparecer em qualquer lugar da tela. As dicas estão sempre anexadas a algo, como um ponto em um gráfico de dispersão ou uma barra em um gráfico de barras.

Nesta documentação, você aprenderá a criar e personalizar dicas no Google Charts.

Como especificar o tipo de dica

Os gráficos do Google criam dicas automaticamente para todos os gráficos principais. Eles serão renderizados como SVG por padrão, exceto no IE 8, em que serão renderizados como VML. É possível criar dicas de HTML nos gráficos principais especificando tooltip.isHtml: true nas opções de gráfico transmitidas para a chamada draw(), o que também permite criar Ações de dica.

Dicas padrão

Na ausência de conteúdo personalizado, o conteúdo da dica é gerado automaticamente com base nos dados subjacentes. Para conferir a dica, passe o cursor do mouse sobre qualquer uma das barras do gráfico.

Passe o cursor sobre as barras para ver as dicas padrão.

Como personalizar o conteúdo da dica

Neste exemplo, adicionamos conteúdo personalizado às dicas adicionando uma nova coluna à DataTable e marcando-a com o papel da dica.

Observação: isso não é compatível com a visualização do gráfico de bolhas. 

        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);
      }

Como usar dicas de HTML

Este exemplo se baseia no anterior e ativa as dicas HTML. Observe a adição de tooltip.isHtml: true às opções do gráfico. 

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);
      }

A aparência não está muito diferente, mas agora podemos personalizar o HTML.

Como personalizar o conteúdo HTML

Todos os exemplos anteriores usaram dicas com conteúdo de texto simples, mas a vantagem delas é quando você pode personalizá-las usando marcação HTML. Para ativar esse recurso, é preciso fazer duas coisas:

  1. Especifique tooltip.isHtml: true nas opções do gráfico. Isso diz ao gráfico para desenhar as dicas em HTML (não em SVG).
  2. Marque uma coluna inteira ou uma célula específica na tabela de dados com a propriedade personalizada html. Uma coluna da tabela de dados com o papel da dica e a propriedade HTML seria:
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})

    Observação: isso não funciona com a visualização do gráfico de bolhas. O conteúdo das dicas de HTML do gráfico de bolhas não é personalizável.

Importante:verifique se o HTML nas dicas vem de uma fonte confiável. Se o conteúdo HTML personalizado tiver conteúdo gerado pelo usuário, o escape desse conteúdo é vital. Caso contrário, suas belas visualizações podem estar abertas a ataques XSS.

O conteúdo HTML personalizado pode ser tão simples quanto adicionar uma tag <img> ou colocar um texto em negrito:

O conteúdo HTML personalizado também pode incluir conteúdo gerado dinamicamente. Aqui, adicionamos uma dica contendo uma tabela gerada dinamicamente para cada valor de categoria. Como a dica está anexada ao valor da linha, ao passar o cursor sobre qualquer uma das barras, a dica HTML será exibida.

Este exemplo demonstra como uma dica de HTML personalizada pode ser anexada a uma coluna de domínio. Em exemplos anteriores, ela foi anexada a uma coluna de dados. Para ativar a dica para o eixo do domínio, defina a opção 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>';
}

Dicas de rotação

As dicas nos gráficos do Google podem ser alternadas com CSS. No gráfico abaixo, as dicas são giradas 30° no sentido horário usando esse CSS in-line imediatamente antes do div do gráfico:

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

Isso só funcionará para dicas de HTML, ou seja, aquelas com a opção 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>

Como posicionar gráficos em dicas

Elas podem incluir quase todo o conteúdo HTML que você quiser, até mesmo um gráfico do Google. Com gráficos dentro de dicas, os usuários podem ver mais informações ao passar o cursor sobre um elemento de dados: uma boa maneira de fornecer detalhes de alto nível à primeira vista e permitir que as pessoas se aprofundem quando quiserem.

O gráfico de colunas abaixo mostra o número de visualizações recentes mais altas de vários grandes eventos esportivos. As dicas de cada um mostram um gráfico de linhas com a média de visualização nos últimos dez anos.

Alguns pontos a serem observados aqui. Primeiro, um gráfico para impressão precisa ser desenhado para cada conjunto de dados a ser mostrado em uma dica. Em segundo lugar, cada gráfico de dica precisa de um manipulador de eventos"ready", que chamamos via addListener para criar um gráfico para impressão.

IMPORTANTE:todos os gráficos de dicas precisam ser desenhados antes do gráfico principal. Isso é necessário para obter as imagens que serão adicionadas à tabela de dados do gráfico principal.

Partes 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);

      }
Página da Web completa
<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>

Ações de dica

Elas também podem incluir ações definidas por JavaScript. Como exemplo simples, aqui está uma dica com uma ação que abre uma caixa de diálogo quando o usuário clica em "Ver livro de amostra":

A opção tooltip é acionada quando o usuário seleciona uma borda da pizza, fazendo com que o código definido em setAction seja executado:

        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);
      }

As ações podem ser visible, enabled, ambas ou nenhuma delas. Quando um gráfico do Google é renderizado, uma ação de dica só é mostrada se estiver visível e só é clicável se está ativada. (Desativada, mas as ações visíveis estarão esmaecidas.)

visible e enabled precisam ser funções que retornam valores verdadeiros ou falsos. Essas funções podem depender do ID do elemento e da seleção do usuário, permitindo que você ajuste a visibilidade e a clicabilidade da ação.

As dicas podem ser acionadas em focus e selection. No entanto, com ações de dica, é preferível usar selection. Isso faz com que a dica persista, permitindo que o usuário selecione a ação com mais facilidade.

É claro que as ações não precisam ser alertas. Qualquer ação que você possa fazer no JavaScript, pode ser feita em uma ação. Aqui, vamos adicionar duas ações: uma para ampliar um encaixe do nosso gráfico de pizza e outra para encolhê-lo.

        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);
      }

Como anotar dados

É possível sobrepor texto diretamente em um gráfico do Google usando annotationText em vez de tooltip como o papel da coluna. Para ver a dica, passe o cursor sobre a anotação.

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);
}

Gráficos compatíveis

No momento, as dicas de HTML são compatíveis com os seguintes tipos de gráfico:

Se você estiver usando os papéis annotationText ou tooltip, consulte a documentação sobre papéis para saber mais sobre mudanças futuras e como evitar problemas futuros.