Android 图表开源框架之MPAndroidChart LineChart折线图（四）动态添加数据

Android 图表开源框架之MPAndroidChart LineChart折线图（一）

Android 图表开源框架之MPAndroidChart LineChart折线图（二）

Android 图表开源框架之MPAndroidChart LineChart折线图（三）

Android 图表开源框架之MPAndroidChart LineChart之常用自定义设置功能

一.快速实现：（当前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>