在一切开始前，先看看最终的效果：
在 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控件
2.2 验证插件是否正常工作
在 【MainActivity.java】 文件中进行折线表的样式、数据初始化
public class MainActivity extends AppCompatActivity {
// 映射表，用于存储数据
private final List 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 "";
}
});
}
}
效果：
先来画一个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));
}
...
}
效果：
有了曲线，添加在其之上添加一个散点图，用于表示拟合的原始数据，在XML中
...
在程序中进行初始化，要留意折线图与散点图横纵坐标限制应该相同
// 给一些数据，检验一下是否能够正常显示
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
+
B
x
Y = Ax^2 + Bx
Y=Ax2+Bx
求参数A、B的方法为
{
A
=
(
∑
i
=
0
n
x
2
y
∑
i
=
0
n
x
2
−
∑
i
=
0
n
x
y
∑
i
=
0
n
x
3
)
/
(
∑
i
=
0
n
x
4
∑
i
=
0
n
x
2
−
∑
i
=
0
n
x
3
∑
i
=
0
n
x
3
)
B
=
(
∑
i
=
0
n
x
2
y
∑
i
=
0
n
x
3
−
∑
i
=
0
n
x
4
∑
i
=
0
n
x
y
)
/
(
∑
i
=
0
n
x
3
∑
i
=
0
n
x
3
−
∑
i
=
0
n
x
4
∑
i
=
0
n
x
2
)
begin{cases} A = (sum_{i=0}^nx^2ysum_{i=0}^nx^2 - sum_{i=0}^nxysum_{i=0}^nx^3)/(sum_{i=0}^nx^4sum_{i=0}^nx^2-sum_{i=0}^nx^3sum_{i=0}^nx^3)\ \ B = (sum_{i=0}^nx^2ysum_{i=0}^nx^3 - sum_{i=0}^nx^4sum_{i=0}^nxy)/(sum_{i=0}^nx^3sum_{i=0}^nx^3-sum_{i=0}^nx^4sum_{i=0}^nx^2)\ end{cases}
⎩⎪⎨⎪⎧A=(∑i=0nx2y∑i=0nx2−∑i=0nxy∑i=0nx3)/(∑i=0nx4∑i=0nx2−∑i=0nx3∑i=0nx3)B=(∑i=0nx2y∑i=0nx3−∑i=0nx4∑i=0nxy)/(∑i=0nx3∑i=0nx3−∑i=0nx4∑i=0nx2)
也可以采用其他计算方法进行拟合，比如拟合成一个一次函数，是否过零点等等都会使计算方法不同，也应有现成的库调用，这里可以自由发挥
这里我先将 Theme 的后缀改为 NoActionBar，把标题栏去掉了
在XML中加入其他组件，用于输入输出数据
...
在程序部分中加入这些组件并给予赋值映射
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 控件来管理这些数据，方便你进行查看输入了哪些数据，单个地进行修改、删除等操作
