【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控件 ↓-->
    <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"/>
    <com.github.mikephil.charting.charts.ScatterChart
        android:id="@+id/scatter_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控件 ↑-->
...

在程序中进行初始化，要留意折线图与散点图横纵坐标限制应该相同

//        给一些数据，检验一下是否能够正常显示
        for(int i = 0;i <= 30; i += 1){
            listData.add(new Entry(i,i*i));
        }
//        添加散点图，参数基本和折线图一样
        ScatterChart scatterChart = findViewById(R.id.scatter_chart);
        ScatterDataSet scatterDataSet = new ScatterDataSet(listData, "散点图");

        ScatterData scatterData = new ScatterData(scatterDataSet);
        scatterChart.setData(scatterData);
        xAxis = scatterChart.getXAxis();
        yAxis = scatterChart.getAxisLeft();
        scatterChart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);
        scatterDataSet.setColor(Color.parseColor("#1886f7"));
//        这里需要注意，将散点图的背景色改为透明
        scatterChart.setBackgroundColor(Color.parseColor("#00000000"));

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

        // 隐藏不希望显示部分，包括坐标轴标题、刻度等等，并禁用了双指放大等功能
        scatterChart.getAxisRight().setEnabled(false);
        scatterChart.getLegend().setEnabled(false);
        scatterChart.getDescription().setEnabled(false);
        scatterChart.setScaleEnabled(false);
        scatterChart.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 "";
            }
        });

效果：

到这里，基本效果就出来了

3. 最小二乘法拟合过零点二次函数

有很多种拟合曲线的方法，这里采用最小二乘法拟合一个过零点的二次函数，即形式为
$$Y=A{x}^2+Bx$$
求参数A、B的方法为
$$\{\begin{array}{l}A=({\sum }_{i=0}^n{x}^{2}y{\sum }_{i=0}^n{x}^2-{\sum }_{i=0}^{n}xy{\sum }_{i=0}^n{x}^3)/({\sum }_{i=0}^n{x}^4{\sum }_{i=0}^n{x}^2-{\sum }_{i=0}^n{x}^3{\sum }_{i=0}^n{x}^3)\\ \\ B=({\sum }_{i=0}^n{x}^{2}y{\sum }_{i=0}^n{x}^3-{\sum }_{i=0}^n{x}^4{\sum }_{i=0}^{n}xy)/({\sum }_{i=0}^n{x}^3{\sum }_{i=0}^n{x}^3-{\sum }_{i=0}^n{x}^4{\sum }_{i=0}^n{x}^2)\end{array}$$
也可以采用其他计算方法进行拟合，比如拟合成一个一次函数，是否过零点等等都会使计算方法不同，也应有现成的库调用，这里可以自由发挥

3.1 添加其他组件

这里我先将 Theme 的后缀改为 NoActionBar，把标题栏去掉了

在XML中加入其他组件，用于输入输出数据

...
<!--加入LineChart控件 ↑-->
    <TextView
        android:id="@+id/tv_formula"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        app:layout_constraintTop_toBottomOf="@+id/line_chart"
        android:text="公式"
        android:textAlignment="center"
        android:gravity="center"/>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/input_panel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/tv_formula"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">
        <TextView
            android:id="@+id/tv_x"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:text="X:"/>
        <EditText
            android:id="@+id/et_x"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:hint="0-30"
            android:inputType="numberDecimal"
            android:digits="-1234567890."
            android:maxLength="7"
            android:layout_marginStart="8dp"
            app:layout_constraintStart_toEndOf="@+id/tv_x"
            app:layout_constraintTop_toTopOf="@+id/tv_x"
            app:layout_constraintBottom_toBottomOf="@+id/tv_x"/>
        <TextView
            android:id="@+id/tv_y"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            app:layout_constraintTop_toBottomOf="@+id/tv_x"
            app:layout_constraintStart_toStartOf="parent"
            android:text="y:"/>
        <EditText
            android:id="@+id/et_y"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:hint="0-120"
            android:inputType="numberDecimal"
            android:digits="-1234567890."
            android:maxLength="7"
            android:layout_marginStart="8dp"
            app:layout_constraintStart_toEndOf="@+id/tv_y"
            app:layout_constraintTop_toTopOf="@+id/tv_y"
            app:layout_constraintBottom_toBottomOf="@+id/tv_y"/>
        <Button
            android:id="@+id/btn_add_data"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="@+id/tv_x"
            app:layout_constraintBottom_toBottomOf="@+id/tv_y"
            app:layout_constraintStart_toEndOf="@+id/et_x"
            app:layout_constraintEnd_toStartOf="@+id/btn_clear_data"
            android:text="添加数据"/>
        <Button
            android:id="@+id/btn_clear_data"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="20dp"
            app:layout_constraintTop_toTopOf="@+id/tv_x"
            app:layout_constraintBottom_toBottomOf="@+id/tv_y"
            app:layout_constraintStart_toEndOf="@+id/btn_add_data"
            app:layout_constraintEnd_toEndOf="parent"
            android:text="清空数据"/>
    </androidx.constraintlayout.widget.ConstraintLayout>

在程序部分中加入这些组件并给予赋值映射

    private TextView tvFormula;
    private EditText editTextX;
    private EditText editTextY;
    private Button btnAdd;
    private Button btnClear;
    private LineChart lineChart;
    private ScatterChart scatterChart;

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

        tvFormula = findViewById(R.id.tv_formula);
        editTextX = findViewById(R.id.et_x);
        editTextY = findViewById(R.id.et_y);
        btnAdd = findViewById(R.id.btn_add_data);
        btnClear = findViewById(R.id.btn_clear_data);
//        调用初始化方法
        initChart();
        initClickEvent();
    }

