Hướng dẫn sử dụng biểu đồ cột (Bar Chart) trong Android

Tổng quan

Ví dụ này minh họa cách sử dụng biểu đồ cột (Bar Chart) trong ứng dụng Android bằng thư viện MPAndroidChart phổ biến.

Các bước thực hiện

Bước 1: Tạo dự án mới

Mở Android Studio, chọn File → New Project và điền đầy đủ thông tin để tạo dự án mới.

Bước 2: Thêm thư viện vào build.gradle (cấp module)

Mở file build.gradle (Module: app) và thêm dependency sau vào khối dependencies:

implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0-alpha'

Đồng thời cấu hình packagingOptions để loại bỏ các file xung đột:

packagingOptions {
    exclude 'META-INF/proguard/androidx-annotations.pro'
    exclude 'META-INF/DEPENDENCIES'
    exclude 'META-INF/LICENSE'
    exclude 'META-INF/LICENSE.txt'
    exclude 'META-INF/license.txt'
    exclude 'META-INF/NOTICE'
    exclude 'META-INF/NOTICE.txt'
    exclude 'META-INF/notice.txt'
    exclude 'META-INF/ASL2.0'
}

Bước 3: Cấu hình repository trong build.gradle (cấp project)

Mở file build.gradle (Project) và thêm repository JitPack vào khối allprojects → repositories:

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}

Bước 4: Thêm BarChart vào layout

Mở res/layout/activity_main.xml và thêm view BarChart:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.github.mikephil.charting.charts.BarChart
        android:id="@+id/barChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Bước 5: Viết code xử lý trong MainActivity.java

package com.example.barchartexample;

import android.graphics.Color;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.utils.ColorTemplate;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private BarChart barChart;
    private BarData barData;
    private BarDataSet barDataSet;
    private ArrayList<BarEntry> barEntries;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        barChart = findViewById(R.id.barChart);
        getEntries();

        barDataSet = new BarDataSet(barEntries, "Dữ liệu mẫu");
        barData = new BarData(barDataSet);
        barChart.setData(barData);

        // Tùy chỉnh giao diện
        barDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
        barDataSet.setValueTextColor(Color.BLACK);
        barDataSet.setValueTextSize(18f);
        barChart.getDescription().setEnabled(false);
        barChart.animateY(1000);
    }

    private void getEntries() {
        barEntries = new ArrayList<>();
        barEntries.add(new BarEntry(0, 2f));
        barEntries.add(new BarEntry(1, 4f));
        barEntries.add(new BarEntry(2, 6f));
        barEntries.add(new BarEntry(3, 8f));
        barEntries.add(new BarEntry(4, 7f));
        barEntries.add(new BarEntry(5, 3f));
    }
}

Chạy ứng dụng

Kết nối thiết bị Android thật hoặc sử dụng emulator. Nhấn nút Run (biểu tượng tam giác xanh) trên thanh công cụ Android Studio, chọn thiết bị và chạy ứng dụng. Màn hình sẽ hiển thị biểu đồ cột với các giá trị dữ liệu đã định nghĩa.

Hình ảnh minh họa biểu đồ cột được vẽ dựa trên tập dữ liệu mẫu.