Android拓展之使用MPAndroidChart绘制动态折线图

Android MPAndroidChart的LineDataSet代表一条统计图表中统计折线，一张统计图表可以同时存在若干条统计折线，其在内存中存储的模型类型数组，从0开始下标。以下是绘制折线图的主要步骤：

注：已不适用于MPAndroidChart3.0.0以上jar包

一、在布局文件中使用LineChart控件

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cn.lcxy.test.a2016demo.function.linechart.LineChartFragment">

    <!-- 折线图 -->
    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/lineChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


</FrameLayout>

二、在Java文件中对控件进行绑定并设置LineChart的基本属性。

LineChart lineChart;
lineChart=view.findViewById(R.id.lineChart);
  
lineChart.setDescription("");//数据描述信息
lineChart.setNoDataTextDescription("未获得数据");//没有数据时显示的信息
 
//可触摸
lineChart.setTouchEnabled(true);

//可缩放
lineChart.setScaleEnabled(true);

//可拖拽
lineChart.setDragEnabled(true);

//是否显示表格背景
lineChart.setDrawGridBackground(false);

//如果禁用，可以分别在x轴和y轴上进行缩放。
lineChart.setPinchZoom(true);

//设置图表上的颜色背景
 lineChart.setBackgroundColor(Color.TRANSPARENT);

//表中的数据
LineData lineData=new LineData();

// 数据显示的颜色
lineData.setValueTextColor(ColorTemplate.getHoloBlue());

 // 先增加一个空的数据，随后往里面动态添加
lineChart.setData(lineData);

// 当前统计图表中最多在x轴坐标线上显示的总量
lineChart.setVisibleXRangeMaximum(10);

// 将坐标移动到最新
// 此代码将刷新图表的绘图
lineChart.moveViewToX(lineData.getXValCount()-10);
//绘制动画
lineChart.animateX(2500);

 
数据描述信息
lineChart.setNoDataTextDescription("未获得数据");//没有数据时显示的信息
 
//可触摸
lineChart.setTouchEnabled(true);

//可缩放
lineChart.setScaleEnabled(true);

//可拖拽
lineChart.setDragEnabled(true);

//是否显示表格背景
lineChart.setDrawGridBackground(false);

//如果禁用，可以分别在x轴和y轴上进行缩放。
lineChart.setPinchZoom(true);

//设置图表上的颜色背景
 lineChart.setBackgroundColor(Color.TRANSPARENT);

//表中的数据
LineData lineData=new LineData();

// 数据显示的颜色
lineData.setValueTextColor(ColorTemplate.getHoloBlue());

 // 先增加一个空的数据，随后往里面动态添加
lineChart.setData(lineData);

// 当前统计图表中最多在x轴坐标线上显示的总量
lineChart.setVisibleXRangeMaximum(10);

// 将坐标移动到最新
// 此代码将刷新图表的绘图
lineChart.moveViewToX(lineData.getXValCount()-10);
//绘制动画
lineChart.animateX(2500);

 

三、添加图表的注解

 // 图表的注解(只有当数据集存在时候才生效)
        Legend legend=lineChart.getLegend();
        // 线性，也可是圆
        legend.setForm(Legend.LegendForm.LINE);
        //颜色
        legend.setTextColor(Color.BLACK);
  
  

四、定义X，Y轴的属性

  //x轴
        XAxis xAxis=lineChart.getXAxis();
        xAxis.setTextColor(Color.BLACK);
        // 如果设置为true，则在绘制时会避免“剪掉”在x轴上的图表或屏幕边缘的第一个和最后一个坐标轴标签项。
        xAxis.setAvoidFirstLastClipping(true);
        // 几个x坐标轴之间才绘制？
//        xAxis.setSpaceBetweenLabels(5);
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setEnabled(true);

        // 图表左边的y坐标轴线
        YAxis leftAxis=lineChart.getAxisLeft();
        leftAxis.setTextColor(Color.BLACK);

        //最大值
        leftAxis.setAxisMinValue(100f);

        //最小值
        leftAxis.setAxisMinValue(0f);

        // 不一定要从0开始
        leftAxis.setStartAtZero(false);

        //绘制网格线
        leftAxis.setDrawGridLines(true);
  //右侧y轴
        YAxis rightAxis=lineChart.getAxisRight();
        //不显示右侧y轴
        rightAxis.setEnabled(false); //x轴
        XAxis xAxis=lineChart.getXAxis();
        xAxis.setTextColor(Color.BLACK);
        // 如果设置为true，则在绘制时会避免“剪掉”在x轴上的图表或屏幕边缘的第一个和最后一个坐标轴标签项。
        xAxis.setAvoidFirstLastClipping(true);
        // 几个x坐标轴之间才绘制？
