Hướng dẫn sử dụng biểu đồ phân tán (Scatter Chart) trong Android

Tổng quan

Biểu đồ phân tán (Scatter Chart) hiển thị các điểm dữ liệu riêng lẻ trên mặt phẳng tọa độ, phù hợp để thể hiện mối quan hệ giữa 2 biến số, phân bố dữ liệu, outliers.

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 (giống Bar Chart)

Thêm dependency MPAndroidChart v3.1.0-alpha và repository JitPack.

Bước 4: Layout với ScatterChart (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.ScatterChart
        android:id="@+id/scatterChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Bước 5: MainActivity.java

package com.example.scatterchartexample;

import android.graphics.Color;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.github.mikephil.charting.charts.ScatterChart;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.ScatterData;
import com.github.mikephil.charting.data.ScatterDataSet;
import com.github.mikephil.charting.utils.ColorTemplate;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private ScatterChart scatterChart;
    private ScatterData scatterData;
    private ScatterDataSet scatterDataSet;
    private ArrayList<Entry> scatterEntries;

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

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

        scatterDataSet = new ScatterDataSet(scatterEntries, "Điểm dữ liệu");
        scatterData = new ScatterData(scatterDataSet);
        scatterChart.setData(scatterData);

        // Tùy chỉnh
        scatterDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
        scatterDataSet.setScatterShape(ScatterChart.ScatterShape.CIRCLE); // Hình tròn
        scatterDataSet.setScatterShapeSize(12f); // Kích thước điểm
        scatterDataSet.setValueTextColor(Color.BLACK);
        scatterDataSet.setValueTextSize(12f);
        
        scatterChart.getDescription().setEnabled(false);
        scatterChart.getXAxis().setPosition(com.github.mikephil.charting.components.XAxis.XAxisPosition.BOTTOM);
        scatterChart.animateXY(1000, 1000);
    }

    private void getEntries() {
        scatterEntries = new ArrayList<>();
        // Entry(x, y) - tọa độ điểm
        scatterEntries.add(new Entry(0, 2f));
        scatterEntries.add(new Entry(1, 4f));
        scatterEntries.add(new Entry(2, 6f));
        scatterEntries.add(new Entry(3, 8f));
        scatterEntries.add(new Entry(4, 7f));
        scatterEntries.add(new Entry(5, 3f));
        // Thêm nhiều điểm hơn để thấy rõ phân tán
        scatterEntries.add(new Entry(1.5f, 5f));
        scatterEntries.add(new Entry(2.5f, 4f));
        scatterEntries.add(new Entry(3.5f, 9f));
    }
}

Đặc điểm Scatter Chart

• Dùng Entry(x, y) thay vì BarEntry (chỉ có y)
• Các hình dạng điểm: CIRCLE, SQUARE, TRIANGLE, CROSS, X, CHEVRON_UP/DOWN
• Phù hợp: phân tích tương quan, phát hiện cụm (clusters), outliers

Kết quả

Màn hình hiển thị các điểm phân tán trên mặt phẳng tọa độ X-Y.

Mở rộng: Multiple DataSets

ArrayList<Entry> set1 = ...;
ArrayList<Entry> set2 = ...;

ScatterDataSet ds1 = new ScatterDataSet(set1, "Nhóm A");
ds1.setColor(Color.RED);
ds1.setScatterShape(ScatterChart.ScatterShape.CIRCLE);

ScatterDataSet ds2 = new ScatterDataSet(set2, "Nhóm B");
ds2.setColor(Color.BLUE);
ds2.setScatterShape(ScatterChart.ScatterShape.SQUARE);

ScatterData data = new ScatterData(ds1, ds2);
scatterChart.setData(data);