Tạo biểu đồ trực quan với Google Charts trong JavaScript

Javascript căn bản | 02/06/2025 by Học Javascript

Biểu đồ là một công cụ mạnh mẽ trong việc trình bày và phân tích dữ liệu, giúp người dùng nhanh chóng nhận diện được các xu hướng, sự thay đổi, và mối quan hệ giữa các yếu tố. Trong thế giới ngày nay, việc tích hợp biểu đồ vào các ứng dụng web trở nên vô cùng quan trọng, đặc biệt là trong các báo cáo, bảng điều khiển và phân tích dữ liệu. Google Charts là một trong những thư viện phổ biến và dễ sử dụng giúp tạo ra những biểu đồ trực quan và tương tác một cách nhanh chóng và hiệu quả.

Với khả năng hỗ trợ nhiều loại biểu đồ đa dạng, tính năng tương tác mượt mà và dễ dàng tích hợp vào các ứng dụng web, Google Charts đã trở thành lựa chọn hàng đầu cho các nhà phát triển web. Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách sử dụng Google Charts để tạo ra các biểu đồ đẹp mắt và trực quan, từ đó giúp nâng cao trải nghiệm người dùng và cung cấp thông tin dữ liệu một cách dễ hiểu và trực quan nhất.

Giới thiệu Google Charts bằng JavaScript

Google Charts là một thư viện JavaScript mạnh mẽ và miễn phí do Google phát triển, được thiết kế để tạo ra các biểu đồ động và trực quan cho các ứng dụng web. Với Google Charts, bạn có thể dễ dàng tạo các biểu đồ đẹp mắt từ dữ liệu dưới dạng biểu đồ cột, đường, tròn, và nhiều loại khác, mà không cần phải sử dụng bất kỳ phần mềm backend phức tạp nào.

Google Charts là gì?

Google Charts là một thư viện dựa trên JavaScript, cho phép người dùng xây dựng và hiển thị các biểu đồ động trực tiếp trên trang web. Google Charts sử dụng các API dựa trên HTML5, SVG, và VML để tạo các biểu đồ với khả năng tương tác mạnh mẽ, chẳng hạn như tooltip, zoom, và các tính năng kéo thả. Với Google Charts, bạn có thể dễ dàng tạo các biểu đồ từ những dữ liệu đơn giản hoặc phức tạp mà không cần phải lo lắng về việc lập trình biểu đồ từ đầu.

Ưu điểm nổi bật của Google Charts

Hỗ trợ nhiều loại biểu đồ: Google Charts cung cấp một danh mục rộng rãi các loại biểu đồ, từ biểu đồ cơ bản như biểu đồ đường, cột, tròn, đến các biểu đồ phức tạp hơn như biểu đồ phân tán (scatter), biểu đồ ba chiều (3D), và biểu đồ bản đồ địa lý. Điều này cho phép người dùng linh hoạt lựa chọn loại biểu đồ phù hợp với nhu cầu hiển thị dữ liệu.
Giao diện đẹp, tương tác tốt: Các biểu đồ được tạo ra bằng Google Charts không chỉ đẹp mắt mà còn có khả năng tương tác cao. Người dùng có thể dễ dàng thao tác với biểu đồ qua các tính năng như tooltip (hiển thị thông tin khi di chuột vào điểm dữ liệu), zoom (phóng to hoặc thu nhỏ biểu đồ), và drilldown (khám phá các chi tiết biểu đồ khi nhấn vào phần tử).
Dễ dàng nhúng vào website mà không cần backend: Google Charts hoạt động hoàn toàn trên nền tảng front-end, điều này giúp các nhà phát triển dễ dàng tích hợp biểu đồ vào trang web mà không cần phải thiết lập một backend phức tạp. Người dùng chỉ cần truy cập vào Google Charts qua Google Loader hoặc sử dụng các file JavaScript trực tiếp từ CDN của Google.
Miễn phí và dễ sử dụng: Google Charts là một thư viện mã nguồn mở, miễn phí, và có tài liệu hướng dẫn rất chi tiết, dễ tiếp cận cho cả người mới bắt đầu. Việc tích hợp Google Charts vào dự án web của bạn chỉ cần vài bước đơn giản mà không cần quá nhiều kiến thức chuyên sâu về lập trình đồ họa.
Tích hợp tốt với các công cụ Google: Một điểm cộng của Google Charts là nó tích hợp mượt mà với các công cụ và dịch vụ khác của Google, chẳng hạn như Google Sheets. Bạn có thể dễ dàng sử dụng dữ liệu trực tiếp từ bảng tính Google Sheets để tạo biểu đồ mà không cần phải làm việc với các tệp dữ liệu phức tạp.

