Tooltip: pengantar
Tooltip adalah kotak kecil yang muncul saat Anda mengarahkan kursor ke atas sesuatu. (Kartu profil lebih umum, dan dapat muncul di mana saja di layar; tooltip selalu dilampirkan ke sesuatu, seperti titik di diagram sebar, atau batang pada diagram batang.)
Dalam dokumentasi ini, Anda akan mempelajari cara membuat dan menyesuaikan tooltip di Google Chart.
Menentukan jenis tooltip
Google Chart secara otomatis membuat tooltip untuk semua diagram inti.
Keduanya akan dirender sebagai SVG secara default, kecuali pada IE 8 yang akan
dirender sebagai VML. Anda dapat
membuat tooltip HTML pada diagram
inti dengan menentukan tooltip.isHtml: true dalam
opsi diagram yang diteruskan ke panggilan
draw(), yang juga akan memungkinkan Anda membuat
Tindakan Tool.
tooltip standar
Jika tidak ada konten kustom, konten tooltip dibuat secara otomatis berdasarkan data pokok. Anda dapat melihat tooltip dengan mengarahkan mouse ke salah satu batang dalam diagram.
Menyesuaikan konten tooltip
Dalam contoh ini, kami menambahkan konten kustom ke tooltip dengan menambahkan kolom baru ke DataTable dan menandainya dengan peran tooltip.
Catatan: fungsi ini tidak didukung oleh visualisasi Bubble Chart.
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);
}
Menggunakan tooltip HTML
Contoh ini dibuat dari contoh sebelumnya dengan mengaktifkan tooltip
HTML. Perhatikan penambahan tooltip.isHtml: true ke
opsi diagram.
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);
}
Ini tidak terlihat berbeda, tetapi sekarang kita dapat menyesuaikan HTML.
Menyesuaikan konten HTML
Contoh sebelumnya telah menggunakan tooltip dengan konten teks biasa, tetapi kekuatan tooltip HTML yang sebenarnya dapat diperoleh jika Anda dapat menyesuaikannya menggunakan markup HTML. Untuk mengaktifkannya, Anda harus melakukan dua hal:
-
Tentukan
tooltip.isHtml: truedi opsi diagram. Ini akan memberi tahu diagram untuk menggambar tooltip dalam HTML (bukan SVG). -
Tandai seluruh kolom, atau sel tertentu, dalam tabel data dengan properti kustom
html. Kolom tabel data dengan peran tooltip dan properti HTML adalah:
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})Catatan: tindakan ini tidak berfungsi dengan visualisasi Balon Diagram. Konten tooltip HTML Bubble Chart tidak dapat disesuaikan.
Penting: Pastikan HTML di tooltip Anda berasal dari sumber tepercaya.
Jika konten HTML kustom berisi konten buatan pengguna, proses escape konten tersebut
sangat penting. Jika tidak, visualisasi yang menarik mungkin akan terbuka untuk
serangan XSS.
Konten HTML kustom dapat sesederhana menambahkan tag <img> atau menebalkan beberapa teks:
Konten HTML kustom juga dapat menyertakan konten yang dibuat secara dinamis. Di sini, kita menambahkan tooltip yang berisi tabel yang dihasilkan secara dinamis untuk setiap nilai kategori. Karena tooltip dilampirkan pada nilai baris, mengarahkan kursor ke salah satu batang akan menampilkan tooltip HTML.
Contoh ini menunjukkan cara tooltip HTML kustom dapat dilampirkan ke
kolom domain. (Pada contoh sebelumnya, kolom ini dilampirkan ke kolom data.) Untuk mengaktifkan tooltip untuk sumbu domain, tetapkan
opsi 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>';
}
tooltip berputar
Tooltip di Google Chart dapat diputar dengan CSS. Pada diagram di bawah, tooltip diputar 30° searah jarum jam menggunakan CSS inline ini tepat sebelum diagram div:
<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>