Hướng dẫn sử dụng biểu đồ bong bóng (Bubble Chart) trong Android

Tổng quan

Biểu đồ bong bóng (Bubble Chart) mở rộng từ Scatter Chart: mỗi điểm dữ liệu có 3 chiều - X, Y, và Size (kích thước bong bóng). Phù hợp thể hiện 3 biến số cùng lúc.

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

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

Android Studio → File → New Project → Empty Activity.

Bước 2-3: Cấu hình Gradle (MPAndroidChart + JitPack)

Bước 4: Layout với BubbleChart (activity_main.xml)

<?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.BubbleChart
        android:id="@+id/bubbleChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Bước 5: MainActivity.java

package com.example.bubblechartexample;

import android.graphics.Color;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.github.mikephil.charting.charts.BubbleChart;
import com.github.mikephil.charting.data.BubbleData;
import com.github.mikephil.charting.data.BubbleDataSet;
import com.github.mikephil.charting.data.BubbleEntry;
import com.github.mikephil.charting.utils.ColorTemplate;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private BubbleChart bubbleChart;
    private BubbleData bubbleData;
    private BubbleDataSet bubbleDataSet;
    private ArrayList<BubbleEntry> bubbleEntries;

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

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

        bubbleDataSet = new BubbleDataSet(bubbleEntries, "Sản phẩm");
        bubbleData = new BubbleData(bubbleDataSet);
        bubbleChart.setData(bubbleData);

        // Tùy chỉnh
        bubbleDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
        bubbleDataSet.setValueTextColor(Color.BLACK);
        bubbleDataSet.setValueTextSize(12f);
        bubbleDataSet.setHighlightCircleWidth(2f);

        bubbleChart.getDescription().setEnabled(false);
        bubbleChart.getXAxis().setPosition(com.github.mikephil.charting.components.XAxis.XAxisPosition.BOTTOM);
        bubbleChart.animateXY(1500, 1500);
    }

    private void getEntries() {
        bubbleEntries = new ArrayList<>();
        // BubbleEntry(x, y, size)
        // x: trục ngang, y: trục dọc, size: diện tích bong bóng (tương đối)
        bubbleEntries.add(new BubbleEntry(0, 10, 50f));   // Sản phẩm A
        bubbleEntries.add(new BubbleEntry(1, 20, 80f));   // Sản phẩm B
        bubbleEntries.add(new BubbleEntry(2, 15, 120f));  // Sản phẩm C (lớn nhất)
        bubbleEntries.add(new BubbleEntry(3, 30, 60f));   // Sản phẩm D
        bubbleEntries.add(new BubbleEntry(4, 25, 90f));   // Sản phẩm E
        bubbleEntries.add(new BubbleEntry(5, 35, 40f));   // Sản phẩm F (nhỏ nhất)
    }
}

Giải thích BubbleEntry

new BubbleEntry(x, y, size):

• x: vị trí trục X (thường là danh mục, thời gian)
• y: giá trị trục Y (doanh số, điểm số...)
• size: kích thước bong bóng (lợi nhuận, market share, lượng bán...)

Kích thước là giá trị tương đối - MPAndroidChart tự scale để bong bóng lớn nhất vừa màn hình.

Kết quả

Các bong bóng tròn với kích thước khác nhau phân bố trên mặt phẳng X-Y.

Ứng dụng thực tế

Multiple DataSets

BubbleDataSet ds1 = new BubbleDataSet(entriesQ1, "Quý 1");
ds1.setColor(Color.RED);
BubbleDataSet ds2 = new BubbleDataSet(entriesQ2, "Quý 2");
ds2.setColor(Color.BLUE);
BubbleData data = new BubbleData(ds1, ds2);
bubbleChart.setData(data);

Lưu ý

• Bong bóng quá lớn có thể che khuất bong bóng nhỏ → điều chỉnh setMaxSize()
• Cần legend rõ ràng để người dùng hiểu ý nghĩa 3 chiều
• Tooltip (marker view) rất hữu ích cho Bubble Chart