Với những ưu điểm này, Google Charts trở thành một lựa chọn lý tưởng để tạo các biểu đồ trực quan, đẹp mắt và tương tác cho các ứng dụng web.

Cách cài đặt và sử dụng cơ bản bằng JavaScript

Google Charts là một thư viện dễ sử dụng và tích hợp nhanh chóng vào ứng dụng web của bạn. Để bắt đầu, bạn cần tải thư viện bằng cách sử dụng Google Loader (CDN) và làm theo các bước đơn giản để tạo ra biểu đồ đầu tiên.

Tải thư viện bằng Google Loader (CDN)

Bạn có thể tải Google Charts thông qua Google CDN. Để làm điều này, chỉ cần thêm đoạn mã sau vào trong phần <head> của trang HTML của bạn:

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

Đoạn mã này sẽ tải thư viện Google Charts từ Google CDN, đảm bảo bạn luôn sử dụng phiên bản mới nhất của thư viện mà không cần phải tải về máy chủ của mình.

Khởi tạo biểu đồ đầu tiên

Load Thư Viện: Trước tiên, bạn cần phải tải thư viện Google Charts. Bạn làm điều này bằng cách sử dụng phương thức google.charts.load() để tải các gói cần thiết.
Khai Báo google.charts.load() và google.charts.setOnLoadCallback(): Để khởi tạo biểu đồ, bạn sử dụng phương thức google.charts.load() để chỉ định gói biểu đồ bạn muốn sử dụng. Sau khi thư viện đã được tải, bạn có thể khai báo một callback function thông qua google.charts.setOnLoadCallback().

<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart', 'bar']}); // Chọn các gói cần thiết
  google.charts.setOnLoadCallback(drawChart); // Gọi hàm vẽ biểu đồ khi thư viện được tải xong
</script>

Tạo dữ liệu và gọi google.visualization.ChartType: Sau khi thư viện được tải, bạn tạo dữ liệu cho biểu đồ và gọi google.visualization.ChartType (ví dụ: google.visualization.BarChart cho biểu đồ cột).

Ví dụ tạo biểu đồ cột:

