Google Chart

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

  • Đồ thị điểm rải (Scatter Chart)
  • Đồ thị đường (Line Chart)
  • Đồ thị thanh/đồ thị cột (Bar / Column Chart)
  • Đồ thị diện tích (Area Chart)
  • Đồ thị bánh mì (Pie Chart)
  • Đồ thị甜甜圈 (Donut Chart)
  • Đồ thị cấu trúc tổ chức (Org Chart)
  • Bản đồ/Đồ thị địa lý (Map / Geo Chart)

cách 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 tải 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> thành phần này có thể hiển thị biểu đồ:

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

<div>thành phần phải có một ID duy nhất.

thì tải Google Graph API:

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

vậy đó!

diagram đường

mã nguồn

function drawChart() {
// thiết lập 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]
  ]);
// thiết lập 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ử ngay

diagram điểm rải

cùng dữ liệu như để tạodiagram điểm rảivui lòng thay đổi google.visualization đổi thành ScatterChart:

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

Thử ngay

hình bìa

mã nguồn

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['Ý', 55],
  ['Pháp', 49],
  ['Tây Ban Nha', 44],
  ['Mỹ', 24],
  ['Argentina', 15]
]);
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ử ngay

Biểu đồ bánh mì

Nếu muốn chuyển đổi biểu đồ cột thànhBiểu đồ bánh mìchỉ cần sử dụng:

google.visualization.PieChart

Thay thế:

google.visualization.BarChart

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

Thử ngay

Biểu đồ bánh mì 3D

Nếu muốn hiển thị biểu đồ bánh mì 3D, chỉ cần đặt 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ử ngay