加入一个刷新公式的方法

    private void refreshFormula(){
//        格式化公式
        SpannableString spannableString;
        if(B >= 0){
            spannableString = new SpannableString("Y = "+A+"X2"+"+"+B+"X");
        }else{
            spannableString = new SpannableString("Y = "+A+"X2"+B+"X");
        }
        int startPosition = spannableString.toString().indexOf('X');
        spannableString.setSpan(new SuperscriptSpan(), startPosition+1, startPosition+2, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
        tvFormula.setText(spannableString);
//        清空数据
        listData.clear();
        listLineData.clear();
//        填充数据
        for (int i = 0; i < X.size(); i++){
            listData.add(new Entry(X.get(i), Y.get(i)));
        }
        for (float i = 0; i <= 30; i = i + (float)0.1) {
            listLineData.add(new Entry(i, (float)(A*i*i + B*i)));
        }
        lineChart.setVisibility(View.GONE);
        lineChart.setVisibility(View.VISIBLE);
        scatterChart.setVisibility(View.GONE);
        scatterChart.setVisibility(View.VISIBLE);
    }

加入initClickEvent() 方法，分别初始化增加数据和清空数据按钮的点击事件

    private void initClickEvent(){
        btnAdd.setOnClickListener(v -> {
//            格式化输入项
            float a;
            float b;
            if(editTextX.getText().toString().equals("")){
                a = (float) 0;
            }else {
                a = Float.parseFloat(editTextX.getText().toString());
            }
            if(editTextY.getText().toString().equals("")){
                b = (float) 0;
            }else {
                b = Float.parseFloat(editTextY.getText().toString());
            }
            if(a < 0){
                a = (float) 0;
            }else if(a > 30){
                a = (float) 30;
            }
            if(b < 0){
                b = (float) 0;
            }else if(b > 120){
                b = (float) 120;
            }
            X.add(a);
            Y.add(b);
            editTextX.setText(String.valueOf(a));
            editTextY.setText(String.valueOf(b));

            // 最小二乘法拟合
            float Exy = 0;
            float Ex2y = 0;
            float Ex2 = 0;
            float Ex3 = 0;
            float Ex4 = 0;
            for(int i = 0; i < X.size(); i++){
                Exy += X.get(i)*Y.get(i);
                Ex2y += X.get(i)*X.get(i)*Y.get(i);
                Ex2 += X.get(i)*X.get(i);
                Ex3 += X.get(i)*X.get(i)*X.get(i);
                Ex4 += X.get(i)*X.get(i)*X.get(i)*X.get(i);
            }
            A = (Ex2y*Ex2-Exy*Ex3)/(Ex4*Ex2-Ex3*Ex3);
            B = (Ex2y*Ex3-Ex4*Exy)/(Ex3*Ex3-Ex4*Ex2);
            if(Float.isNaN(A) || Float.isNaN(B)){
                A = (float) 0;
                B = (float) 0;
            }
            refreshFormula();
        });
        btnClear.setOnClickListener(v -> {
            X.clear();
            Y.clear();
            A = 0;
            B = 0;
            refreshFormula();
        });
    }

逐步增加数据，如果数据足够合理，会生成相应的拟合曲线

效果：

至此，基本就已经完成了，修改一下坐标范围和拟合公式，可以用于一些简单的曲线拟合工作

你还可以选择再增加一个 ListView 控件来管理这些数据，方便你进行查看输入了哪些数据，单个地进行修改、删除等操作