Đồ thị Google

Từ biểu đồ đường đơn giản đến biểu đồ cây đa tầng phức tạp, thư viện biểu đồ Google cung cấp nhiều loại biểu đồ sẵn sàng sử dụng:

  • Biểu đồ điểm rơi (Scatter Chart)
  • Biểu đồ đường (Line Chart)
  • Biểu đồ thẳng đứng/Trụ (Bar / Column Chart)
  • Biểu đồ diện tích (Area Chart)
  • Biểu đồ bánh (Pie Chart)
  • Biểu đồ bánh (Donut Chart)
  • Bản đồ tổ chức (Org Chart)
  • Bản đồ/Đồ thị địa lý (Map / Geo Chart)

Làm thế nào để sử dụng Google Chart?

Nếu bạn muốn sử dụng Google Chart trong trang web của mình, hãyThêm liên kết đến trình cài đặt biểu đồ:

<script
src="https://www.gstatic.com/charts/loader.js">
</script>

Google Chart dễ sử dụng.

Chỉ cần thêm một <div> Element này có thể hiển thị biểu đồ:

<div id="myChart" style="max-width:700px; height:400px"></div>

Element <div> phải có một ID duy nhất.

Sau đó tải Google Graph API:

  1. Tải Visualization API và gói corechart
  2. Đặt một hàm gọi lại, được gọi khi API được tải xong
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

Vậy là xong rồi!}

Biểu đồ đường

Mã nguồn

function drawChart() {
// Đặt dữ liệu
var data = google.visualization.arrayToDataTable([
  ['Giá', 'Kích thước'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]
// Đặt tùy chọn
var options = {
  title: 'Giá nhà và diện tích nhà'
  hAxis: {title: 'M2'},
  vAxis: {title: 'Giá triệu'},
  legend: 'none'
};
// Vẽ biểu đồ
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Thử trực tiếp

Biểu đồ điểm rơi

cùng dữ liệu tương tự để tạoBiểu đồ điểm rơi, hãy thay thế google.visualization thay đổi thành ScatterChart:

var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));

Thử trực tiếp

Biểu đồ thanh

Mã nguồn

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['Ý', 55],
  ['Pháp', 49],
  ['Tây Ban Nha', 44],
  ['Mỹ', 24],
  
]
var options = {
  title: 'Sản xuất rượu vang toàn cầu'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Thử trực tiếp

Biểu đồ tròn

Nếu muốn chuyển đổi biểu đồ thanh thànhBiểu đồ trònChỉ cần sử dụng:

google.visualization.PieChart

Thay thế:

google.visualization.BarChart

var chart = new google.visualization.PieChart(document.getElementById('myChart'));

Thử trực tiếp

Biểu đồ tròn 3D

Nếu muốn hiển thị biểu đồ tròn 3D, chỉ cần is3D: true thêm vào các tùy chọn:

var options = {
  title: 'Sản xuất rượu vang toàn cầu',
  is3D: true
};

Thử trực tiếp