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 Biểu đồ của Google 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
- Sơ đồ tổ chức
- Bản đồ / Biểu đồ địa lý
Làm cách nào để sử dụng Biểu đồ Google?
Để sử dụng Biểu đồ Google trong trang web của bạn, hãy thêm liên kết vào trình tải biểu đồ:
<script
src="https://www.gstatic.com/charts/loader.js">
</script>
Biểu đồ Google rất dễ sử dụng.
Chỉ cần thêm 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ó id duy nhất.
Sau đó tải API đồ thị của Google:
- Tải API trực quan hóa và gói corechart
- Đặt chức năng 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ả!
Biểu đồ đường
Mã nguồn
function drawChart() {
// Set Data
const 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
const options = {
title: 'House Prices vs Size',
hAxis: {title: 'Square Meters'},
vAxis: {title: 'Price in Millions'},
legend: 'none'
};
// Draw Chart
const 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ùng một dữ liệu, hãy thay đổi google.visualization thành ScatterChart:
const chart = new google.visualization.LineChart(document.getElementById('myChart'));
Biểu đồ thanh
Mã nguồn
function drawChart() {
const data = google.visualization.arrayToDataTable([
['Contry', 'Mhl'],
['Italy', 55],
['France', 49],
['Spain', 44],
['USA', 24],
['Argentina', 15]
]);
const options = {
title: 'World Wide Wine Production'
};
const 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 đồ Hình tròn , chỉ cần thay thế:
google.visualization. Biểu đồ cột
với:
google.visualization. Biểu đồ tròn
const chart = new google.visualization. PieChart (document.getElementById('myChart'));
Bánh 3D
Để hiển thị Pie ở chế độ 3D, chỉ cần thêm is3D: true vào các tùy chọn:
const options = {
title: 'World Wide Wine Production',
is3D: true
};