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

Tổng quan

Biểu đồ Radar (còn gọi Spider Chart, Web Chart) hiển thị dữ liệu đa chiều trên các trục phân chia từ trung tâm, phù hợp so sánh nhiều chỉ số (kỹ năng, hiệu suất, chỉ số tài chính...).

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 các bài Chart khác)

Dependency: implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0-alpha'
Repository: maven { url 'https://jitpack.io' }

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

</androidx.constraintlayout.widget.ConstraintLayout>

Bước 5: MainActivity.java

package com.example.radarchartexample;

import android.graphics.Color;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.github.mikephil.charting.charts.RadarChart;
import com.github.mikephil.charting.data.RadarData;
import com.github.mikephil.charting.data.RadarDataSet;
import com.github.mikephil.charting.data.RadarEntry;
import com.github.mikephil.charting.utils.ColorTemplate;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private RadarChart radarChart;
    private RadarData radarData;
    private RadarDataSet radarDataSet;
    private ArrayList<RadarEntry> radarEntries;

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

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

        radarDataSet = new RadarDataSet(radarEntries, "Kỹ năng");
        radarData = new RadarData(radarDataSet);
        radarChart.setData(radarData);

        // Tùy chỉnh
        radarDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
        radarDataSet.setValueTextColor(Color.BLACK);
        radarDataSet.setValueTextSize(12f);
        radarDataSet.setDrawFilled(true);
        radarDataSet.setFillColor(Color.argb(80, 255, 193, 7)); // Amber semi-transparent
        radarDataSet.setFillAlpha(80);

        radarChart.getDescription().setEnabled(false);
        radarChart.setWebColor(Color.LTGRAY);
        radarChart.setWebColorInner(Color.GRAY);
        radarChart.setWebAlpha(100);
        radarChart.animateXY(1000, 1000);
    }

    private void getEntries() {
        radarEntries = new ArrayList<>();
        // RadarEntry(index, value) - index = trục (0,1,2...), value = giá trị
        radarEntries.add(new RadarEntry(0, 0.8f)); // Java
        radarEntries.add(new RadarEntry(1, 0.6f)); // Kotlin
        radarEntries.add(new RadarEntry(2, 0.9f)); // Android SDK
        radarEntries.add(new RadarEntry(3, 0.7f)); // UI/UX
        radarEntries.add(new RadarEntry(4, 0.5f)); // Backend
        radarEntries.add(new RadarEntry(5, 0.85f)); // Testing
    }
}

Cấu hình nhãn trục (Labels)

Mặc định RadarChart không hiển thị nhãn trục. Thêm:

String[] labels = {"Java", "Kotlin", "Android SDK", "UI/UX", "Backend", "Testing"};
radarChart.getXAxis().setValueFormatter(new IndexAxisValueFormatter(labels));
radarChart.getXAxis().setTextSize(11f);

Cần import: com.github.mikephil.charting.formatter.IndexAxisValueFormatter

Kết quả

Biểu đồ radar hình mạng nhện với 6 trục, khu vực tô màu thể hiện mức độ kỹ năng.

So sánh nhiều DataSet (ví dụ: 2 nhân viên)

ArrayList<RadarEntry> emp1 = ...; // entries nhân viên 1
ArrayList<RadarEntry> emp2 = ...; // entries nhân viên 2

RadarDataSet ds1 = new RadarDataSet(emp1, "Nhân viên A");
ds1.setColor(Color.RED);
ds1.setFillColor(Color.argb(80, 255, 0, 0));

RadarDataSet ds2 = new RadarDataSet(emp2, "Nhân viên B");
ds2.setColor(Color.BLUE);
ds2.setFillColor(Color.argb(80, 0, 0, 255));

RadarData data = new RadarData(ds1, ds2);
radarChart.setData(data);

Lưu ý

• Giá trị RadarEntry nên chuẩn hóa 0-1 hoặc 0-100 để so sánh công bằng
• Số lượng entry = số trục = số nhãn
• RadarChart phù hợp so sánh hồ sơ năng lực, chỉ số sức khỏe, đánh giá sản phẩm