【Android】利用MPAndroidChart做一个曲线拟合功能

一、最终效果

在一切开始前，先看看最终的效果：

二、开始挖坑吧

1. 引入MPAndroid库

在 build.gradle(:app) 中添加

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

在 settings.gradle(ProjectName) 中添加

repositories {
   
   
    ...
    maven {
   
    url 'https://jitpack.io' }
}

然后点击 Sync Now 或小象图标。

2. 初始化折线图

2.1 加入LineChart控件

在 【activity_main.xml】 文件中加入 LineChart控件

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
<!--加入LineChart控件 ↓-->
    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/line_chart"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_marginTop="30dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
<!--加入LineChart控件 ↑-->
    
</androidx.constraintlayout.widget.ConstraintLayout>

2.2 验证插件是否正常工作

在 【MainActivity.java】 文件中进行折线表的样式、数据初始化

public class MainActivity extends AppCompatActivity {
   
   

//    映射表，用于存储数据
    private final List<Entry> listLineData = new ArrayList<>();

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

//        调用初始化方法
        initChart();
    }

    private void initChart(){
   
   
//        随便给一些数据，检验一下插件是否正常工作
        listLineData.add(new Entry(5,60));
        listLineData.add(new Entry(10,10));
        listLineData.add(new Entry(15,20));
        listLineData.add(new Entry(20,50));
        listLineData.add(new Entry(25,40));

//        一些初始化参数，大部分样式都可以参照官方文档进行修改
        LineChart lineChart = findViewById(R.id.line_chart);
        LineDataSet lineDataSet = new LineDataSet(listLineData, "折线图");

        LineData lineData = new LineData(lineDataSet);
        lineChart.setData(lineData);
        XAxis xAxis = lineChart.getXAxis();
        YAxis yAxis = lineChart.getAxisLeft();
        lineChart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);
        lineDataSet.setColor(Color.RED);

        lineDataSet.setDrawCircles(false);

        lineDataSet.setValueFormatter(new ValueFormatter() {
   
   
            @Override
            public String getFormattedValue(float value) {
   
   
                return "";
            }
        });

        // 隐藏不希望显示部分，包括坐标轴标题、刻度等等，并禁用了双指放大等功能
        lineChart.getAxisRight().setEnabled(false);
        lineChart.getLegend().setEnabled(false);
        lineChart.getDescription().setEnabled(false);
        lineChart.setScaleEnabled(false);
        lineChart.setTouchEnabled(false);

        xAxis.setAxisMinimum(0);
        xAxis.setAxisMaximum(30);
        xAxis.setDrawGridLines(true);
        xAxis.setDrawAxisLine(true);
        xAxis.setValueFormatter(new ValueFormatter() {
   
   
            @Override
            public String getFormattedValue(float value) {
   
   
                return "";
            }
        });

        yAxis.setAxisMinimum(0);
        yAxis.setAxisMaximum(120);
        yAxis.setDrawGridLines(true);
        yAxis.setDrawAxisLine(true);
        yAxis.setValueFormatter(new ValueFormatter() {
   
   
            @Override
            public String getFormattedValue(float value) {
   
   
                return "";
            }
        });
    }
}

效果：

2.3 将折线转化为曲线

先来画一个y=x^2的曲线，方法其实就是细化折线上的点，删除随便添加的样本点，添加代码如下

    private void initChart(){
   
   
        // 画一个y=x^2的曲线
        for(float i = 0;i <= 30; i += (float)0.1){
   
   
            listLineData.add(new Entry(i,i*i));
        }
        ...
    }

效果：

2.4 添加散点图

有了曲线，添加在其之上添加一个散点图，用于表示拟合的原始数据，在XML中

...
<!--加入LineChart控件 ↓-->