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?
1. Thêm phần tử <div> (có id duy nhất) vào HTML nơi bạn muốn hiển thị biểu đồ:
<div id="myChart" style="max-width:700px; height:400px"></div>
2. Thêm liên kết vào trình tải biểu đồ:
<script src="https://www.gstatic.com/charts/loader.js"></script>
3. Tải API Đồ thị và thêm hàm để chạy khi API được tải:
<script>
google.charts.load('current',{packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Your Function
function drawChart() {
...
}
</script>
Biểu đồ thanh
Mã nguồn
function drawChart() {
// Set Data
const data = google.visualization.arrayToDataTable([
['Contry', 'Mhl'],
['Italy', 55],
['France', 49],
['Spain', 44],
['USA', 24],
['Argentina', 15]
]);
// Set Options
const options = {
title: 'World Wide Wine Production'
};
// Draw
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
};
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.ScatterChart(document.getElementById('myChart'));