Android之MPAndroidChart的动态折线图

写的太多,但是比较详细

import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

import com.example.mpandroidcharttest.Global.MyApplication;
import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.Legend;
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.utils.ColorTemplate;

import java.util.Random;

public class LinearChart extends AppCompatActivity implements View.OnClickListener {
    private LineChart mChart;
    private Button mBtnClick;

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

        initView();
        initData();

    }

    private void initData() {
        //设置可以触摸
        mChart.setTouchEnabled(true);
        //设置可拖拽
        mChart.setDragEnabled(true);
        //设置可缩放
        mChart.setScaleEnabled(true);
        //设置图表网格背景
        mChart.setDrawGridBackground(false);
        //设置多点触控
        mChart.setPinchZoom(true);
        //设置图表的背景颜色
        mChart.setBackgroundColor(Color.YELLOW);
        //设置折线图的数据
        LineData data = new LineData();
        //数据显示的颜色
        data.setValueTextColor(Color.BLACK);
        //先添加一个空的数据,随后往里面动态添加
        mChart.setData(data);
        // 图表的注解(只有当数据集存在时候才生效)
        Legend legend = mChart.getLegend();
        // 可以修改图表注解部分的位置
        // l.setPosition(LegendPosition.LEFT_OF_CHART);
        //线性也可以是圆
        legend.setForm(Legend.LegendForm.LINE);
        //设置标签文字的颜色
        legend.setTextColor(Color.BLUE);
        //获取X坐标轴
        XAxis xAxis = mChart.getXAxis();
        xAxis.setTextColor(Color.BLACK);
        //网格线
        xAxis.setDrawGridLines(false);
        //避免第一次最后剪裁
        xAxis.setAvoidFirstLastClipping(true);
        //几个X坐标之间才绘制
        xAxis.setSpaceBetweenLabels(5);
        //如果为false则X坐标不可见
        xAxis.setEnabled(true);
        //将X坐标轴放在底部,默认就是底部
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);

        //图表左边Y轴的坐标轴
        YAxis yAxis = mChart.getAxisLeft();
        //最大值
        yAxis.setAxisMaxValue(100f);
        //最小值
        yAxis.setAxisMinValue(0);
        //不一定从零开始
        yAxis.setStartAtZero(false);
        //设置图表线
        yAxis.setDrawGridLines(true);

        //获取图表右边的坐标线
        YAxis right = mChart.getAxisRight();
        //不显示图表右边的坐标线
        right.setDrawGridLines(false);
    }

    private void initView() {
        mChart = (LineChart) findViewById(R.id.chart);
        mBtnClick = (Button) findViewById(R.id.btn_click);
        mBtnClick.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_click:
                MyApplication.getHandler(new Runnable() {
                    @Override
                    public void run() {
                        addEntry(new Random().nextInt(100));
                        MyApplication.getHandler(this, 2000);
                    }
                }, 0);
                break;
        }
    }

    /**
     * 每次点击一次增加一个点
     * @param v 随机数
     */
    private void addEntry(int v) {
        LineData data = mChart.getData();
        //每个LineDataSet就代表一条线,每一个图表可以有很多条线,这些折线就像是数组一样,下标从零开始
        LineDataSet dataSet = data.getDataSetByIndex(0);
        //如果该折线图还没有数据集,就创建一个出来,反之则跳过此处
        if (dataSet == null) {
            dataSet = createDataSet();
            data.addDataSet(dataSet);
        }
        //先添加一个X坐标的值
        //因为是从零开始,data.getXValuesCount每次返回的都是X轴坐标上的总数量,所以不必多次一举加一
        data.addXValue(String.valueOf(data.getXValCount()));

        //dataSet.getEntryCount是获取所有统计图表上的数据点总量
        //从0开始的数组下标,不必多此一举加1
        Entry entry = new Entry((float) v,dataSet.getEntryCount());
        //往LineData里面添加点,addEntry第二个参数就代表折线的下标索引
        // 因为本例只有一个统计折线,那么就是第一个,其下标为0.
        // 如果同一张统计图表中存在若干条统计折线,那么必须分清是针对哪一条(依据下标索引)统计折线添加。
        data.addEntry(entry,0);
        //像ListView那样通知数据更新
        mChart.notifyDataSetChanged();
        //当前统计图表中X轴最多显示X轴坐标的总量
        mChart.setVisibleXRangeMaximum(10);

        // y坐标轴线最大值
//        mChart.setVisibleYRangeMaximum(30, YAxis.AxisDependency.LEFT);

        //将坐标移动到最新
        //此代码刷新图表的绘图
//        mChart.moveViewToX(data.getXValCount()-5);

         mChart.moveViewTo(data.getXValCount()-7, 55f,
         YAxis.AxisDependency.LEFT);
    }

    /**
     * 创建数据集
     * 初始化数据集,添加一条统计折线,可以简单的理解是初始化y坐标轴线上点的表征
     * @return LineDataSet
     */
    private LineDataSet createDataSet() {
        LineDataSet dataSet = new LineDataSet(null,"动态的添加数据");
        //设置轴的依赖
        dataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
        //设置折线的颜色,整体的蓝色
        dataSet.setColor(ColorTemplate.getHoloBlue());
        //包裹点的眼圈颜色
        dataSet.setCircleColor(Color.GREEN);
        //设置线的宽度
        dataSet.setLineWidth(5f);
        //设置填补透明
        dataSet.setFillAlpha(128);
        //设置填补的颜色
        dataSet.setFillColor(ColorTemplate.getHoloBlue());
        //设置高光的颜色
        dataSet.setHighLightColor(Color.BLACK);
        //设置文本值的颜色
        dataSet.setValueTextColor(Color.BLUE);
        //设置值的文本大小
        dataSet.setValueTextSize(15f);
        //设置显示的值
        dataSet.setDrawValues(true);
        return dataSet;
    }
}

