วิธีใช้ Radar Chart ใน Android

สร้าง Radar Chart (กราฟเรดาร์/แมงมุม) ด้วย MPAndroidChart

Radar Chart (Spider Chart) ใช้เปรียบเทียบหลายมิติ/ตัวแปรพร้อมกัน เหมาะสำหรับ: ประเมินผลพนักงาน, เปรียบเทียบสเปคโทรศัพท์, วิเคราะห์ทักษะ, Health Metrics

ขั้นตอนที่ 1: สร้างโปรเจกต์และเพิ่ม Dependency

เพิ่มใน build.gradle (Module):

dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}

Project-level: เพิ่ม maven { url 'https://jitpack.io' }

ขั้นตอนที่ 2: Layout - 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"
        android:layout_margin="24dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

ขั้นตอนที่ 3: MainActivity.java - Radar Chart พื้นฐาน

package com.example.radarchartdemo;

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;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RadarChart radarChart;

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

        radarChart = findViewById(R.id.radarChart);
        setupRadarChart();
    }

    private void setupRadarChart() {
        // 1. Labels (มิติ/แกน) - จำนวนต้องเท่ากับค่าใน RadarEntry
        String[] labels = {"ความเร็ว", "ความแข็งแรง", "ความคล่องตัว", "ความทนทาน", "ปฏิบัติการ", "ความฉลาด"};

        // 2. ข้อมูล Series 1 (เช่น นักกีฬา A)
        List<RadarEntry> entries1 = new ArrayList<>();
        entries1.add(new RadarEntry(85f)); // ความเร็ว
        entries1.add(new RadarEntry(90f)); // ความแข็งแรง
        entries1.add(new RadarEntry(75f)); // ความคล่องตัว
        entries1.add(new RadarEntry(80f)); // ความทนทาน
        entries1.add(new RadarEntry(70f)); // ปฏิบัติการ
        entries1.add(new RadarEntry(95f)); // ความฉลาด

        // 3. ข้อมูล Series 2 (เช่น นักกีฬา B) - เปรียบเทียบ
        List<RadarEntry> entries2 = new ArrayList<>();
        entries2.add(new RadarEntry(70f));
        entries2.add(new RadarEntry(80f));
        entries2.add(new RadarEntry(90f));
        entries2.add(new RadarEntry(85f));
        entries2.add(new RadarEntry(95f));
        entries2.add(new RadarEntry(60f));

        // 4. สร้าง DataSet
        RadarDataSet dataSet1 = new RadarDataSet(entries1, "นักกีฬา A");
        dataSet1.setColor(Color.RED);
        dataSet1.setFillColor(Color.RED);
        dataSet1.setDrawFilled(true);
        dataSet1.setFillAlpha(60);
        dataSet1.setLineWidth(2f);
        dataSet1.setValueTextColor(Color.RED);
        dataSet1.setValueTextSize(10f);

        RadarDataSet dataSet2 = new RadarDataSet(entries2, "นักกีฬา B");
        dataSet2.setColor(Color.BLUE);
        dataSet2.setFillColor(Color.BLUE);
        dataSet2.setDrawFilled(true);
        dataSet2.setFillAlpha(60);
        dataSet2.setLineWidth(2f);
        dataSet2.setValueTextColor(Color.BLUE);
        dataSet2.setValueTextSize(10f);

        // 5. สร้าง RadarData และเซ็ต Labels
        RadarData radarData = new RadarData(dataSet1, dataSet2);
        radarData.setLabels(labels);
        radarChart.setData(radarData);

        // 6. ปรับแต่ง Chart
        customizeRadarChart();
    }

    private void customizeRadarChart() {
        // Web (เส้นวงกลม/เส้นรัศมี)
        radarChart.getDescription().setEnabled(false);
        radarChart.setWebLineWidth(1f);
        radarChart.setWebLineWidthInner(1f);
        radarChart.setWebColor(Color.LTGRAY);
        radarChart.setWebColorInner(Color.LTGRAY);
        radarChart.setWebAlpha(100);

        // Y Axis (ค่าระดับ)
        radarChart.getYAxis().setAxisMinimum(0f);
        radarChart.getYAxis().setAxisMaximum(100f);
        radarChart.getYAxis().setLabelCount(6, true);
        radarChart.getYAxis().setTextSize(10f);
        radarChart.getYAxis().setDrawLabels(false); // ซ่อนตัวเลขด้านข้าง

        // X Axis (Labels)
        radarChart.getXAxis().setTextSize(12f);
        radarChart.getXAxis().setTextColor(Color.BLACK);

        // Legend
        radarChart.getLegend().setEnabled(true);
        radarChart.getLegend().setVerticalAlignment(com.github.mikephil.charting.components.Legend.LegendVerticalAlignment.BOTTOM);
        radarChart.getLegend().setHorizontalAlignment(com.github.mikephil.charting.components.Legend.LegendHorizontalAlignment.CENTER);
        radarChart.getLegend().setOrientation(com.github.mikephil.charting.components.Legend.LegendOrientation.HORIZONTAL);

        // Rotation & Touch
        radarChart.setRotationEnabled(true);
        radarChart.setTouchEnabled(true);

        // Animation
        radarChart.animateXY(1500, 1500);

        radarChart.invalidate();
    }
}

การปรับแต่งขั้นสูง

1. เปลี่ยนสี Web (Grid) ตามระดับ

// Custom RadarChart Renderer (ต้อง extends RadarChartRenderer)
radarChart.setRenderer(new CustomRadarRenderer(radarChart, radarChart.getAnimator(), radarChart.getViewPortHandler()));

2. Highlight/Selection

radarChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
    @Override
    public void onValueSelected(Entry e, Highlight h) {
        RadarEntry entry = (RadarEntry) e;
        int index = h.getXIndex(); // ดัชนีของ Label
        String label = radarChart.getXAxis().getValueFormatter().getFormattedValue(index);
        Toast.makeText(MainActivity.this, label + ": " + entry.getValue(), Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onNothingSelected() {}
});

3. ใช้กับข้อมูลจริง: เปรียบเทียบสมาร์ทโฟน

String[] specs = {"CPU", "GPU", "RAM", "Storage", "Camera", "Battery", "Display", "5G"};

List<RadarEntry> phone1 = Arrays.asList(
    new RadarEntry(90), new RadarEntry(85), new RadarEntry(80), new RadarEntry(95),
    new RadarEntry(88), new RadarEntry(75), new RadarEntry(90), new RadarEntry(100)
);

List<RadarEntry> phone2 = Arrays.asList(
    new RadarEntry(85), new RadarEntry(90), new RadarEntry(100), new RadarEntry(80),
    new RadarEntry(95), new RadarEntry(85), new RadarEntry(88), new RadarEntry(100)
);

Radar Chart vs Polar Chart

สรุป

Radar Chart ใน MPAndroidChart สร้างได้ง่ายด้วย RadarEntry (ค่าเดียว per axis) และ RadarDataSet จุดสำคัญคือจำนวน Entries ต้องเท่ากับจำนวน Labels ทุก DataSet รองรับ Filled Area, Multiple Series, Touch Interaction เหมาะสำหรับ Dashboard การวิเคราะห์