Android利用Achartengine实现实时曲线图

From:http://blog.csdn.net/lamelias/article/details/41894433
实时曲线图在实际项目中经常会遇到，特别是与传感器相关的项目中。也正是因为公司项目需要实时展现从BLE设备获取到的心电图数据，所以有机会对实时曲线图的实现过程进行了较深入的探究。本文会讲述两种实现方式，其中每种实现方式里都会包含两种展现方式（曲线图平移方向：左、右）。

假设可见视窗只能容纳下100个数据点，那么，在数据点个数超出一百后，如果不做任何处理的话，虽然数据已经绘制了，但我们看到的却一直都是前100个数据点，除非我们水平拖动坐标系。

第一种实现方式：

之前一直很困惑，为什么Achartengine没有像MPAndroidChart那样提供一个centerViewPort()方法，来指定在可见视窗中显示的点的X坐标值，后来发现，通过renderer.setXAxisMin()和renderer.setXAxisMax()即可控制需要在可见视窗中显示的点的范围，就好比我们可以水平移动X轴那样，在可见视窗中显示我们感兴趣的数据点。通过这种方式，每次添加数据时，我们都设置以下X坐标的最大最小值，使我们感兴趣的数据处于该范围内即可。同时，通过这种方式，如果我们水平拖动的话还可以看到所有的历史数据点。

第二种实现方式：

这种方式在于，每次新的数据点到来时，我们将所有的旧数据的X坐标加（减）1，新到来的数据点永远只在X坐标为0处显示，从而产生一种向右（左）平移的效果。这种方式我们无法看到所有的历史数据点，我们只能看到最近更新的100个数据点。

描述的有点抽象，还是看下具体的代码吧：

[java] view plain copy
package com.lamelias.realtimechart;  
  
import java.util.ArrayList;  
import java.util.Random;  
  
import org.achartengine.ChartFactory;  
import org.achartengine.GraphicalView;  
import org.achartengine.chart.PointStyle;  
import org.achartengine.model.XYMultipleSeriesDataset;  
import org.achartengine.model.XYSeries;  
import org.achartengine.renderer.XYMultipleSeriesRenderer;  
import org.achartengine.renderer.XYSeriesRenderer;  
  
import android.content.BroadcastReceiver;  
import android.content.Context;  
import android.content.Intent;  
import android.content.IntentFilter;  
import android.graphics.Color;  
import android.graphics.Paint.Align;  
import android.os.Bundle;  
import android.os.Handler;  
import android.os.Message;  
import android.support.v4.app.Fragment;  
import android.util.Log;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.ViewGroup;  
import android.widget.RelativeLayout;  
import android.widget.TextView;  
  
public class CardioChart extends Fragment {  
  
    private static String TAG = CardioChart.class.getSimpleName();  
    private static final int MAX_POINT = 100;  
    private TextView tv;  
    /* 呼吸波形的相关参数 */  
    int flagBreBt = 0;  
    private Handler handler;  
    private String title = "Cardiograph";  
    private XYSeries series;  
    private XYMultipleSeriesDataset mDataset;  
    private GraphicalView chart;  
    private XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();  
    XYSeriesRenderer r = new XYSeriesRenderer();  
    private Context context;  
    private int addX = -1;  
    int[] xv = new int[MAX_POINT];  
    int[] yv = new int[MAX_POINT];  
    RelativeLayout breathWave;  
    int i = 0;  
  
    int count = 0;// 每隔多少包更新一次心电图  
    private ArrayList<Integer> drawPack = new ArrayList<Integer>(); // 需要绘制的数据集  
    Random random = new Random();  
    private final int POINT_GENERATE_PERIOD=10; //单位是ms  
      
