Biểu đồ Google
Từ biểu đồ đường đơn giản đến bản đồ cây phân cấp phức tạp, thư viện Google Chart cung cấp một số lượng lớn các loại biểu đồ sẵn sàng sử dụng:
- Biểu đồ phân tán
- Biểu đồ đường
- Biểu đồ thanh / cột
- Biểu đồ khu vực
- Biểu đồ tròn
- Biểu đồ bánh rán
- Biểu đồ tổ chức
- Bản đồ / Biểu đồ địa lý
Làm thế nào để sử dụng Google Chart?
Để sử dụng Google Chart trong trang web của bạn, hãy thêm một liên kết đến trình tải biểu đồ:
<script
src="https://www.gstatic.com/charts/loader.js">
</script>
Google Chart rất dễ sử dụng.
Chỉ cần thêm một phần tử <div> để hiển thị biểu đồ:
<div id="myChart" style="max-width:700px; height:400px"></div>
Phần tử <div> phải có một id duy nhất.
Sau đó tải Google Graph API:
- Tải API Visualization và gói corechart
- Đặt một hàm gọi lại để gọi khi API được tải
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);
Đó là tất cả!
Đồ thị đường thẳng
Mã nguồn
function drawChart() {
// Set Data
var data = google.visualization.arrayToDataTable([
['Price', 'Size'],
[50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
[110,10],[120,11],[130,14],[140,14],[150,15]
]);
// Set Options
var options = {
title: 'House Prices vs Size',
hAxis: {title: 'Square Meters'},
vAxis: {title: 'Price in Millions'},
legend: 'none'
};
// Draw Chart
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}
Điểm phân tán
Để phân tán biểu đồ của cùng một dữ liệu, hãy thay đổi google.visualization thành ScatterChart:
var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));
Biểu đồ thanh
Mã nguồn
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Contry', 'Mhl'],
['Italy', 55],
['France', 49],
['Spain', 44],
['USA', 24],
['Argentina', 15]
]);
var options = {
title: 'World Wide Wine Production'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}
Biểu đồ hình tròn
Để chuyển đổi Biểu đồ thanh thành Biểu đồ tròn , chỉ cần thay thế: google.visualization
. BarChart
với:
google.visualization. Biểu đồ tròn
var chart = new google.visualization.PieChart(document.getElementById('myChart'));
Bánh 3D
Để hiển thị Pie ở dạng 3D, chỉ cần thêm is3D: true vào các tùy chọn:
var options = {
title: 'World Wide Wine Production',
is3D: true
};