Chú giải công cụ: giới thiệu
Chú thích là các hộp nhỏ bật lên khi bạn di chuột lên nội dung nào đó. (Thẻ di chuột tổng quát hơn và có thể xuất hiện ở bất kỳ vị trí nào trên màn hình; chú giải công cụ luôn được đính kèm vào nội dung nào đó, chẳng hạn như dấu chấm trên biểu đồ tán xạ hoặc thanh trên biểu đồ thanh.)
Trong tài liệu này, bạn sẽ tìm hiểu cách tạo và tuỳ chỉnh chú thích trong Google Biểu đồ.
Chỉ định loại chú giải công cụ
Google Biểu đồ tự động tạo chú thích cho tất cả các biểu đồ chính.
Theo mặc định, các hình ảnh này sẽ được kết xuất dưới dạng SVG, ngoại trừ phiên bản IE 8, trong đó chúng sẽ được kết xuất dưới dạng VML. Bạn có thể tạo chú giải công cụ HTML trên các biểu đồ chính bằng cách chỉ định tooltip.isHtml: true trong các tuỳ chọn biểu đồ được chuyển đến lệnh gọi draw(). Thao tác này cũng cho phép bạn tạo Thao tác cho mẹo công cụ.
Chú thích chuẩn
Trong trường hợp không có nội dung tuỳ chỉnh, nội dung chú giải công cụ sẽ được tạo tự động dựa trên dữ liệu cơ bản. Bạn có thể xem chú thích bằng cách di chuột qua bất kỳ thanh nào trong biểu đồ.
Tuỳ chỉnh nội dung chú thích
Trong ví dụ này, chúng tôi thêm nội dung tuỳ chỉnh vào phần chú thích bằng cách thêm một cột mới vào DataTable và đánh dấu cột đó bằng vai trò trong chú giải công cụ.
Lưu ý: tính năng này không được hỗ trợ bởi hình ảnh trực quan Biểu đồ bong bóng.
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);
}
Sử dụng chú giải công cụ HTML
Ví dụ này dựa trên ví dụ trước bằng cách bật chú thích HTML. Hãy lưu ý rằng bạn đã thêm tooltip.isHtml: true vào các tuỳ chọn biểu đồ.
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);
}
Giao diện này trông không khác nhiều, nhưng bây giờ chúng ta có thể tuỳ chỉnh HTML.
Tuỳ chỉnh nội dung HTML
Những ví dụ trước đều sử dụng chú giải công cụ với nội dung văn bản thuần tuý, nhưng sức mạnh thực sự của chú giải công cụ HTML đến từ việc bạn có thể tuỳ chỉnh chú thích bằng mã đánh dấu HTML. Để bật tính năng này, bạn phải làm hai việc:
-
Chỉ định
tooltip.isHtml: truetrong các tuỳ chọn biểu đồ. Thao tác này sẽ yêu cầu biểu đồ vẽ các chú thích dưới dạng HTML (thay vì SVG). -
Đánh dấu toàn bộ cột hoặc một ô cụ thể trong bảng dữ liệu bằng thuộc tính tuỳ chỉnh
html. Một cột bảng dữ liệu có vai trò chú thích và thuộc tính HTML sẽ là:
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})Lưu ý: cách này không hoạt động với hình ảnh trực quan của Biểu đồ bong bóng. Không thể tuỳ chỉnh nội dung của chú giải công cụ HTML của Biểu đồ bong bóng.
Lưu ý quan trọng: Đảm bảo rằng HTML trong phần chú thích của bạn đến từ một nguồn đáng tin cậy.
Nếu nội dung HTML tuỳ chỉnh chứa bất kỳ nội dung nào do người dùng tạo, thì việc thoát nội dung đó là quan trọng. Nếu không, hình ảnh trực quan đẹp mắt của bạn có thể bị XSS tấn công.
Để sử dụng nội dung HTML tuỳ chỉnh, bạn có thể chỉ cần thêm thẻ <img> hoặc in đậm văn bản:
Nội dung HTML tùy chỉnh cũng có thể bao gồm nội dung được tạo động. Ở đây, chúng tôi sẽ thêm chú giải công cụ có chứa bảng được tạo tự động cho từng giá trị danh mục. Vì chú thích được đính kèm với giá trị hàng, nên việc di chuột qua bất kỳ thanh nào sẽ hiển thị chú giải công cụ HTML.
Ví dụ này minh hoạ cách đính kèm chú thích HTML tuỳ chỉnh vào cột miền. (Trong các ví dụ trước, dữ liệu được đính kèm vào một cột dữ liệu.) Để bật chú thích cho trục miền, hãy đặt tuỳ chọn 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>';
}
Xoay vòng chú giải công cụ
Bạn có thể xoay vòng chú thích trong Google Biểu đồ bằng CSS. Trong biểu đồ bên dưới, các chú thích được xoay 30° theo chiều kim đồng hồ bằng cách sử dụng CSS cùng dòng này ngay trước div của biểu đồ:
<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>
Xin lưu ý rằng cách này chỉ áp dụng cho chú giải công cụ HTML, tức là những chú thích có tuỳ chọn 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>
Đặt biểu đồ trong chú thích
Chú thích HTML có thể bao gồm hầu hết mọi nội dung HTML mà bạn thích, thậm chí cả một biểu đồ của Google. Với các biểu đồ bên trong phần chú thích, người dùng có thể xem thêm thông tin khi họ di chuột qua một phần tử dữ liệu. Đây là một cách hiệu quả để cung cấp thông tin chi tiết ở cấp độ cao ngay từ đầu, đồng thời cho phép mọi người tìm hiểu sâu hơn khi họ muốn.
Biểu đồ cột bên dưới cho thấy biểu đồ về lượng người xem cao nhất gần đây của một số sự kiện thể thao lớn, trong đó phần chú thích cho từng sự kiện cho thấy một biểu đồ dạng đường cho biết lượng người xem trung bình trong 10 năm qua.
Một số điều cần lưu ý ở đây. Trước tiên, bạn cần vẽ một biểu đồ có thể in được cho mỗi tập dữ liệu sẽ xuất hiện trong phần chú thích. Thứ hai, mỗi biểu đồ chú giải công cụ cần một trình xử lý sự kiện"sẵn sàng" mà chúng tôi gọi thông qua addListener để tạo biểu đồ có thể in được.
QUAN TRỌNG: Tất cả biểu đồ chú thích phải được vẽ trước biểu đồ chính. Điều này là cần thiết nhằm lấy hình ảnh để thêm vào DataTable của biểu đồ chính.
// 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);
}
<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>
Thao tác trên chú giải công cụ
Chú giải công cụ cũng có thể bao gồm các hành động được xác định bởi JavaScript. Một ví dụ đơn giản: dưới đây là phần chú thích có thao tác bật lên hộp thoại khi người dùng nhấp vào "Xem sách mẫu":
Tuỳ chọn tooltip kích hoạt khi người dùng chọn một hình nêm của biểu đồ, khiến mã được xác định trong setAction được chạy:
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);
}
Các thao tác có thể là visible, enabled, cả hai hoặc không. Khi biểu đồ của Google được hiển thị, thao tác chú thích chỉ xuất hiện nếu vị trí đó xuất hiện và chỉ có thể nhấp vào khi được bật. (Đã tắt nhưng các hành động hiển thị có màu xám.)
visible và enabled phải là các hàm trả về giá trị true hoặc false. Các hàm đó có thể phụ thuộc vào mã phần tử và lựa chọn của người dùng, cho phép bạn tinh chỉnh chế độ hiển thị và khả năng nhấp của hành động.
Chú giải công cụ có thể kích hoạt trên focus cũng như selection. Tuy nhiên, với các thao tác chú thích, bạn nên dùng selection. Nhờ đó, phần chú thích vẫn sẽ tồn tại, giúp người dùng dễ dàng chọn thao tác hơn.
Tất nhiên, các thao tác không cần phải là cảnh báo: bất cứ thao tác nào bạn có thể thực hiện qua JavaScript, bạn cũng có thể thực hiện từ một thao tác. Ở đây, chúng ta sẽ thêm 2 hành động: một là phóng to miếng chêm của biểu đồ hình tròn và hành động còn lại để thu nhỏ nó.
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);
}
Chú thích dữ liệu
Bạn có thể trực tiếp phủ văn bản lên Biểu đồ của Google bằng cách sử dụng annotationText thay vì tooltip làm vai trò cho cột. (Bạn có thể xem chú thích bằng cách di chuột qua chú thích.)
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);
}
Các biểu đồ được hỗ trợ
Chú thích HTML hiện được hỗ trợ cho các loại biểu đồ sau:- AreaChart
- BarChart
- CalendarChart
- CandlestickChart
- ColumnChart
- ComboChart
- LineChart
- PieChart
- Sơ đồ Sankey
- ScatterChart
- Mốc thời gian
Nếu bạn đang sử dụng các vai trò annotationText hoặc tooltip, vui lòng xem tài liệu về các vai trò để đọc về những thay đổi trong tương lai và cách tránh những khó khăn trong tương lai.