    Runnable runnable = new Runnable() {  
  
        @Override  
        public void run() {  
            ArrayList<Integer> datas = new ArrayList<Integer>();  
            for (int i = 0; i < 1; i++) {  
                datas.add(random.nextInt(3000));  
            }  
              
            /*以下方式左右拖动坐标系时可以看到所有历史数据点*/  
            //updateCharts(datas);  
            //leftUpdateCharts(datas);  
              
            /*以下方式无法看到历史数据点，在坐标轴上只能看到MAX_POINT个数据点*/  
            updateChart(random.nextInt(3000));   
            //rightUpdateChart(random.nextInt(3000));  
              
            handler.postDelayed(this, POINT_GENERATE_PERIOD);  
        }  
    };  
  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        handler = new Handler() ;  
    }  
  
    @Override  
    public View onCreateView(LayoutInflater inflater, ViewGroup container,  
            Bundle savedInstanceState) {  
        View view = inflater.inflate(R.layout.cardiochart, container, false);  
        breathWave = (RelativeLayout) view.findViewById(R.id.cardiograph);  
        tv = (TextView) view.findViewById(R.id.test);  
        initCardiograph();  
  
        return view;  
    }  
      
    /** 
     * @Title revcievedMessage  
     * @Description Fragment接收Activity中消息的第一种方式，直接在Fragment中提供一个public方法，供Activity调用 
     * @param action  
     * @return void 
     */  
    public void recievedMessage(String action){  
        switch(action){  
        case "START" :  
            handler.postDelayed(runnable, POINT_GENERATE_PERIOD);  
            break;  
        case "STOP" :  
            Log.w(TAG, "recieved Stop !");  
            handler.removeCallbacksAndMessages(null);  
            break;  
    }  
    }  
  
    @Override  
    public void onResume() {  
        getActivity().registerReceiver(mBroadcastReceiver, makeIntentFilter());  
        super.onResume();  
    }  
  
    @Override  
    public void onDestroy() {  
        getActivity().unregisterReceiver(mBroadcastReceiver);  
        super.onDestroy();  
    }  
      
    /** 
     * @Title makeIntentFilter  
     * @Description  Fragment接收Activity中消息的第二种方式，通过广播的方式 
     * @return  
     * @return IntentFilter 
     */  
    private IntentFilter makeIntentFilter() {  
        IntentFilter mIntentFilter=new IntentFilter();  
        mIntentFilter.addAction("START");  
        mIntentFilter.addAction("STOP");  
        return mIntentFilter;  
    }  
      
    private BroadcastReceiver mBroadcastReceiver=new BroadcastReceiver() {  
          
        @Override  
        public void onReceive(Context context, Intent intent) {  
            switch(intent.getAction()){  
                case "START" :  
                    handler.postDelayed(runnable, POINT_GENERATE_PERIOD);  
                    break;  
                case "STOP" :  
                    Log.w(TAG, "recieved Stop !");  
                    handler.removeCallbacksAndMessages(null);  
                    break;  
            }  
              
        }  
    };  
  
      
  
    public void initCardiograph() {  
        context = getActivity().getApplicationContext();  
        // 这个类用来放置曲线上的所有点，是一个点的集合，根据这些点画出曲线  
        series = new XYSeries(title);  
        // 创建一个数据集的实例，这个数据集将被用来创建图表  
        mDataset = new XYMultipleSeriesDataset();  
        // 将点集添加到这个数据集中  
        mDataset.addSeries(series);  
        // 以下都是曲线的样式和属性等等的设置，renderer相当于一个用来给图表做渲染的句柄  
        /* int color = Color.parseColor("#08145e"); */  
        int color = getResources().getColor(R.color.cardio_color3);  
        PointStyle style = PointStyle.CIRCLE;  
        buildRenderer(color, style, true);  
        // 设置好图表的样式  
        setChartSettings(renderer, "X", "Y", 0, MAX_POINT, 0, 3000, color,  
                color);  
        // 生成图表  
        chart = ChartFactory.getLineChartView(context, mDataset, renderer);  
        chart.setBackgroundColor(getResources().getColor(  
                R.color.cardio_bg_color));  
        breathWave.removeAllViews();  
        breathWave.addView(chart);  
  
    }  
  
    protected void buildRenderer(int color, PointStyle style, boolean fill) {  
  
        // 设置图表中曲线本身的样式，包括颜色、点的大小以及线的粗细等  
        r.setColor(color);  
        r.setPointStyle(style);  
        r.setFillPoints(fill);  
        r.setLineWidth(3);  
        renderer.addSeriesRenderer(r);  
    }  
  
    protected void setChartSettings(XYMultipleSeriesRenderer renderer,  
            String xTitle, String yTitle, double xMin, double xMax,  
            double yMin, double yMax, int axesColor, int labelsColor) {  
        // 有关对图表的渲染可参看api文档  
        renderer.setBackgroundColor(getResources().getColor(  
                R.color.cardio_bg_color));  
        renderer.setChartTitle(title);  
        renderer.setChartTitleTextSize(20);  
        renderer.setLabelsTextSize(19);// 设置坐标轴标签文字的大小  
        renderer.setXTitle(xTitle);  
        renderer.setYTitle(yTitle);  
        renderer.setXAxisMin(xMin);  
        renderer.setXAxisMax(xMax);  
        renderer.setYAxisMin(yMin);  
        renderer.setYAxisMax(yMax);  
        //renderer.setYAxisAlign(Align.RIGHT, 0);//用来调整Y轴放置的位置，表示将第一条Y轴放在右侧  
        renderer.setAxesColor(axesColor);  
        renderer.setLabelsColor(labelsColor);  
        renderer.setShowGrid(true);  
        renderer.setGridColor(Color.GRAY);  
        renderer.setXLabels(10);//若不想显示X标签刻度，设置为0 即可  
        renderer.setYLabels(10);  
        renderer.setLabelsTextSize(18);// 设置坐标轴标签文字的大小  
        renderer.setXLabelsColor(labelsColor);  
        renderer.setYLabelsColor(0, labelsColor);  
        renderer.setYLabelsVerticalPadding(-5);  
        renderer.setXTitle("");  
        renderer.setYTitle("");  
        renderer.setYLabelsAlign(Align.RIGHT);  
        renderer.setAxisTitleTextSize(20);  
        renderer.setPointSize((float) 1);  
        renderer.setShowLegend(false);  
        renderer.setFitLegend(true);  
        renderer.setMargins(new int[] { 30, 45, 10, 20 });// 设置图表的外边框(上/左/下/右)  
        renderer.setMarginsColor(getResources().getColor(  
                R.color.cardio_bg_color));  
    }  
      
  
    /** 
     * @Title leftUpdateCharts  
     * @Description 新生成的点一直在左侧，产生向右平移的效果， 基于X轴坐标从0开始，然后递减的思想处理 
     * @param datas  
     * @return void 
     */  
    protected void  leftUpdateCharts(ArrayList<Integer> datas) {  
        for (int addY : datas) {  
            series.add(i, addY);  
            i--;  
        }  
        if (Math.abs(i) < MAX_POINT) {  
            renderer.setXAxisMin(-MAX_POINT);  
            renderer.setXAxisMax(0);  
        } else {  
            renderer.setXAxisMin(-series.getItemCount());  
            renderer.setXAxisMax(-series.getItemCount() + MAX_POINT);  
        }  
  
        chart.repaint();  
    }  
      
    /** 
     * @Title updateCharts  
     * @Description 新生成的点一直在右侧，产生向左平移的效果，基于X轴坐标从0开始，然后递加的思想处理 
     * @param datas  
     * @return void 
     */  
    protected void updateCharts(ArrayList<Integer> datas) {  
        for (int addY : datas) {  
            series.add(i, addY);  
            i++;  
        }  
        if (i < MAX_POINT) {  
            renderer.setXAxisMin(0);  
            renderer.setXAxisMax(MAX_POINT);  
        } else {  
            renderer.setXAxisMin(series.getItemCount() - MAX_POINT);  
            renderer.setXAxisMax(series.getItemCount());  
        }  
  
        chart.repaint();  
    }  
  
    /** 
     * @Title updateChart  
     * @Description 新生成的点一直在x坐标为0处，因为将所有旧点的x坐标值加1，所以产生向右平移的效果 
     * @param addY  
     * @return void 
     */  
    private void updateChart(int addY) {  
  
        // 设置好下一个需要增加的节点   
        addX = 0;   
        // 移除数据集中旧的点集  
        mDataset.removeSeries(series);  
        // 判断当前点集中到底有多少点，因为屏幕总共只能容纳MAX_POINT个，所以当点数超过MAX_POINT时，长度永远是MAX_POINT  
        int length = series.getItemCount();  
        if (length > MAX_POINT) {  
            length = MAX_POINT;  
        }  
        // 将旧的点集中x和y的数值取出来放入backup中，并且将x的值加1，造成曲线向右平移的效果  
        for (int i = 0; i < length; i++) {  
            xv[i] = (int) series.getX(i) + 1;  
            yv[i] = (int) series.getY(i);  
        }  
        // 点集先清空，为了做成新的点集而准备   
        series.clear();  
        // 将新产生的点首先加入到点集中，然后在循环体中将坐标变换后的一系列点都重新加入到点集中  
        // 这里可以试验一下把顺序颠倒过来是什么效果，即先运行循环体，再添加新产生的点  
        series.add(addX, addY);  
        for (int k = 0; k < length; k++) {  
            series.add(xv[k], yv[k]);  
        }  
  
        // 在数据集中添加新的点集  
        mDataset.addSeries(series);   
        // 视图更新，没有这一步，曲线不会呈现动态  
        // 如果在非UI主线程中，需要调用postInvalidate()，具体参考api   
        //chart.invalidate();  
        chart.repaint();  
    }  
      
    /** 
     * @Title rightUpdateChart  
     * @Description 新生成的点一直在x坐标为MAX_POINT处，因为将所有旧点的x坐标值减1，所以产生向左平移的效果，无法看到历史数据点 
     * @param addY  
     * @return void 
     */  
    private void rightUpdateChart(int addY) {  
  
        // 设置好下一个需要增加的节点   
        addX =MAX_POINT;   
        // 移除数据集中旧的点集  
        mDataset.removeSeries(series);  
        // 判断当前点集中到底有多少点，因为屏幕总共只能容纳MAX_POINT个，所以当点数超过MAX_POINT时，长度永远是MAX_POINT  
        int length = series.getItemCount();  
        if (length > MAX_POINT) {  
            length = MAX_POINT;  
        }  
        // 将旧的点集中x和y的数值取出来放入backup中，并且将x的值-1，造成曲线向左平移的效果  
        for (int i = 0; i < length; i++) {  
            xv[i] = (int) series.getX(i) - 1;  
            yv[i] = (int) series.getY(i);  
        }  
        // 点集先清空，为了做成新的点集而准备   
        series.clear();  
        // 将新产生的点首先加入到点集中，然后在循环体中将坐标变换后的一系列点都重新加入到点集中  
        // 这里可以试验一下把顺序颠倒过来是什么效果，即先运行循环体，再添加新产生的点  
        series.add(addX, addY);  
        for (int k = 0; k < length; k++) {  
            series.add(xv[k], yv[k]);  
        }  
  
        // 在数据集中添加新的点集  
        mDataset.addSeries(series);   
        // 视图更新，没有这一步，曲线不会呈现动态  
        // 如果在非UI主线程中，需要调用postInvalidate()，具体参考api   
        //chart.invalidate();  
        chart.repaint();  
    }  
}  

完整的工程已上传至CSDN，为便于展示，将实际项目里获取到的心电图数据修改成随机数数据，详见以下链接：http://download.csdn.net/detail/lamelias/8251705
使用时请先导入Android-support-V7-appcompat，然后再导入RealTimeChart，二者导入完毕后。注意修改一下Library引用，方法如下：右击RealTimeChart工程，选择Properties->Android->下方Library->add->选择android-support-V7-appcompat即可。