- Chú giải công cụ: giới thiệu
- Chỉ định loại chú giải công cụ
- Chú giải công cụ tiêu chuẩn
- Tuỳ chỉnh nội dung chú giải công cụ
- Sử dụng chú giải công cụ HTML
- Tuỳ chỉnh nội dung HTML
- Chú giải công cụ xoay vòng
- Đặt biểu đồ trong chú giải công cụ
- Thao tác trong chú giải công cụ
- Chú thích dữ liệu
- Biểu đồ được hỗ trợ
Mẹo công cụ: giới thiệu
Chú giải công cụ là các hộp nhỏ bật lên khi bạn di chuột qua nội dung nào đó. (Thẻ di chuột nói chung chung hơn và có thể xuất hiện ở bất kỳ đâu 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ư một 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ú giải công cụ trong Google Chart.
Chỉ định loại chú giải công cụ
Biểu đồ của Google tự động tạo chú giải công cụ cho tất cả các biểu đồ cốt lõi.
Các tệp này sẽ được kết xuất dưới dạng SVG theo mặc định, ngoại trừ trong IE 8 mà các tệp này 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 biểu đồ cốt lõi bằng cách chỉ định tooltip.isHtml: true trong các tùy chọn biểu đồ được chuyển đến lệnh gọi draw(), việc này cũng sẽ cho phép bạn tạo Hành động trong chú giải công cụ.
Chú giải công cụ tiêu chuẩn
Trong trường hợp không có nội dung tuỳ chỉnh, hệ thống sẽ tự động tạo nội dung cho chú giải công cụ dựa trên dữ liệu cơ bản. Bạn có thể xem chú giải công cụ bằng cách di chuột qua bất kỳ thanh nào trong biểu đồ.
Tuỳ chỉnh nội dung của chú giải công cụ
Trong ví dụ này, chúng tôi thêm nội dung tuỳ chỉnh vào chú giải công cụ bằng cách thêm một cột mới vào DataTable và đánh dấu nội dung đó bằng vai trò chú giải công cụ.
Lưu ý: điều này không được hỗ trợ trong hình ảnh 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 được xây dựng dựa trên ví dụ trước bằng cách bật chú giải công cụ HTML. Hãy lưu ý rằng bạn sẽ 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);
}
Điều đó trông không khác nhiều, nhưng giờ đây chúng ta có thể tuỳ chỉnh HTML.
Tuỳ chỉnh nội dung HTML
Các ví dụ trước đều 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 sẽ xuất hiện khi bạn có thể tuỳ chỉnh chúng bằng mã đánh dấu HTML. Để bật tính năng này, bạn phải làm hai việc sau:
-
Chỉ định
tooltip.isHtml: truetrong các tùy chọn biểu đồ. Lệnh này yêu cầu biểu đồ vẽ các chú giải công cụ trong HTML (trái ngược với 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
htmltuỳ chỉnh. Một cột có thể dữ liệu với vai trò chú giải công cụ và thuộc tính HTML sẽ là:
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})Lưu ý: tính năng này không hoạt động với hình ảnh Biểu đồ bong bóng. Nội dung của chú giải công cụ HTML của Bubble Graph không thể tùy chỉnh.
Quan trọng: Hãy đảm bảo rằng HTML trong chú giải công cụ 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à rất quan trọng. Nếu không, hình ảnh đẹp mắt của bạn có thể dễ bị tấn công bởi XSS.
Nội dung HTML tuỳ chỉnh có thể đơn giản như thêm thẻ <img> hoặc in đậm một văn bản:
Nội dung HTML tuỳ chỉnh cũng có thể bao gồm nội dung được tạo động. Ở đây, chúng tôi thêm chú giải công cụ chứa bảng được tạo động cho từng giá trị danh mục. Do chú giải công cụ được đính kèm vào giá trị của hàng, 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 họa cách đính kèm chú giải công cụ HTML tùy chỉnh vào một cột miền. (Trong các ví dụ trước, nó đã được đính kèm vào cột
dữ liệu.) Để bật chú giải công cụ 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>';
}
Chú giải công cụ xoay
Bạn có thể xoay vòng chú giải công cụ trong Google Biểu đồ bằng CSS. Trong biểu đồ dưới đây, các chú giải công cụ đượ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 biểu đồ:
<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>