//        xAxis.setSpaceBetweenLabels(5);
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setEnabled(true);

        // 图表左边的y坐标轴线
        YAxis leftAxis=lineChart.getAxisLeft();
        leftAxis.setTextColor(Color.BLACK);

        //最大值
        leftAxis.setAxisMinValue(100f);

        //最小值
        leftAxis.setAxisMinValue(0f);

        // 不一定要从0开始
        leftAxis.setStartAtZero(false);

        //绘制网格线
        leftAxis.setDrawGridLines(true);
  //右侧y轴
        YAxis rightAxis=lineChart.getAxisRight();
        //不显示右侧y轴
        rightAxis.setEnabled(false);

五、重写LinedataSet类

import android.graphics.Color;

import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineDataSet;

import java.util.List;

/**
 *  根据数值显示圆圈
 * Created by Lenovo on 2018/1/24.
 */

public class MyDataSet extends LineDataSet {
    private int start;      //最小值
    private int end;   //最大值
    public MyDataSet(List<Entry> yVals, String label, int start, int end) {
        super(yVals, label);
        this.start=start;
        this.end=end;
    }

    @Override
    public int getCircleColor(int index) {
        //如果超出范围则返回红色
        if (getEntryForXIndex(index).getVal()<start||getEntryForXIndex(index).getVal()>end){
            return 0xFFff0000;
        }else return super.getCircleColor(index);
    }
}

六、创建LineDataSet

   MyDataSet set=new MyDataSet(ylist,type+"数据",0,50);
        set.setAxisDependency(YAxis.AxisDependency.LEFT);

        //折线的颜色
        set.setColor(ColorTemplate.getHoloBlue());

        set.setCircleColor(Color.GREEN);
//        set.setCircleColors(new int[]{Color.RED,Color.GREEN});
        set.setCircleSize(3f);
        set.setLineWidth(3f);

        //内孔
        set.setCircleColorHole(Color.GREEN);
        set.setDrawCircleHole(true);
        //高亮的线的颜色
        set.setHighLightColor(Color.YELLOW);
        set.setValueTextColor(Color.GREEN);
        set.setValueTextSize(10f);
        //启用/禁用 绘制所有 DataSets 数据对象包含的数据的值文本。
        set.setDrawValues(true);  MyDataSet set=new MyDataSet(ylist,type+"数据",0,50);
        set.setAxisDependency(YAxis.AxisDependency.LEFT);

        //折线的颜色
        set.setColor(ColorTemplate.getHoloBlue());

        set.setCircleColor(Color.GREEN);
//        set.setCircleColors(new int[]{Color.RED,Color.GREEN});
        set.setCircleSize(3f);
        set.setLineWidth(3f);

        //内孔
        set.setCircleColorHole(Color.GREEN);
        set.setDrawCircleHole(true);
        //高亮的线的颜色
        set.setHighLightColor(Color.YELLOW);
        set.setValueTextColor(Color.GREEN);
        set.setValueTextSize(10f);
        //启用/禁用 绘制所有 DataSets 数据对象包含的数据的值文本。
        set.setDrawValues(true);

七、添加一个点

// 添加进去一个坐标点
    public void addEntry(String xValue,float yValue){
        LineData data=lineChart.getLineData();

        // 每一个LineDataSet代表一条线，每张统计图表可以同时存在若干个统计折线，这些折线像数组一样从0开始下标。
        // 本例只有一个，那么就是第0条折线
        MyDataSet dataSet= (MyDataSet) data.getDataSetByIndex(0);

        // 如果该统计折线图还没有数据集，则创建一条出来，如果有则跳过此处代码。
        if (dataSet==null){
            dataSet= (MyDataSet) createLineDataSet(null,"");
            data.addDataSet(dataSet);
        }

        // 先添加一个x坐标轴的值
        // 因为是从0开始，data.getXValCount()每次返回的总是全部x坐标轴上总数量，所以不必多此一举的加1
//        data.addXValue(data.getXValCount()+"");
        data.addXValue(xValue);
        //如果异常则为红色


        // set.getEntryCount()获得的是所有统计图表上的数据点总量，
        // 如从0开始一样的数组下标，那么不必多次一举的加1
        Entry entry=new Entry(yValue,dataSet.getEntryCount());
        // 往linedata里面添加点。注意：addentry的第二个参数即代表折线的下标索引。
        // 因为本例只有一个统计折线，那么就是第一个，其下标为0.
        // 如果同一张统计图表中存在若干条统计折线，那么必须分清是针对哪一条（依据下标索引）统计折线添加。
        data.addEntry(entry,0);

        // 像ListView那样的通知数据更新
        lineChart.notifyDataSetChanged();

        // 当前统计图表中最多在x轴坐标线上显示的总量
        lineChart.setVisibleXRangeMaximum(10);
        // 将坐标移动到最新
        // 此代码将刷新图表的绘图
        lineChart.moveViewToX(data.getXValCount()-5);

    }

以上是利用MPAndroidChart绘制动态折线图主要的几步。