VIỆN CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ITPLUS
ITPLUS INSTITUTE OF INFORMATION AND COMMUNICATION TECHNOLOGY
VẼ BIỂU ĐỒ TRONG ỨNG DỤNG ANDROID SỬ DỤNG MPANDROIDCHART
Giới thiệu:
Khi tạo ứng dụng android, chúng ta thường hay sử dụng các thành phần như: Listview, Gridview, Recyclerview…để hiển thị dữ liệu. Tuy nhiên, với những ứng dụng cần thống kê nhiều dữ liệu, cung cấp cho người dùng giao diện trực quan hơn để xem kết quả. Ví dụ như: thống kê chi tiêu hàng tháng, thống kê điểm thi của sinh viên theo học kỳ, theo môn học v.v…thì việc lựa chọn biểu đồ (chart) là cách tốt nhất.
Bài viết này sẽ giúp bạn hiểu và sử dụng được thư viện mã nguồn mở MPAndroidChart, để tạo các biểu đồ một cách dễ dàng trong ứng dụng.
Trước khi sử dụng được thư viện này, bạn cần thêm vào project Android theo các bước dưới đây:
Bước 1: Download phiên bản mới nhất từ Github. Phiên bản hiện tại giới thiệu trong bài viết là 3.0.1
http://github.com/PhilJay/MPAndroidChart/releases
Bước 2: Copy mpandroidchartlibrary-3-0-1.jar vào thư mục applibs trong project
Bước 3: Trong AndroidStudio, click chuột phải vào gói jar đó và chọn Add as Library.
DataSet là thuật ngữ chung chỉ nguồn dữ liệu bạn muốn hiển thị lên biểu đồ. Do đó, trước khi muốn vẽ biểu đồ (dạng Pie, Line, Bar…) bạn cần chuẩn bị nguồn dữ liệu. Với mỗi dạng biểu đồ khác nhau, MPChart cung cấp những class khác nhau để sử dụng, ví dụ, tạo một BarChart sử dụng BarDataSet, PieChart sử dụng PieDataSet.
Ví dụ: Bạn cần tạo một biểu đồ thống kê số lượng cuộc gọi theo tháng giữa hai người bạn tên là Alice và Bob. Dữ liệu được mô tả theo bảng dưới đây:
.png)
Để hiển thị số liệu này trong ứng dụng, chúng ta sử dụng BarChart cho trực quan. Bước đầu tiên, cần chuẩn bị nguồn dữ liệu là DataSet, bằng cách tạo một BarDataSet.
Tạo một đối tượng để quản lý các thông tin số lượng cuộc gọi và tháng gọi, tên là BarEntry.
Danh sách các đối tượng này được lưu trữ trong một Collections, chúng ta sử dụng ArrayList.
.png)
Tạo BarDataSet từ ArrayList vừa khởi tạo:
.png)
Định nghĩa nhãn cho trục hoành X-Axis(trục nằm ngang) là các tháng. Mỗi X-Axis sử dụng một danh sách các String, được khởi tạo như sau:
.png)
Bạn có thể tạo một biểu đồ bằng cách sử dụng XML file hoặc java code. Dưới đây là đoạn code java tạo một chart:
BarChart chart = new BarChart(context);
setContentView(chart);
Tạo dữ liệu cho biểu đồ:
BarData data = new BarData(labels, dataset);
chart.setData(data);
Bổ sung mô tả:
chart.setDescription("# of times Alice called Bob");
Đây là kết quả:
.png)
1. Sử dụng màu sắc cho biểu đồ
Nếu bạn không muốn sử dụng màu mặc định của các biểu đồ, bạn có thể thay đổi màu sắc bằng cách sử dụng phương thức setColors của DataSet.
Ví dụ:
dataset.setColos(ColorTemplate.COLORFUL _COLORS) ;
Một vài màu sắc hỗ trợ như sau:
Đây là kết quả:
.png)
Khi biểu đồ xuất hiện, bạn có thể bổ sung các hiệu ứng vẽ theo trục X và Y. Việc làm này giúp ứng dụng của bạn chuyên nghiệp và đẹp mắt hơn. Chúng ta sử dụng đối tượng của các lớp Chart tương ứng gọi phương thức animateXY, hoặc animateX, animateY tùy theo bạn muốn thêm hiệu ứng vẽ trục tung hay trục hoành.
Ngoài ra, bạn còn có thể chỉ ra thời gian áp dụng hiệu ứng từ khi bắt đầu đến khi kết thúc (duration) bằng cách chỉ ra thời gian milliseconds.
Ví dụ:
chart.animateY(5000);
MPAndroidChart cho phép bạn lưu lại hình ảnh của biểu đồ. Muốn làm được điều này bạn cần cung cấp quyền ghi dữ liệu vào thẻ nhớ (SD Card) bằng cách khai báo trong AndroidManifest.xml
.png)
Để lưu ảnh một biểu đồ bạn có thể sử dụng một trong 2 phương thức sau:
saveToGallery: phương thức này lưu ảnh biểu đồ dưới định dạng JPEG.saveToPath: lưu ảnh biểu đồ dưới định dạng PNG vào đường dẫn bạn chỉ ra.Ví dụ:
chart.saveToGallery("mychart.jpg", 85);
Kết luận:
Trong bài hướng dẫn này, chúng ta đã biết cách sử dụng bộ thư viện MPAndroidChart để tạo một biểu đồ trong ứng dụng Android. Nó rất hữu ích cho các chức năng thống kê của ứng dụng. Ngoài ví dụ BarChart ra bạn có thể sử dụng các dạng biểu đồ khác nữa như: LineChart, PieChart, BubbleChart, ScatterChart…
Để hiểu rõ hơn những tính năng khác, bạn nên tham khảo thêm phần tài liệu và các ví dụ tại Github của MPAndroidChart.
<Nguồn tham khảo: https://code.tutsplus.com>
.jpg)