<script type="text/javascript">
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Sales'],
      ['January', 1000],
      ['February', 1200],
      ['March', 1300]
    ]);

    var options = {
      title: 'Sales Over Time',
      hAxis: {title: 'Month'},
      vAxis: {title: 'Sales'}
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

<div id="chart_div"></div> <!-- Đây là nơi hiển thị biểu đồ -->

Các loại biểu đồ phổ biến bằng JavaScript

Google Charts hỗ trợ rất nhiều loại biểu đồ khác nhau, từ những biểu đồ cơ bản đến các biểu đồ phân tích nâng cao. Dưới đây là một số loại biểu đồ phổ biến bạn có thể sử dụng:

Biểu Đồ Cơ Bản:

Line Chart (Biểu đồ đường): Dùng để hiển thị sự thay đổi của một hoặc nhiều dữ liệu theo thời gian.
Bar Chart (Biểu đồ cột): Thích hợp để so sánh các giá trị giữa các nhóm khác nhau.
Column Chart (Biểu đồ cột dọc): Tương tự như Bar Chart nhưng các cột được vẽ theo chiều dọc.
Pie Chart (Biểu đồ tròn): Biểu đồ tròn dùng để thể hiện tỷ lệ phần trăm của các phần trong tổng thể.

Biểu Đồ Thống Kê:

Area Chart (Biểu đồ diện tích): Thể hiện sự thay đổi của dữ liệu theo thời gian nhưng có phần diện tích dưới đường biểu diễn.
Combo Chart (Biểu đồ kết hợp): Kết hợp nhiều loại biểu đồ vào cùng một biểu đồ (ví dụ: cột và đường), giúp bạn so sánh dữ liệu theo nhiều góc độ khác nhau.

Biểu Đồ Phân Tích Nâng Cao:

Geo Chart (Biểu đồ bản đồ): Dùng để thể hiện dữ liệu địa lý trên bản đồ.
Timeline (Biểu đồ dòng thời gian): Hiển thị sự thay đổi của sự kiện theo thời gian.
Gauge (Biểu đồ đồng hồ): Dùng để hiển thị tiến độ hoặc giá trị trong một khoảng từ 0 đến một giá trị tối đa.
Scatter Chart (Biểu đồ phân tán): Dùng để phân tích mối quan hệ giữa hai biến số.

Biểu Đồ Dạng Bảng và Số Liệu:

Table (Biểu đồ bảng): Hiển thị dữ liệu dưới dạng bảng.
Number (Biểu đồ số liệu): Dùng để hiển thị một số liệu cụ thể, chẳng hạn như tổng số doanh thu hoặc lượng khách hàng.
Candlestick (Biểu đồ nến): Thường dùng trong phân tích tài chính, biểu đồ này thể hiện sự biến động của giá trị trong một khoảng thời gian.
Org Chart (Biểu đồ tổ chức): Dùng để thể hiện cơ cấu tổ chức của một công ty, cơ quan.

Cấu trúc biểu đồ Google Charts bằng JavaScript

DataTable: Dữ liệu cho biểu đồ được cung cấp dưới dạng đối tượng DataTable, trong đó bạn có thể khai báo dữ liệu dưới dạng mảng hoặc đối tượng JavaScript.

Ví dụ:

var data = google.visualization.arrayToDataTable([
  ['Month', 'Sales'],
  ['January', 1000],
  ['February', 1200],
  ['March', 1300]
]);

Options: Đây là đối tượng chứa các cấu hình cho biểu đồ như tiêu đề, màu sắc, trục tọa độ, và các hiệu ứng. Các tùy chọn này giúp bạn điều chỉnh cách hiển thị của biểu đồ sao cho phù hợp với yêu cầu.

Ví dụ:

var options = {
  title: 'Sales Over Time',
  hAxis: {title: 'Month'},
  vAxis: {title: 'Sales'}
};

Chart Object: Khi đã tạo xong dữ liệu và các tùy chọn, bạn sẽ sử dụng một đối tượng biểu đồ cụ thể (ví dụ: google.visualization.PieChart, google.visualization.BarChart,...) để vẽ biểu đồ trên một phần tử DOM nhất định.

Ví dụ:

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);

Google Charts là công cụ mạnh mẽ và linh hoạt, giúp bạn dễ dàng tạo ra các biểu đồ đẹp mắt và tương tác, phục vụ cho nhiều mục đích khác nhau trong việc trình bày và phân tích dữ liệu.

Tuỳ chỉnh và tương tác bằng JavaScript

Google Charts không chỉ giúp bạn tạo ra các biểu đồ đơn giản mà còn cung cấp nhiều tùy chọn để tuỳ chỉnh giao diện và thêm các tính năng tương tác, giúp người dùng có trải nghiệm trực quan và thú vị hơn. Dưới đây là các phương pháp tùy chỉnh và tạo tương tác cho biểu đồ của bạn.

Tuỳ chỉnh giao giện

Google Charts cho phép bạn tùy chỉnh nhiều khía cạnh của biểu đồ từ màu sắc, font chữ đến hiệu ứng chuyển động để biểu đồ trở nên sinh động và hấp dẫn hơn.

