Etykietki: wprowadzenie
Etykietki to małe pola, które pojawiają się po najechaniu kursorem na element. (karty informacyjne są bardziej ogólne i mogą pojawiać się w dowolnym miejscu ekranu; etykietki zawsze są dołączone do jakiegoś elementu, np. kropki na wykresie punktowym lub słupka na wykresie słupkowym).
Z tej dokumentacji dowiesz się, jak tworzyć i dostosowywać etykietki w Wykresach Google.
Określanie typu etykietki
Wykresy Google automatycznie tworzą etykietki dla wszystkich głównych wykresów.
Domyślnie będą renderowane jako SVG, z wyjątkiem IE 8, gdzie będą renderowane jako VML. Możesz tworzyć etykietki HTML na głównych wykresach, określając tooltip.isHtml: true w opcjach wykresu przekazywanych do wywołania draw(). Umożliwia to także tworzenie działań podpowiedzi.
Standardowe etykietki
W przypadku braku treści niestandardowych treść etykietki jest generowana automatycznie na podstawie danych bazowych. Aby wyświetlić etykietkę, najedź kursorem na dowolny słupek na wykresie.
Dostosowywanie etykietek
W tym przykładzie dodajesz niestandardową treść do etykietek, dodając nową kolumnę do tabeli DataTable i oznaczając ją rolą etykietki.
Uwaga: wizualizacja wykresu bąbelkowego nie jest obsługiwana.
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);
}
Używanie etykietek HTML
Ten przykład stanowi kontynuację poprzedniego, włączając etykietki HTML. Zwróć uwagę na dodanie do opcji wykresu tooltip.isHtml: true.
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);
}
Nie wygląda to zbytnio, ale teraz możemy dostosować kod HTML.
Dostosowywanie treści HTML
We wszystkich poprzednich przykładach były używane etykietki zawierające zwykły tekst, ale prawdziwe informacje o nich działają, gdy można je dostosować za pomocą znaczników HTML. Aby włączyć tę funkcję, musisz wykonać 2 czynności:
-
W opcjach wykresu określ
tooltip.isHtml: true. Spowoduje to, że wykres będzie rysował etykietki w kodzie HTML (a nie w formacie SVG). -
Oznacz całą kolumnę lub konkretną komórkę w tabeli danych za pomocą właściwości niestandardowej
html. Kolumna z danymi z rolą etykietki i właściwością HTML miałaby postać:
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})Uwaga: nie działa to w przypadku wizualizacji wykresu bąbelkowego. Zawartość etykiet HTML wykresu bąbelkowego nie można dostosowywać.
Ważne: upewnij się, że kod HTML w etykietkach pochodzi z zaufanego źródła.
Jeśli niestandardowa treść HTML zawiera jakiekolwiek treści wygenerowane przez użytkowników, kluczowe jest omijanie ich. W przeciwnym razie Twoje atrakcyjne wizualizacje mogą być narażone na ataki XSS.
Aby ustawić niestandardową treść HTML, wystarczy dodać tag <img> lub pogrubić tekst:
Niestandardowa treść HTML może też zawierać treści generowane dynamicznie. Dodamy tu etykietkę zawierającą dynamicznie generowaną tabelę dla każdej wartości kategorii. Etykietka jest dołączona do wartości wiersza, dlatego najechanie na dowolny słupek powoduje wyświetlenie etykietki HTML.
Ten przykład pokazuje, jak można dołączyć niestandardową etykietkę HTML do kolumny domeny. (W poprzednich przykładach była ona umieszczona w kolumnie danych). Aby włączyć etykietkę dla osi domeny, ustaw opcję 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>';
}
Etykietki dotyczące obrotu
Etykietki w Wykresach Google można obracać za pomocą CSS. Na wykresie poniżej etykietki są obracane o 30° w prawo za pomocą wbudowanego kodu CSS bezpośrednio przed elementem div wykresu:
<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>