一.快速实现:(当前mpandroidchartlibrary版本是2.1.6版本)
1.主函数代码:动态模拟添加数据、清除数据、折线展示动画效果、刷新数据等
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Color;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
import com.github.mikephil.charting.animation.Easing;
import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.AxisBase;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.LimitLine;
import com.github.mikephil.charting.components.MarkerView;
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.DefaultXAxisValueFormatter;
import com.github.mikephil.charting.formatter.XAxisValueFormatter;
import com.github.mikephil.charting.highlight.Highlight;
import com.github.mikephil.charting.utils.ColorTemplate;
import com.github.mikephil.charting.utils.ViewPortHandler;
import java.util.ArrayList;
import java.util.List;
import me.samlss.utils.LineChartManager2;
/**
*
* 可参考网址 https://github.com/msandroid/androidChartDemo
*
*
*/
public class MpAndroidChart5Activity extends AppCompatActivity {
private LineChart mChart;
private List<Float> mList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mp_chart5);
mChart = (LineChart) findViewById(R.id.chart);
mList.clear();
// mChart.setDescription("2020-08-05 杭州 晴 伴有黑格比台风 气温26~36℃ 不宜外出");
// mChart.setNoDataTextDescription("暂无数据");
mChart.setTouchEnabled(true);
// 可拖曳
mChart.setDragEnabled(true);
// 可缩放
mChart.setScaleEnabled(true);
mChart.setDrawGridBackground(false);
mChart.setPinchZoom(true);
// 设置图表的背景颜色
mChart.setBackgroundColor(Color.LTGRAY);
LineData data = new LineData();
// 数据显示的颜色
data.setValueTextColor(Color.WHITE);
// 先增加一个空的数据,随后往里面动态添加
mChart.setData(data);
// 图表的注解(只有当数据集存在时候才生效)
Legend l = mChart.getLegend();
// 可以修改图表注解部分的位置
// l.setPosition(LegendPosition.LEFT_OF_CHART);
// 线性,也可是圆
l.setForm(Legend.LegendForm.LINE);
// 颜色
l.setTextColor(Color.WHITE);
// x坐标轴
XAxis xl = mChart.getXAxis();
xl.setTextColor(Color.WHITE);
xl.setDrawGridLines(false);//设置X轴上每个竖线是否显示
xl.setDrawLabels(true); //设置是否绘制X轴上的对应值(标签)
xl.setAvoidFirstLastClipping(true);
//设置x轴间距
xl.setGridLineWidth(2f);
// 横坐标文字
// xl.setValueFormatter(new IAxisValueFormatter {
// @Override
// public String getXValue(String s, int i, ViewPortHandler viewPortHandler) {
// return null;
// }
//
// @Override
// public String getFormattedValue(float value, AxisBase axis) {
// if (value < dataX.size()){
// return dataX.get((int) value);
// }else {
// return null;
// }
// }
// });
// 几个x坐标轴之间才绘制?
xl.setSpaceBetweenLabels(5);
// 如果false,那么x坐标轴将不可见
xl.setEnabled(true);
// 将X坐标轴放置在底部,默认是在顶部。
xl.setPosition(XAxis.XAxisPosition.BOTTOM);
// 图表左边的y坐标轴线
YAxis leftAxis = mChart.getAxisLeft();
leftAxis.setTextColor(Color.WHITE);
// 最大值
leftAxis.setAxisMaxValue(90f);
// 最小值
leftAxis.setAxisMinValue(40f);
// 不一定要从0开始
leftAxis.setStartAtZero(false);
leftAxis.setDrawGridLines(true);
YAxis rightAxis = mChart.getAxisRight();
// 不显示图表的右边y坐标轴线
rightAxis.setEnabled(false);
//默认添加一组数据
// for (int i = 0; i < 9; i++) {
// addEntry();
// }
// 每点击一次按钮,增加一个点
Button addButton = (Button) findViewById(R.id.button);
Button allButton = (Button) findViewById(R.id.bt_all);
Button clearButton = (Button) findViewById(R.id.bt_clear);
Button refreshButton = (Button) findViewById(R.id.bt_refresh);
addButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mList.size();
addEntry();
}
});
allButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
for (int i = 0; i < 9; i++) {
addEntry();
}
}
});
clearButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// mChart.removeAllViews();
// mChart.removeAllViewsInLayout();
// mChart.clearAllJobs();
// mChart.clear();
mChart.notifyDataSetChanged();
mChart.setNoDataText("Sorry, No data");// 无数据
mChart.invalidate();
}
});
refreshButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mChart.getViewPortHandler().refresh(new Matrix(), mChart, true);
mChart.notifyDataSetChanged();
mChart.invalidate();
}
});
//--------
// 弹出的数据点提示框。
MarkerView mv = new MyMarkerView(this, R.layout.marker_view);
mChart.setMarkerView(mv);
}
/**
* @author Phil
*
* 构造一个类似Android Toast的弹出消息提示框。
*/
private class MyMarkerView extends MarkerView {
private TextView tvContent;
public MyMarkerView(Context context, int layoutResource) {
super(context, layoutResource);
tvContent = (TextView) findViewById(R.id.tvContent);
}
@Override
public void refreshContent(Entry e, Highlight highlight) {
int n = (int) e.getVal();
tvContent.setText(e.getVal() + "");
// if (e instanceof CandleEntry) {
// CandleEntry ce = (CandleEntry) e;
// tvContent.setText(""
// + Utils.formatNumber(ce.getHigh(), 0, true));
// } else {
// tvContent.setText("" + Utils.formatNumber(e.getVal(), 0, true));
// }
}
@Override
public int getXOffset(float v) {
return -(getWidth() / 2);
}
@Override
public int getYOffset(float v) {
return -getHeight();
}
// @Override
// public int getXOffset() {
// return -(getWidth() / 2);
// }
//
// @Override
// public int getYOffset() {
// return -getHeight();
// }
}
// 添加进去一个坐标点
private void addEntry() {
LineData data = mChart.getData();
// 每一个LineDataSet代表一条线,每张统计图表可以同时存在若干个统计折线,这些折线像数组一样从0开始下标。
// 本例只有一个,那么就是第0条折线
LineDataSet set = data.getDataSetByIndex(0);
// 如果该统计折线图还没有数据集,则创建一条出来,如果有则跳过此处代码。
if (set == null) {
set = createLineDataSet();
data.addDataSet(set);
}
// 先添加一个x坐标轴的值
// 因为是从0开始,data.getXValCount()每次返回的总是全部x坐标轴上总数量,所以不必多此一举的加1
data.addXValue((data.getXValCount()) + "");
// 生成随机测试数
float f = (float) ((Math.random()) * 20 + 50);
mList.add(f);
// set.getEntryCount()获得的是所有统计图表上的数据点总量,
// 如从0开始一样的数组下标,那么不必多次一举的加1
Entry entry = new Entry(f, set.getEntryCount());
// 往linedata里面添加点。注意:addentry的第二个参数即代表折线的下标索引。
// 因为本例只有一个统计折线,那么就是第一个,其下标为0.
// 如果同一张统计图表中存在若干条统计折线,那么必须分清是针对哪一条(依据下标索引)统计折线添加。
data.addEntry(entry, 0);
// 像ListView那样的通知数据更新
mChart.notifyDataSetChanged();
// 当前统计图表中最多在x轴坐标线上显示的总量
mChart.setVisibleXRangeMaximum(5);
// y坐标轴线最大值
// mChart.setVisibleYRange(30, AxisDependency.LEFT);
// 将坐标移动到最新
// 此代码将刷新图表的绘图
mChart.moveViewToX(data.getXValCount() - 5);
// mChart.moveViewTo(data.getXValCount()-7, 55f,
// AxisDependency.LEFT);
//设置动画效果1
// mChart.animateY(2000, Easing.EasingOption.Linear);
// mChart.animateX(2000, Easing.EasingOption.Linear);
//设置动画效果2
mChart.animateX(1000); // 立即执行的动画,x轴
//动画效果:大同小异,不作介绍
// mChart.animateX(2500, Easing.EasingOption.EaseOutBounce); //贪吃蛇步伐,最后一个闪烁一次
// mChart.animateX(2500, Easing.EasingOption.Linear); //贪吃蛇步伐
// mChart.animateX(2500, Easing.EasingOption.EaseInQuad); //贪吃蛇步伐,第一个延时执行
// mChart.animateX(2500, Easing.EasingOption.EaseOutQuad); //贪吃蛇步伐
// mChart.animateX(2500, Easing.EasingOption.EaseInOutQuad); //贪吃蛇步伐
// mChart.animateX(2500, Easing.EasingOption.EaseInCubic); //贪吃蛇步伐
// mChart.animateX(2500, Easing.EasingOption.EaseOutCubic); //贪吃蛇步伐
// mChart.animateX(2500, Easing.EasingOption.EaseInOutCubic); //贪吃蛇步伐
// mChart.animateX(2500, Easing.EasingOption.EaseInQuart); //贪吃蛇步伐,其它都是差不多的动画
// mChart.animateX(2500, Easing.EasingOption.EaseOutQuart); //贪吃蛇步伐,快速展示
// mChart.animateX(2500, Easing.EasingOption.EaseInOutQuart); //贪吃蛇步伐
// mChart.animateX(2500, Easing.EasingOption.EaseInSine); //贪吃蛇步伐
// mChart.animateX(2500, Easing.EasingOption.EaseOutSine); //贪吃蛇步伐
// mChart.animateX(2500, Easing.EasingOption.EaseInOutSine); //贪吃蛇步伐
// mChart.animateX(2500, Easing.EasingOption.EaseInExpo); //贪吃蛇步伐,先慢后快
// mChart.animateX(2500, Easing.EasingOption.EaseOutExpo); //贪吃蛇步伐,全部延时渐变显示
// mChart.animateX(2500, Easing.EasingOption.EaseInOutExpo); //贪吃蛇步伐
// mChart.animateX(2500, Easing.EasingOption.EaseInCirc); //贪吃蛇步伐
// mChart.animateX(2500, Easing.EasingOption.EaseOutCirc); //贪吃蛇步伐
// mChart.animateX(2500, Easing.EasingOption.EaseInOutCirc); //贪吃蛇步伐
// mChart.animateX(2500, Easing.EasingOption.EaseInElastic); //贪吃蛇步伐
// mChart.animateX(2500, Easing.EasingOption.EaseOutElastic); //贪吃蛇步伐
// mChart.animateX(2500, Easing.EasingOption.EaseInOutElastic); //贪吃蛇步伐
// mChart.animateX(2500, Easing.EasingOption.EaseInBack); //贪吃蛇步伐
// mChart.animateX(2500, Easing.EasingOption.EaseOutBack); //贪吃蛇步伐,展示完返回上一界面
// mChart.animateX(2500, Easing.EasingOption.EaseInOutBack); //贪吃蛇步伐,展示完返回上一界面
// mChart.animateX(2500, Easing.EasingOption.EaseInBounce); //贪吃蛇步伐,第一个闪烁,然后展示
// mChart.animateX(2500, Easing.EasingOption.EaseOutBounce); //贪吃蛇步伐,快速展示,最后一个闪烁
// mChart.animateX(2500, Easing.EasingOption.EaseInOutBounce); //贪吃蛇步伐
mChart.invalidate();
}
// 初始化数据集,添加一条统计折线,可以简单的理解是初始化y坐标轴线上点的表征
private LineDataSet createLineDataSet() {
LineDataSet set = new LineDataSet(null, "动态添加的数据");
set.setAxisDependency(YAxis.AxisDependency.LEFT);
// 折线的颜色
set.setColor(ColorTemplate.getHoloBlue());
set.setCircleColor(Color.WHITE);
set.setLineWidth(2f);//折线宽度
set.setCircleSize(10f);//圆点大小
set.setCircleColor(Color.YELLOW);//设置圆点的颜色
set.setFillAlpha(128);
set.setFillColor(ColorTemplate.getHoloBlue());
set.setHighLightColor(Color.GREEN);//设置高亮颜色
set.setHighLightColor(Color.RED);//设置高亮颜色
set.setValueTextColor(Color.WHITE);
set.setValueTextSize(10f);
set.setDrawValues(true);
return set;
}
}
2.布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="动态添加数据" />
<Button
android:id="@+id/bt_all"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="动态添加一组数据" />
<Button
android:id="@+id/bt_clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="清除数据" />
<Button
android:id="@+id/bt_refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="刷新数据" />
</LinearLayout>
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/chart"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>