Màu Sắc: Bạn có thể thay đổi màu sắc của biểu đồ bằng cách sử dụng các thuộc tính trong options. Cụ thể, bạn có thể tùy chỉnh màu sắc cho từng phần tử trong biểu đồ (ví dụ: các phần của biểu đồ tròn, các cột trong biểu đồ cột, v.v.).

Ví dụ:

var options = {
  title: 'Sales Over Time',
  colors: ['#FF5733', '#33FF57', '#3357FF'],  // Thay đổi màu sắc của các thanh
  backgroundColor: '#f4f4f4',  // Màu nền của biểu đồ
};

Font Chữ: Để điều chỉnh font chữ, bạn có thể sử dụng thuộc tính fontName, fontSize, và fontWeight trong các tùy chọn tiêu đề, trục tọa độ, v.v.

Ví dụ:

var options = {
  title: 'Sales Over Time',
  titleTextStyle: {
    fontName: 'Arial',  // Chọn font chữ
    fontSize: 20,  // Kích thước chữ
    bold: true  // In đậm
  },
  hAxis: {
    titleTextStyle: {
      fontSize: 14,  // Kích thước font trục hoành
      italic: true  // Nghiêng chữ
    }
  },
};

Hiệu Ứng: Google Charts hỗ trợ các hiệu ứng như animation (hoạt hình) cho các biểu đồ. Bạn có thể điều chỉnh thời gian hoạt hình khi biểu đồ được vẽ.

Ví dụ:

var options = {
  title: 'Sales Over Time',
  animation: {
    startup: true,  // Bắt đầu hoạt hình khi biểu đồ xuất hiện
    duration: 1000,  // Thời gian hoạt hình (ms)
    easing: 'inAndOut'  // Kiểu hoạt hình
  },
};

Tương Tác

Google Charts cung cấp nhiều tính năng tương tác, cho phép người dùng tương tác trực tiếp với biểu đồ, chẳng hạn như xem thông tin chi tiết của từng điểm dữ liệu, thay đổi chế độ xem, và thậm chí lắng nghe các sự kiện do người dùng kích hoạt.

Tooltip: Tooltip là phần thông tin hiển thị khi người dùng di chuột qua một điểm trên biểu đồ. Google Charts tự động tạo tooltip cho các biểu đồ, nhưng bạn cũng có thể tùy chỉnh chúng để cung cấp thông tin chi tiết hơn.

Ví dụ:

var options = {
  title: 'Sales Over Time',
  tooltip: { isHtml: true },  // Hiển thị HTML trong tooltip
  tooltipText: 'Month: %s, Sales: %s'  // Tùy chỉnh nội dung tooltip
};

Click Event: Bạn có thể lắng nghe các sự kiện click để khi người dùng click vào một phần của biểu đồ, biểu đồ sẽ thực hiện một hành động nào đó (ví dụ: hiển thị thông tin chi tiết, thay đổi dữ liệu, v.v.).

Ví dụ, xử lý sự kiện click:

google.visualization.events.addListener(chart, 'click', function(event) {
  var rowIndex = event.row;
  var columnIndex = event.column;
  alert('You clicked on: Row ' + rowIndex + ', Column ' + columnIndex);
});

Chọn Điểm Dữ Liệu: Google Charts cũng cho phép bạn xử lý sự kiện chọn điểm dữ liệu. Khi người dùng chọn một phần của biểu đồ (ví dụ: một cột trong biểu đồ cột hoặc một phần của biểu đồ tròn), bạn có thể lấy thông tin chi tiết về phần tử đó.

Ví dụ:

google.visualization.events.addListener(chart, 'select', function() {
  var selection = chart.getSelection();
  alert('Selected point: ' + selection[0].row);
});

Kết Hợp Nhiều Biểu Đồ (Dashboard)

Google Charts hỗ trợ việc tạo các dashboard bằng cách kết hợp nhiều biểu đồ lại với nhau, giúp bạn trình bày dữ liệu một cách trực quan và hiệu quả.

Dùng ChartWrapper: ChartWrapper là một lớp giúp bạn quản lý và điều khiển các biểu đồ trong dashboard. Bạn có thể sử dụng ChartWrapper để dễ dàng tạo và tùy chỉnh nhiều biểu đồ.