---------------------------------------------------------------------------------

还有一种代码量少点的实现方式,和上面的折线图是从相反的方向变化。

import android.content.Context;
import android.graphics.Color;

import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.Legend;
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 java.util.Random;

/**
 * 这是个动态折线图的工具类
 */

public class LineEngine {
    private String title;
    private int max;
    private LineChart mChart;

    public LineEngine(String title) {
        this.title = title;
    }

    public LineChart getView(Context context,int max) {
        this.max = max;
        mChart = new LineChart(context);
        mChart.setDescription("");
        mChart.setScaleEnabled(false);

        LineData lineData = new LineData();
        lineData.setValueTextColor(0xFF000000);
        mChart.setData(lineData);

        Legend legend = mChart.getLegend();
        legend.setForm(Legend.LegendForm.CIRCLE);
        legend.setFormSize(25f);
        legend.setTextColor(Color.BLACK);

        XAxis xAxis = mChart.getXAxis();
        xAxis.setDrawGridLines(false);
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setTextSize(25f);

        YAxis yAxis = mChart.getAxisLeft();
        yAxis.setAxisMaxValue(max);
        yAxis.setAxisMinValue(0);
        yAxis.setTextSize(25f);

        YAxis axisRight = mChart.getAxisRight();
        axisRight.setDrawGridLines(false);
        axisRight.setXOffset(15f);
        return mChart;

    }

    public void update(int values) {
        if (values <= 0) {
            values = new Random().nextInt(max);
        }

        LineData data = mChart.getData();
        LineDataSet set = data.getDataSetByIndex(0);
        if (set == null) {
            set = createDataSet();
            data.addDataSet(set);
        }

        data.addXValue(MyUtils.getCurrentTime());

        Entry entry = new Entry(values, set.getEntryCount());
        data.addEntry(entry,0);

        mChart.notifyDataSetChanged();//通知更新速度
        mChart.setVisibleXRangeMaximum(2);//可见X范围最大
        mChart.moveViewToX(mChart.getXValCount()-2);//对X移动视图
    }

    private LineDataSet createDataSet() {
        LineDataSet dataSet = new LineDataSet(null,title);
        dataSet.setCircleSize(5f);
        dataSet.setLineWidth(4f);
        dataSet.setCircleColor(Color.GREEN);
        dataSet.setDrawCubic(true);
        dataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
        dataSet.setColor(Color.GREEN);
        return dataSet;
    }

}

调用方式如下:

import android.os.Bundle;
import android.os.Handler;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.github.mikephil.charting.charts.LineChart;

import itsoha.com.tffic.Utils.LineEngine;
import itsoha.com.tffic.Utils.LineEngineFive;
import itsoha.com.tffic.Utils.LineEngineFour;
import itsoha.com.tffic.Utils.LineEngineThree;
import itsoha.com.tffic.Utils.LineEngineTo;

/**
 * Created by Administrator on 2018/3/26.
 */

public class LineFragment extends Fragment {
    private Handler handler = new Handler();
    private Runnable runnable = new Runnable() {
        @Override
        public void run() {
            engine.update(0);
            handler.postDelayed(runnable, 1500);
        }
    };
    private LineEngine engine;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        engine = new LineEngine("Test");
        LineChart chart = engine.getView(getActivity(), 100);
        handler.post(runnable);
        return chart;
    }
}

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值