Google Charts là gì?
Google Maps là một API của Google
Google Fonts là một API của Google
Google Charts là một API của Google
Tìm hiểu cách thêm Google Charts vào trang web của bạn.
Thí dụ
Biểu đồ hình tròn của Google
Bắt đầu với một trang web cơ bản đơn giản.
Thêm phần tử <div> với id "piechart":
Thí dụ
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<div id="piechart"></div>
</body>
<html>
Thêm tham chiếu đến API biểu đồ tại google.com:
Thí dụ
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
Và thêm một hàm JavaScript:
Thí dụ
<script type="text/javascript">
// Load google charts
google.charts.load('current',
{'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data =
google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Friends', 2],
['Eat', 2],
['TV',
2],
['Gym', 2],
['Sleep', 8]
]);
// Optional; add
a title and set the width and height of the chart
var options = {'title':'My
Average Day', 'width':550, 'height':400};
// Display the chart
inside the <div> element with id="piechart"
var chart = new
google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>