Ví dụ:

var chartWrapper = new google.visualization.ChartWrapper({
  chartType: 'PieChart',
  dataTable: data,
  options: options,
  containerId: 'piechart'
});

Sử Dụng Dashboard: Dashboard là một thành phần cho phép kết hợp nhiều biểu đồ và điều khiển chúng thông qua các công cụ như ControlWrapper (công cụ điều khiển lọc dữ liệu).

Ví dụ:

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
dashboard.bind(controlWrapper, chartWrapper);
dashboard.draw(data);

ControlWrapper: ControlWrapper giúp bạn tạo các điều khiển như dropdown, slider hoặc checkbox để người dùng có thể lọc dữ liệu và thay đổi cách biểu đồ được vẽ.

Ví dụ:

var controlWrapper = new google.visualization.ControlWrapper({
  controlType: 'CategoryFilter',
  containerId: 'control_div',
  options: {
    filterColumnIndex: 0,  // Chỉ định cột dữ liệu để lọc
  }
});

Khi sử dụng kết hợp các thành phần này, bạn có thể tạo ra các dashboard mạnh mẽ, nơi người dùng có thể tương tác với dữ liệu một cách linh hoạt và dễ dàng.

Ứng dụng thực tế của Google Charts bằng JavaScript

Google Charts là một công cụ mạnh mẽ giúp bạn tạo ra các biểu đồ đẹp mắt và dễ dàng triển khai. Dưới đây là một số ứng dụng thực tế phổ biến của Google Charts trong các lĩnh vực khác nhau.

Dashboard doanh nghiệp theo dõi KPI, doanh thu

Mô tả ứng dụng: Một dashboard doanh nghiệp là công cụ quan trọng để theo dõi hiệu suất và các chỉ số quan trọng của tổ chức. Google Charts có thể được sử dụng để hiển thị các KPI (Key Performance Indicators) và dữ liệu doanh thu theo thời gian. Bạn có thể tạo ra một bảng điều khiển tổng hợp các biểu đồ như biểu đồ cột (Bar Chart) để theo dõi doanh thu hàng tháng, biểu đồ đường (Line Chart) để thể hiện xu hướng doanh thu theo thời gian, hoặc biểu đồ tròn (Pie Chart) để phân tích tỷ lệ doanh thu theo từng loại sản phẩm.

Ví dụ về ứng dụng:

Biểu đồ cột thể hiện doanh thu theo các vùng, quốc gia, hay các bộ phận.
Biểu đồ đường theo dõi sự thay đổi doanh thu trong từng tháng.
Biểu đồ tròn phân tích tỷ lệ doanh thu theo các sản phẩm, dịch vụ.

Ưu điểm:

Tạo ra giao diện tương tác giúp người quản lý dễ dàng theo dõi sự biến động của doanh thu và KPI.
Cung cấp cái nhìn trực quan và giúp đưa ra quyết định kinh doanh hiệu quả hơn.

Biểu đồ khảo sát hoặc thống kê dữ liệu lớn

Mô tả ứng dụng: Google Charts có thể được sử dụng để trình bày và phân tích các khảo sát hoặc các bộ dữ liệu lớn một cách hiệu quả. Ví dụ, khi thu thập dữ liệu từ một cuộc khảo sát, bạn có thể dùng biểu đồ cột để thể hiện sự phân bố câu trả lời cho từng câu hỏi, hoặc sử dụng biểu đồ pie để thể hiện tỷ lệ phần trăm các lựa chọn.

Ví dụ về ứng dụng:

Biểu đồ pie thể hiện tỷ lệ phần trăm của các lựa chọn trong một cuộc khảo sát, ví dụ: "Lựa chọn sản phẩm yêu thích" từ người tiêu dùng.
Biểu đồ radar dùng để hiển thị các chỉ số như mức độ hài lòng của khách hàng về các yếu tố khác nhau của dịch vụ.

Ưu điểm:

