Dicas: 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 sã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 nos Gráficos Google.
Como especificar o tipo de dica
Os gráficos do Google criam automaticamente dicas 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 em gráficos
principais especificando tooltip.isHtml: true nas
opções de gráfico transmitidas à chamada
draw(), o que também permitirá criar
Ações de dica de ferramenta.
Dicas padrão
Na ausência de conteúdo personalizado, o conteúdo da dica é gerado automaticamente com base nos dados. Para ver a dica, passe o cursor sobre qualquer uma das barras do gráfico.
Como personalizar o conteúdo de dicas
Neste exemplo, adicionamos conteúdo personalizado às dicas adicionando uma nova coluna à DataTable e marcando-a com o papel de 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 as dicas de ferramentas HTML
Este exemplo é baseado no anterior, ativando as dicas de 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);
}
Isso não parece muito diferente, mas agora podemos personalizar o HTML.
Como personalizar o conteúdo HTML
Todos os exemplos anteriores usavam dicas de ferramentas com conteúdo de texto simples, mas o poder real das dicas de HTML aparece quando é possível personalizá-las usando a marcação HTML. Para ativar esse recurso, faça o seguinte:
-
Especifique
tooltip.isHtml: truenas opções do gráfico. Isso instrui o gráfico a desenhar as dicas em HTML (ao contrário do SVG). -
Marque uma coluna inteira ou uma célula específica na tabela de dados com a propriedade personalizada
html. Uma coluna de tabela de dados com o papel de 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 para o gráfico de círculos não é personalizável.
Importante: verifique se o HTML nas dicas é de uma fonte confiável.
Se o conteúdo HTML personalizado tiver qualquer conteúdo gerado pelo usuário, o escape desse conteúdo
é essencial. Caso contrário, o layout fica aberto para
ataques XSS.
O conteúdo HTML personalizado pode ser tão simples quanto adicionar uma tag <img> ou colocar em negrito algum texto:
O conteúdo HTML personalizado também pode incluir conteúdo gerado de modo dinâmico. Aqui, adicionamos uma dica contendo uma tabela gerada de maneira dinâmica para cada valor de categoria. Como a dica é anexada ao valor da linha, passe o cursor sobre qualquer uma das barras para exibir a dica.
Neste exemplo, demonstramos como uma dica de HTML personalizada pode ser anexada a uma coluna de domínio. Nos exemplos anteriores, ele foi anexado a uma coluna de dados. Para ativar a dica para o eixo de 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 Google podem ser alternadas com CSS. No gráfico abaixo, as dicas são giradas 30° no sentido horário usando esse CSS inline imediatamente antes do div do gráfico:
<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>