Cấu hình cho Google Charts
Trong bài viết này, tôi sẽ giới thiệu các bước cấu hình cần thiết để vẽ biểu đồ sử dụng API của Google Charts.
Bước 1: Tạo trang HTML
Tạo trang web có tên là bieu_do_google.html với mã nguồn:
<html> <head> <title>Học Google Charts</title> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {packages: ['corechart']}); </script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> </body> </html>
Phần tử div có id là container được dùng để chứa biểu đồ khi vẽ bằng thư viện Google Charts. Ở đây chúng ta đang nạp API phiên bản mới nhất của lõi biểu đồ, sử dụng phương thức google.charts.load.
Bước 2: Cấu hình
Sau khi hoàn thành bước 1 rồi thì biểu đồ vẫn chưa có dữ liệu để vẽ nên bước này ta thực hiện cấu hình cho biểu đồ. Bằng cách sử dụng cú pháp json, thư viện Google Charts rất đơn giản để cấu hình.
// Khởi tạo và vẽ biểu đồ var chart = new google.visualization.PieChart(document.getElementById('container')); chart.draw(data, options);
Tại đây, dữ liệu đại diện cho dữ liệu json được cấu hình mà thư viện Google Charts dùng để vẽ biểu đồ bên trong thẻ div container, sử dụng phương thức draw(). Bây giờ chúng ta sẽ cấu hình các thông số khác nhau mà chuỗi json yêu cầu.
Tiêu đề biểu đồ
Để cấu hình tiêu đề cho biểu đồ, ta dùng tùy chọn title:
// Thiết lập tùy chọn cho biểu đồ var options = {'title':'Thị phần trình duyệt năm 2014', 'width':550, 'height':400};
Bảng dữ liệu
Cấu hình bảng dữ liệu để hiển thị trên bản đồ. Bảng dữ liệu là một bảng đặc biệt có cấu trúc xác định, chứa dữ liệu của biểu đồ. Cột của dữ liệu được gọi là trường dữ liệu, chia dữ liệu thành những loại khác nhau. Hàng được gọi là bảng ghi dữ liệu, chứa dữ liệu được xếp vào các trường.dữ liệu.
Để thêm trường dữ liệu, ta dùng phương thức .addColumn(), để thêm bảng ghi dữ liệu, ta dùng phương thức .addRows().
Ví dụ như sau:
// Cấu hình dữ liệu cho biểu đồ var data = new google.visualization.DataTable(); data.addColumn('string', 'Trình duyệt'); data.addColumn('number', 'Phần trăm'); data.addRows([ ['Firefox', 45.0], ['IE', 26.8], ['Chrome', 12.8], ['Safari', 8.5], ['Opera', 6.2], ['Khác', 0.7] ]);
Bước 3: Vẽ biểu đồ
// Khởi tạo và vẽ biểu đồ var chart = new google.visualization.PieChart(document.getElementById('container')); chart.draw(data, options);
Ví dụ
Ví dụ hoàn chỉnh dưới đây sẽ cho bạn kết quả biểu đồ vừa cấu hình.
bieu_do_google.html
<html> <head> <title>Học Google Charts</title> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {packages: ['corechart']}); </script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> function drawChart() { // Cấu hình dữ liệu cho biểu đồ var data = new google.visualization.DataTable(); data.addColumn('string', 'Trình duyệt'); data.addColumn('number', 'Phần trăm'); data.addRows([ ['Firefox', 45.0], ['IE', 26.8], ['Chrome', 12.8], ['Safari', 8.5], ['Opera', 6.2], ['Khác', 0.7] ]); // Thiết lập tùy chọn cho biểu đồ var options = {'title':'Thị phần trình duyệt năm 2014', 'width':550, 'height':400}; // Khởi tạo và vẽ biểu đồ var chart = new google.visualization.PieChart(document.getElementById('container')); chart.draw(data, options); } google.charts.setOnLoadCallback(drawChart); </script> </body> </html>
Đoạn mã dưới đây sẽ gọi hàm drawChart để vẽ biểu đồ khi thư viện Google Charts đã được nạp hoàn toàn.
google.charts.setOnLoadCallback(drawChart);
Bình luận