文章目录
官网
配置
首先在Android 配置MPAndroidChart
git官网上给的提示是:
repositories {
maven { url 'https://jitpack.io' }
}
dependencies {
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}
这并不是在一个文件中配置,不要添加错了:
在porject /bulid.gradle中:
app/bulid.gradle:
基本属性
图表类有共同的特点
X轴:XAxis
1.得到x轴
XAxis xAxis = lineChart.getXAxis();
2.设置x轴位置
可选值:BOTTOM,BOTH_SIDED,BOTTOM_INSIDE,TOP,TOP_INSIDE
xAxis.setPosition(XAxis.XAxisPosition.BOTH_SIDED);
3.设置X轴坐标之间的最小间隔
xAxis.setGranularity(1f);
4.设置x轴的刻度数量
//第二个参数表示是否被平均分配
//xAxis.setLabelCount(12,true);
5.设置x轴的最小值最大值,系统根据刻度数量自动分配刻度显示
xAxis.setAxisMinimum(0f);
xAxis.setAxisMaximum(100f);
6.设置x轴为字符串
xAxis.setValueFormatter(new IndexAxisValueFormatter() {
@Override
public String getFormattedValue(float value) {
return super.getFormattedValue(value);
}
});
Y轴:YAxis
1.得到Y轴
//YAxis leftAxis = lineChart.getAxis(YAxis.AxisDependency.LEFT);
YAxis leftAxis = lineChart.getAxisLeft();
//YAxis rAxis = lineChart.getAxis(YAxis.AxisDependency.RIGHT);
YAxis rightAxis = lineChart.getAxisRight();
2.设置从Y轴值
leftYAxis.setAxisMinimum(0f);
leftYAxis.setAxisMaximum(100f);
rightYAxis.setAxisMinimum(0f);
rightYAxis.setAxisMaximum(100f);
3.设置Y轴是否显示(效果如上右图)
rightYAxis.setEnabled(false); //右侧Y轴不显示
4.X轴和Y轴类似,都具有相同的属性方法
rightYAxis.setGranularity(1f);
rightYAxis.setLabelCount(11,false);
rightYAxis.setTextColor(Color.BLUE); //文字颜色
rightYAxis.setGridColor(Color.RED); //网格线颜色
rightYAxis.setAxisLineColor(Color.GREEN); //Y轴颜色
5.限制线LimitLine(如上右图)
LimitLine limitLine = new LimitLine(95,"高限制性"); //得到限制线
limitLine.setLineWidth(4f); //宽度
limitLine.setTextSize(10f);
limitLine.setTextColor(Color.RED); //颜色
limitLine.setLineColor(Color.BLUE);
rightYAxis.addLimitLine(limitLine); //Y轴添加限制线
6.自定义y轴
图例:Legend
1.得到Lengend
Legend legend = mLineChart.getLegend();
2.设置Lengend颜色
legend.setTextColor(Color.CYAN); //设置Legend 文本颜色
3.设置Lengend位置
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
4.设置标签是否换行
true换行,false 不换行
legend.setWordWrapEnabled(true);
5.隐藏Lengend
legend.setEnabled(false);
描述:Description
1.隐藏描述
Description description = new Description();
description.setEnabled(false);
lineChart.setDescription(description);
2.设置描述内容
Description description = new Description();
description.setText("X轴描述");
description.setTextSize(45);//字体大小
description.setTextColor(Color.RED);//字体颜色
lineChart.setDescription(description);//
限制线:LimitLine
MarkerView
MarkerView可自定义,用于点击图标值时显示想要的内容 效果如上右图
1.自定义MarkerView
public class MyMarkerView extends MarkerView {
private TextView tvContent;
private DecimalFormat format = new DecimalFormat("##0");
public MyMarkerView(Context context) {
super(context, R.layout.layout_markerview);
tvContent = (TextView) findViewById(R.id.tvContent);
}
@Override
public void refreshContent(Entry e, Highlight highlight) {
tvContent.setText(format.format(e.getY()));
super.refreshContent(e, highlight);
}
@Override
public MPPointF getOffset() {
return new MPPointF(-(getWidth() / 2), -getHeight() - 10);
}
}
2.设置显示MarkerView
MyMarkerView mv = new MyMarkerView(this);
lineChart.setMarkerView(mv);
折线图的线条设置
//一个LineDataSet就是一条线
LineDataSet lineDataSet = new LineDataSet(entries, "温度");
//设置曲线值的圆点是实心还是空心
lineDataSet.setDrawCircleHole(false);
//设置显示值的字体大小
lineDataSet.setValueTextSize(9f);
//线模式为圆滑曲线(默认折线)
lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
折线图
案例:
布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/lineChart"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_centerInParent="true"/>
</LinearLayout>
MainActivity.main
public class MainActivity extends AppCompatActivity {
LineChart lineChart;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
lineChart = (LineChart) findViewById(R.id.lineChart);
lineChart.setDrawBorders(true);
//设置数据
List<Entry> entries = new ArrayList<>();
for (float i = 0; i < 100; i+=0.5) {
entries.add(new Entry(i,(float)(Math.sin(i)) ));
}
//一个LineDataSet 就是一条线
LineDataSet lineDataSet = new LineDataSet(entries, "温度");
//线中的数据
LineData data = new LineData(lineDataSet);
lineChart.setData(data);
}
}
如果不想要这些点的话:
lineDataSet.setDrawCircles(false);
有的图形上面可能有值,如果想去掉这些值:
lineDataSet.setDrawValues(false);
左图是没有值的,右图是有值的
简单的动态正弦图
这里在按钮的点击方法里添加了一个线程,每隔0.05s沉睡线程,就营造了一种正弦波的效果
activity_main():
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:hint="y=Asin(wx+φ)"
android:gravity="center"
android:textSize="30dp"/>
<EditText
android:id="@+id/A"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入振幅A,默认是1"/>
<EditText
android:id="@+id/w"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入频率w,默认是1"/>
<EditText
android:id="@+id/φ"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入初相φ,默认是0"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/dynamic_chart1"
android:layout_width="match_parent"
android:layout_height="380dp" />
<Button
android:id="@+id/refresh_data"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="刷新数据"
/>
</LinearLayout>
</LinearLayout>
MainActivity
package com.example.mpandroidcharttest;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.AxisBase;
import com.github.mikephil.charting.components.Description;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.LimitLine;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.formatter.IAxisValueFormatter;
import com.github.mikephil.charting.formatter.IndexAxisValueFormatter;
import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
public class MainActivity extends AppCompatActivity {
LineChart lineChart;
LineData lineData;
LineDataSet lineDataSet;
private Button refresh;
private EditText A;
private EditText w;
private EditText φ;
private Integer sinA = 1;
private Integer sinw = 1;
private Integer sinφ = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
lineChart = (LineChart) findViewById(R.id.dynamic_chart1);
A = (EditText) findViewById(R.id.A);
w = (EditText) findViewById(R.id.w);
φ = (EditText) findViewById(R.id.φ);
refresh = (Button) findViewById(R.id.refresh_data);
refresh.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
lineChart.notifyDataSetChanged();
lineChart.invalidate();
lineChart.clear();
String inputsinA = A.getText().toString().trim();
String inputsinw = w.getText().toString().trim();
String inputsinφ = φ.getText().toString().trim();
if (!inputsinA.equals("")) {
sinA = (int) Double.parseDouble(A.getText().toString());
}
if (!inputsinw.equals("")) {
sinw = (int) Double.parseDouble(w.getText().toString());
}
if (!inputsinφ.equals("")) {
sinφ = (int) Double.parseDouble(φ.getText().toString());
}
lineChart.setDrawBorders(true);
//设置数据
final List<Entry> entries = new ArrayList<>();
new Thread(new Runnable() {
@Override
public void run() {
for (float i = 0; i < 300; i += 0.1) {
try {
Thread.sleep(50);//先沉睡线程0.05s
} catch (InterruptedException e) {
e.printStackTrace();
}
//设置xy轴数据关系
entries.add(new Entry(i, (float) (sinA * Math.sin(sinw * i + sinφ))));
//一个LineDataSet 就是一条线
lineDataSet = new LineDataSet(entries, "");
lineDataSet.setDrawCircles(false); //不要圆点
lineDataSet.setDrawValues(false);//不要值
lineData = new LineData(lineDataSet);//线中的数据
//更新数据
lineChart.setData(lineData);
//通知数据已经改变
lineData.notifyDataChanged();
lineChart.notifyDataSetChanged();
lineChart.setVisibleXRangeMaximum(5);//设置在曲线图中显示的最大数量
lineChart.moveViewToX(lineData.getEntryCount() - 2);//图形往前移动
}
}
}).start();
}
});
}
}
https://blog.csdn.net/ww897532167/article/details/77334345?utm_source=app