Cung cấp cái nhìn tổng thể về dữ liệu khảo sát.
Biểu đồ trực quan giúp dễ dàng phân tích và so sánh các nhóm dữ liệu.

Trình bày dữ liệu học tập, báo cáo cá nhân

Mô tả ứng dụng: Google Charts có thể được sử dụng trong các ứng dụng giáo dục để hiển thị dữ liệu học tập của sinh viên, học sinh hoặc nhân viên. Các biểu đồ có thể giúp hiển thị điểm số theo từng kỳ học, so sánh sự tiến bộ qua các giai đoạn, hoặc phân tích điểm mạnh, điểm yếu của học viên. Đây là một công cụ tuyệt vời cho giáo viên và học sinh trong việc theo dõi và đánh giá kết quả học tập.

Ví dụ về ứng dụng:

Biểu đồ đường thể hiện sự thay đổi điểm số của học sinh theo từng kỳ học.
Biểu đồ cột thể hiện sự phân bổ điểm số của học sinh qua các môn học.
Biểu đồ radar so sánh các môn học của học sinh, giúp chỉ ra môn học cần cải thiện.

Ưu điểm:

Tạo ra một báo cáo trực quan và dễ hiểu, giúp học viên dễ dàng nhận diện và cải thiện các kỹ năng học tập.
Cung cấp công cụ đánh giá tiến bộ học tập nhanh chóng và chính xác.

Kết hợp với Google Sheets để cập nhật dữ liệu động

Mô tả ứng dụng: Google Charts có thể được kết hợp với Google Sheets để cập nhật dữ liệu một cách động. Điều này đặc biệt hữu ích khi bạn muốn hiển thị dữ liệu được lưu trữ trên Google Sheets, và thay đổi dữ liệu trong Sheets sẽ tự động làm mới biểu đồ mà không cần phải tải lại trang. Tính năng này hữu ích khi bạn có dữ liệu thay đổi thường xuyên và cần biểu đồ luôn được cập nhật theo thời gian thực.

Ví dụ về ứng dụng:

Một dashboard doanh thu trong công ty, nơi dữ liệu doanh thu được lưu trữ trên Google Sheets và biểu đồ sẽ tự động cập nhật mỗi khi có thay đổi.
Một công cụ theo dõi tiến độ học tập, trong đó kết quả học tập của học sinh được ghi lại trong Google Sheets và biểu đồ theo dõi điểm số sẽ được cập nhật theo thời gian thực.

Ưu điểm:

Dễ dàng duy trì và quản lý dữ liệu động mà không cần phải thay đổi mã nguồn của biểu đồ.
Cung cấp sự linh hoạt trong việc cập nhật và trình bày dữ liệu mà không cần phải tải lại trang hoặc thay đổi code.

Kết bài

Google Charts là một công cụ mạnh mẽ và dễ sử dụng, phù hợp với nhiều nhu cầu khác nhau trong việc tạo biểu đồ trực quan trên web. Với các tính năng linh hoạt, từ việc hỗ trợ nhiều loại biểu đồ cơ bản đến các biểu đồ nâng cao và khả năng tùy chỉnh giao diện, Google Charts giúp người dùng dễ dàng tạo ra các biểu đồ đẹp mắt, tương tác và cập nhật dữ liệu động. Việc tích hợp với Google Sheets càng làm tăng tính tiện lợi khi cần quản lý và hiển thị dữ liệu thay đổi theo thời gian thực.

Nhờ những ưu điểm vượt trội như dễ sử dụng, hiệu suất cao và tính tương tác mạnh mẽ, Google Charts đã trở thành công cụ được ưa chuộng trong nhiều lĩnh vực, từ doanh nghiệp, giáo dục, đến các ứng dụng web yêu cầu phân tích và trình bày dữ liệu trực quan. Dù bạn là người mới bắt đầu hay đã có kinh nghiệm, Google Charts sẽ là sự lựa chọn lý tưởng giúp bạn tạo ra những biểu đồ trực quan, dễ hiểu và hiệu quả.