[Android] Xây dựng biểu đồ trong ứng dụng Android bằng thư viện MPAndroidChart

Đăng bởi : Admin | Lượt xem : 3921 | Chuyên mục : Android

Khi lập trình Android, nếu muốn hiển thị một lượng lớn dữ liệu chúng ta thường dùng ListView, GridView, RecycleView,…Tuy nhiên, trong một số trường hợp, như báo cáo, thống kê,…tính trực quan và bao quát được chú trọng thì sử dụng biểu đồ là một phương thức hợp lý.

 Khi lập trình Android, nếu muốn hiển thị một lượng lớn dữ liệu chúng ta thường dùng ListView, GridView, RecycleView,…Tuy nhiên, trong một số trường hợp, như báo cáo, thống kê,…tính trực quan và bao quát được chú trọng thì sử dụng biểu đồ là một phương thức hợp lý. Ở bài viết này, chúng ta sẽ cùng tìm hiểu thư viện MPChartAndroid, một trong những công cụ vẽ đồ thị phổ biến nhất hiện nay.

Bạn đang đọc: [Android] Xây dựng biểu đồ trong ứng dụng Android bằng thư viện MPAndroidChart

1. Thêm thư viện MPChartAndroid:

Để sử dụng thư viện MPChartAndroid, thứ nhất ta cần thêm dependencies cho Project. Có 2 cách để thêm :

  • Gradle Setup
    repositories {
        maven { url 'https://jitpack.io' }
    }
    
    dependencies {
        implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
    }
  • Maven Setup
    
    
        jitpack.io
       https://jitpack.io
    
    
    
    
        com.github.PhilJay
        MPAndroidChart
        v3.1.0
    

2. Tạo đối tượng DataSet

Tất cả dữ liệu muốn hiển thị sẽ được chuyển đổi trực tiếp từ đối tượng DataSet sang đồ thị. Với các kiểu đồ thị khác nhau, thư viện cung cấp các đối tượng riêng nhưng đều là lớp con của DataSet. Ví dụ như BarChart có BarDataSet, LineChart có LineDataSet,…
Ví dụ, trong trường hợp muốn thống kê doanh thu 6 tháng trong 2 quý đầu năm, ta sẽ sử dụng BarChart

 

Tháng
1
2
3
4
5
6

Doanh thu (triệu đồng)
10
14
18
19
18
22

Mỗi giá trị của 1 đơn vị chức năng trong đồ thị được trình diễn trải qua Entry. Một ArrayList những Entry sẽ được dùng để tạo ra một Dataset .

ArrayList entries = new ArrayList<>();
entries.add(new BarEntry(4f, 0));
entries.add(new BarEntry(8f, 1));
entries.add(new BarEntry(6f, 2));
entries.add(new BarEntry(12f, 3));
entries.add(new BarEntry(18f, 4));
entries.add(new BarEntry(9f, 5));

BarDataSet dataSet = new BarDataSet(entries, "data");

3.  Gán nhãn cho trục X:

Nếu chúng ta không gán nhãn cho trục X thì đồ thị sẽ chỉ hiển thị các con số 0,1,2… như vậy sẽ rất khó hiểu cho người dùng. Nhãn dán được setup thông qua một ArrayList

ArrayList labels = new ArrayList();
labels.add("January"); 
labels.add("February"); 
labels.add("March"); 
labels.add("April"); 
labels.add("May");
labels.add("June");

4.  Tạo biểu đồ:

Bạn hoàn toàn có thể thêm biểu đồ bằng những khởi tạo đối tượng người dùng trong Java code hoặc thêm trực tiếp trong file. xml. Trong trường hợp đồ thị chiếm hết màn hình hiển thị, thì việc khởi tạo từ Java code sẽ đơn thuần hơn .
Khởi tạo biểu đồ :

BarChart chart = new BarChart(context);
setContentView(chart);

Thêm tài liệu và nhãn dán cho biểu đồ :

BarData data = new BarData(labels, dataSet);
chart.setData(data);

5. Thêm màu sắc cho biểu đồ:

Để đổi màu cho đồ thị, ta sử dụng phương thức setColors của dataSet. Hiện tại, thư viện cung cấp các màu như sau:

  • ColorTemplate.LIBERTY_COLORS
  • ColorTemplate.COLORFUL_COLORS
  • ColorTemplate.JOYFUL_COLORS
  • ColorTemplate.PASTEL_COLORS
  • ColorTemplate.VORDIPLOM_COLORS
dataSet.setColors(ColorTemplate.COLORFUL_COLORS);

Kết quả thu được :

 

6. Thêm hình động cho biểu đồ:

Thư viện tương hỗ hình động cho toàn bộ những loại biểu đồ để phần hiển thị sinh động, mê hoặc hơn so với người dùng. Nếu cần hình động cho cả 2 trục của đồ thị, ta sử dụng phương pháp animateXY ( ), hoặc nếu chỉ vận dụng cho trục X hoặc Y, ta sử dụng phương pháp animateX ( ), animateY ( ) .
Ví dụ :

chart.animateY(5000);

7.  Lưu hình ảnh đồ thị:

MPAndroidChart cũng được cho phép bạn lưu trạng thái hiện tại của biểu đồ dưới dạng hình ảnh. Để sử dụng tính năng này, thứ nhất bạn cần cấp cho ứng dụng của mình quyền ghi vào Thẻ SD của thiết bị .
Tiếp theo, tất cả chúng ta có hai phương pháp để lựa chọn đó là :

  • saveToGallery: Phương pháp này lưu biểu đồ của bạn dưới dạng tệp JPEG. Nó cũng cho phép bạn cài đặt chất lượng hoặc tỷ lệ nén của hình ảnh.
  • saveToPath: Phương pháp này lưu biểu đồ của bạn dưới dạng tệp PNG vào đường dẫn bạn chỉ định.

Ví dụ :

chart.saveToGallery("chart.jpg", 90);

8. Kết luận:

Thông qua bài này, mình đã giới thiệu đến các bạn những đối tượng, thao tác và ví dụ cơ bản của thư viện MPChartAndroid. Để tìm hiểu chi tiết, cụ thể hơn bạn có thể đọc trực tiếp thư viện trên github: https://github.com/PhilJay/MPAndroidChart
 

Tài liệu tìm hiểu thêm :

  • https://code.tutsplus.com/tutorials/add-charts-to-your-android-app-using-mpandroidchart–cms-23335
  • https://github.com/PhilJay/MPAndroidChart
Rate this post
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments