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

สร้าง Scatter Chart (กระจายจุด) ด้วย MPAndroidChart

Scatter Chart ใช้แสดงความสัมพันธ์ระหว่างตัวแปรสองตัว (X, Y) เหมาะสำหรับข้อมูลวิทยาศาสตร์ สถิติ การทดลอง บทความนี้ใช้ไลบรารี MPAndroidChart v3.1.0+

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

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

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

ใน build.gradle (Project) เพิ่ม 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.ScatterChart
        android:id="@+id/scatterChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="16dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

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

package com.example.scatterchartdemo;

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.ScatterData;
import com.github.mikephil.charting.data.ScatterDataSet;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.utils.ColorTemplate;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private ScatterChart scatterChart;

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

        scatterChart = findViewById(R.id.scatterChart);
        setupScatterChart();
    }

    private void setupScatterChart() {
        // 1. สร้างข้อมูล (x, y)
        List<Entry> entries = new ArrayList<>();
        entries.add(new Entry(1f, 2f));
        entries.add(new Entry(2f, 4f));
        entries.add(new Entry(3f, 3f));
        entries.add(new Entry(4f, 5f));
        entries.add(new Entry(5f, 4f));
        entries.add(new Entry(6f, 7f));
        entries.add(new Entry(7f, 6f));
        entries.add(new Entry(8f, 8f));
        entries.add(new Entry(9f, 7f));
        entries.add(new Entry(10f, 9f));

        // 2. สร้าง DataSet
        ScatterDataSet dataSet = new ScatterDataSet(entries, "ข้อมูลตัวอย่าง");
        dataSet.setColors(ColorTemplate.MATERIAL_COLORS);
        dataSet.setScatterShape(ScatterDataSet.ScatterShape.CIRCLE); // รูปทรงจุด: CIRCLE, SQUARE, TRIANGLE, CROSS, X, CHEVRON_UP, CHEVRON_DOWN
        dataSet.setScatterShapeSize(12f); // ขนาดจุด
        dataSet.setValueTextColor(Color.BLACK);
        dataSet.setValueTextSize(10f);
        dataSet.setValueFormatter((value, entry, dataSetIndex, viewPortHandler) -> 
                String.format("(%.1f, %.1f)", entry.getX(), entry.getY()));

        // 3. สร้าง Data และเซ็ตให้ Chart
        ScatterData scatterData = new ScatterData(dataSet);
        scatterChart.setData(scatterData);

        // 4. การตั้งค่าทั่วไป
        customizeChart();
    }

    private void customizeChart() {
        // Description
        scatterChart.getDescription().setEnabled(false);

        // Touch Gestures
        scatterChart.setTouchEnabled(true);
        scatterChart.setDragEnabled(true);
        scatterChart.setScaleEnabled(true);
        scatterChart.setPinchZoom(true);

        // Axes
        scatterChart.getXAxis().setPosition(com.github.mikephil.charting.components.XAxis.XAxisPosition.BOTTOM);
        scatterChart.getXAxis().setGranularity(1f);
        scatterChart.getXAxis().setAxisMinimum(0f);
        scatterChart.getXAxis().setAxisMaximum(11f);
        scatterChart.getXAxis().setLabelCount(11);

        scatterChart.getAxisLeft().setAxisMinimum(0f);
        scatterChart.getAxisLeft().setAxisMaximum(10f);
        scatterChart.getAxisRight().setEnabled(false);

        // Grid
        scatterChart.getXAxis().setDrawGridLines(true);
        scatterChart.getAxisLeft().setDrawGridLines(true);

        // Legend
        scatterChart.getLegend().setEnabled(true);

        // Animation
        scatterChart.animateXY(1000, 1000);

        // Refresh
        scatterChart.invalidate();
    }
}

การปรับแต่งรูปทรงจุด (Scatter Shapes)

// รูปทรงที่รองรับ
dataSet.setScatterShape(ScatterDataSet.ScatterShape.CIRCLE);      // วงกลม
dataSet.setScatterShape(ScatterDataSet.ScatterShape.SQUARE);      // สี่เหลี่ยม
dataSet.setScatterShape(ScatterDataSet.ScatterShape.TRIANGLE);    // สามเหลี่ยม
dataSet.setScatterShape(ScatterDataSet.ScatterShape.CROSS);       // เครื่องหมาย +
dataSet.setScatterShape(ScatterDataSet.ScatterShape.X);           // เครื่องหมาย x
dataSet.setScatterShape(ScatterDataSet.ScatterShape.CHEVRON_UP);  // 三角หัวขึ้น
dataSet.setScatterShape(ScatterDataSet.ScatterShape.CHEVRON_DOWN); // 三角หัวลง

// ใช้ Shape แบบกำหนดเอง (Custom Shape)
dataSet.setCustomScatterShape(new IShape() {
    @Override
    public void draw(Canvas c, IScatterDataSet dataSet, ViewPortHandler viewPortHandler, 
                     float posX, float posY, Paint renderPaint) {
        // วาดรูปทรงเอง เช่น ดาว, หัวใจ, โลโก้
        renderPaint.setColor(dataSet.getColor(0));
        // ตัวอย่าง: วาดดาว
        drawStar(c, posX, posY, 10f, renderPaint);
    }
});

หลาย DataSet (Multiple Series)

List<Entry> entries1 = ...; // Series 1
List<Entry> entries2 = ...; // Series 2

ScatterDataSet set1 = new ScatterDataSet(entries1, "Series A");
set1.setColor(Color.RED);
set1.setScatterShape(ScatterDataSet.ScatterShape.CIRCLE);

ScatterDataSet set2 = new ScatterDataSet(entries2, "Series B");
set2.setColor(Color.BLUE);
set2.setScatterShape(ScatterDataSet.ScatterShape.SQUARE);

ScatterData data = new ScatterData(set1, set2);
scatterChart.setData(data);

การเพิ่ม Trend Line (เส้นแนวโน้ม)

// คำนวณ Linear Regression เอง แล้วเพิ่มเป็น LineDataSet
LineDataSet trendLine = new LineDataSet(trendEntries, "Trend");
trendLine.setColor(Color.RED);
trendLine.setDrawCircles(false);
trendLine.setLineWidth(2f);
trendLine.setEnableDashedLine(10f, 5f, 0f);

// รวม Scatter + Line
CombinedData combinedData = new CombinedData();
combinedData.setData(scatterData);
combinedData.setData(lineData); // LineData จาก trendLine
scatterChart.setData(combinedData);

สรุป

Scatter Chart ใน MPAndroidChart ใช้งานง่าย ผ่าน ScatterDataSet และ Entry(x, y) รองรับการปรับแต่งรูปทรงจุด สี ขนาด และสามารถรวมกับ Line Chart เพื่อแสดง Trend Line ได้ เหมาะสำหรับข้อมูลวิทยาศาสตร์/สถิติ