Thiết lập môi trường cho Google Charts
Bài viết này, chúng ta cùng tìm hiểu làm thế nào để thiết lập thư viện Google Charts để sử dụng trong trang web của mình.
Để sử dụng Google Charts, bạn chỉ cần nạp Javascript loader.js thông qua CDN. Lưu ý rằng, xuyên suốt chuyên mục này, tôi sẽ sử dụng phiên bản CDN để minh họa, tức là nạp thư viện trực tiếp từ hệ thống phân phối nội dung của Google.
Bạn thêm mã lệnh sau vào trang web của mình:
<head> <script src="https://www.gstatic.com/charts/loader.js"></script> </head>
Vậy là bạn có thể sử dụng Google Charts vào trang web của mình rồi. Bạn có thể tham khảo mục Google Charts từ trợ giúp của Google.
Biểu đồ đầu tiên
Giờ bạn hãy thử mã nguồn sau để tham khảo biểu đồ nhé:
Ví dụ
<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([
['Công việc', 'Giờ trên ngày'],
['Học tập', 8],
['Ăn uống', 2],
['Giải trí', 2],
['Ngủ', 8],
['Viết bài', 4]
]);
var options = {
title: 'Hoạt động thường ngày của tôi',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="donutchart" style="width: 900px; height: 500px;"></div>
</body>
</html>
Xem kết quả »
Bình luận