Android利用Achartengine实现实时曲线图

From:http://blog.youkuaiyun.com/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

1. package com.lamelias.realtimechart;  
2.   
3. import java.util.ArrayList;  
4. import java.util.Random;  
5.   
6. import org.achartengine.ChartFactory;  
7. import org.achartengine.GraphicalView;  
8. import org.achartengine.chart.PointStyle;  
9. import org.achartengine.model.XYMultipleSeriesDataset;  
10. import org.achartengine.model.XYSeries;  
11. import org.achartengine.renderer.XYMultipleSeriesRenderer;  
12. import org.achartengine.renderer.XYSeriesRenderer;  
13.   
14. import android.content.BroadcastReceiver;  
15. import android.content.Context;  
16. import android.content.Intent;  
17. import android.content.IntentFilter;  
18. import android.graphics.Color;  
19. import android.graphics.Paint.Align;  
20. import android.os.Bundle;  
21. import android.os.Handler;  
22. import android.os.Message;  
23. import android.support.v4.app.Fragment;  
24. import android.util.Log;  
25. import android.view.LayoutInflater;  
26. import android.view.View;  
27. import android.view.ViewGroup;  
28. import android.widget.RelativeLayout;  
29. import android.widget.TextView;  
30.   
31. public class CardioChart extends Fragment {  
32.   
33.     private static String TAG = CardioChart.class.getSimpleName();  
34.     private static final int MAX_POINT = 100;  
35.     private TextView tv;  
36.     /* 呼吸波形的相关参数 */  
37.     int flagBreBt = 0;  
38.     private Handler handler;  
39.     private String title = "Cardiograph";  
40.     private XYSeries series;  
41.     private XYMultipleSeriesDataset mDataset;  
42.     private GraphicalView chart;  
43.     private XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();  
44.     XYSeriesRenderer r = new XYSeriesRenderer();  
45.     private Context context;  
46.     private int addX = -1;  
47.     int[] xv = new int[MAX_POINT];  
48.     int[] yv = new int[MAX_POINT];  
49.     RelativeLayout breathWave;  
50.     int i = 0;  
51.   
52.     int count = 0;// 每隔多少包更新一次心电图  
53.     private ArrayList<Integer> drawPack = new ArrayList<Integer>(); // 需要绘制的数据集  
54.     Random random = new Random();  
55.     private final int POINT_GENERATE_PERIOD=10; //单位是ms  
56.       
57.     Runnable runnable = new Runnable() {  
58.   
59.         @Override  
60.         public void run() {  
61.             ArrayList<Integer> datas = new ArrayList<Integer>();  
62.             for (int i = 0; i < 1; i++) {  
63.                 datas.add(random.nextInt(3000));  
64.             }  
65.               
66.             /*以下方式左右拖动坐标系时可以看到所有历史数据点*/  
67.             //updateCharts(datas);  
68.             //leftUpdateCharts(datas);  
69.               
70.             /*以下方式无法看到历史数据点，在坐标轴上只能看到MAX_POINT个数据点*/  
71.             updateChart(random.nextInt(3000));   
72.             //rightUpdateChart(random.nextInt(3000));  
73.               
74.             handler.postDelayed(this, POINT_GENERATE_PERIOD);  
75.         }  
76.     };  
77.   
78.     @Override  
79.     public void onCreate(Bundle savedInstanceState) {  
80.         super.onCreate(savedInstanceState);  
81.         handler = new Handler() ;  
82.     }  
83.   
84.     @Override  
85.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
86.             Bundle savedInstanceState) {  
87.         View view = inflater.inflate(R.layout.cardiochart, container, false);  
88.         breathWave = (RelativeLayout) view.findViewById(R.id.cardiograph);  
89.         tv = (TextView) view.findViewById(R.id.test);  
90.         initCardiograph();  
91.   
92.         return view;  
93.     }  
94.       
95.     /** 
96.      * @Title revcievedMessage  
97.      * @Description Fragment接收Activity中消息的第一种方式，直接在Fragment中提供一个public方法，供Activity调用 
98.      * @param action  
99.      * @return void 
100.      */  
101.     public void recievedMessage(String action){  
102.         switch(action){  
103.         case "START" :  
104.             handler.postDelayed(runnable, POINT_GENERATE_PERIOD);  
105.             break;  
106.         case "STOP" :  
107.             Log.w(TAG, "recieved Stop !");  
108.             handler.removeCallbacksAndMessages(null);  
109.             break;  
110.     }  
111.     }  
112.   
113.     @Override  
114.     public void onResume() {  
115.         getActivity().registerReceiver(mBroadcastReceiver, makeIntentFilter());  
116.         super.onResume();  
117.     }  
118.   
119.     @Override  
120.     public void onDestroy() {  
121.         getActivity().unregisterReceiver(mBroadcastReceiver);  
122.         super.onDestroy();  
123.     }  
124.       
125.     /** 
126.      * @Title makeIntentFilter  
127.      * @Description  Fragment接收Activity中消息的第二种方式，通过广播的方式 
128.      * @return  
129.      * @return IntentFilter 
130.      */  
131.     private IntentFilter makeIntentFilter() {  
132.         IntentFilter mIntentFilter=new IntentFilter();  
133.         mIntentFilter.addAction("START");  
134.         mIntentFilter.addAction("STOP");  
135.         return mIntentFilter;  
136.     }  
137.       
138.     private BroadcastReceiver mBroadcastReceiver=new BroadcastReceiver() {  
139.           
140.         @Override  
141.         public void onReceive(Context context, Intent intent) {  
142.             switch(intent.getAction()){  
143.                 case "START" :  
144.                     handler.postDelayed(runnable, POINT_GENERATE_PERIOD);  
145.                     break;  
146.                 case "STOP" :  
147.                     Log.w(TAG, "recieved Stop !");  
148.                     handler.removeCallbacksAndMessages(null);  
149.                     break;  
150.             }  
151.               
152.         }  
153.     };  
154.   
155.       
156.   
157.     public void initCardiograph() {  
158.         context = getActivity().getApplicationContext();  
159.         // 这个类用来放置曲线上的所有点，是一个点的集合，根据这些点画出曲线  
160.         series = new XYSeries(title);  
161.         // 创建一个数据集的实例，这个数据集将被用来创建图表  
162.         mDataset = new XYMultipleSeriesDataset();  
163.         // 将点集添加到这个数据集中  
164.         mDataset.addSeries(series);  
165.         // 以下都是曲线的样式和属性等等的设置，renderer相当于一个用来给图表做渲染的句柄  
166.         /* int color = Color.parseColor("#08145e"); */  
167.         int color = getResources().getColor(R.color.cardio_color3);  
168.         PointStyle style = PointStyle.CIRCLE;  
169.         buildRenderer(color, style, true);  
170.         // 设置好图表的样式  
171.         setChartSettings(renderer, "X", "Y", 0, MAX_POINT, 0, 3000, color,  
172.                 color);  
173.         // 生成图表  
174.         chart = ChartFactory.getLineChartView(context, mDataset, renderer);  
175.         chart.setBackgroundColor(getResources().getColor(  
176.                 R.color.cardio_bg_color));  
177.         breathWave.removeAllViews();  
178.         breathWave.addView(chart);  
179.   
180.     }  
181.   
182.     protected void buildRenderer(int color, PointStyle style, boolean fill) {  
183.   
184.         // 设置图表中曲线本身的样式，包括颜色、点的大小以及线的粗细等  
185.         r.setColor(color);  
186.         r.setPointStyle(style);  
187.         r.setFillPoints(fill);  
188.         r.setLineWidth(3);  
189.         renderer.addSeriesRenderer(r);  
190.     }  
191.   
192.     protected void setChartSettings(XYMultipleSeriesRenderer renderer,  
193.             String xTitle, String yTitle, double xMin, double xMax,  
194.             double yMin, double yMax, int axesColor, int labelsColor) {  
195.         // 有关对图表的渲染可参看api文档  
196.         renderer.setBackgroundColor(getResources().getColor(  
197.                 R.color.cardio_bg_color));  
198.         renderer.setChartTitle(title);  
199.         renderer.setChartTitleTextSize(20);  
200.         renderer.setLabelsTextSize(19);// 设置坐标轴标签文字的大小  
201.         renderer.setXTitle(xTitle);  
202.         renderer.setYTitle(yTitle);  
203.         renderer.setXAxisMin(xMin);  
204.         renderer.setXAxisMax(xMax);  
205.         renderer.setYAxisMin(yMin);  
206.         renderer.setYAxisMax(yMax);  
207.         //renderer.setYAxisAlign(Align.RIGHT, 0);//用来调整Y轴放置的位置，表示将第一条Y轴放在右侧  
208.         renderer.setAxesColor(axesColor);  
209.         renderer.setLabelsColor(labelsColor);  
210.         renderer.setShowGrid(true);  
211.         renderer.setGridColor(Color.GRAY);  
212.         renderer.setXLabels(10);//若不想显示X标签刻度，设置为0 即可  
213.         renderer.setYLabels(10);  
214.         renderer.setLabelsTextSize(18);// 设置坐标轴标签文字的大小  
215.         renderer.setXLabelsColor(labelsColor);  
216.         renderer.setYLabelsColor(0, labelsColor);  
217.         renderer.setYLabelsVerticalPadding(-5);  
218.         renderer.setXTitle("");  
219.         renderer.setYTitle("");  
220.         renderer.setYLabelsAlign(Align.RIGHT);  
221.         renderer.setAxisTitleTextSize(20);  
222.         renderer.setPointSize((float) 1);  
223.         renderer.setShowLegend(false);  
224.         renderer.setFitLegend(true);  
225.         renderer.setMargins(new int[] { 30, 45, 10, 20 });// 设置图表的外边框(上/左/下/右)  
226.         renderer.setMarginsColor(getResources().getColor(  
227.                 R.color.cardio_bg_color));  
228.     }  
229.       
230.   
231.     /** 
232.      * @Title leftUpdateCharts  
233.      * @Description 新生成的点一直在左侧，产生向右平移的效果， 基于X轴坐标从0开始，然后递减的思想处理 
234.      * @param datas  
235.      * @return void 
236.      */  
237.     protected void  leftUpdateCharts(ArrayList<Integer> datas) {  
238.         for (int addY : datas) {  
239.             series.add(i, addY);  
240.             i--;  
241.         }  
242.         if (Math.abs(i) < MAX_POINT) {  
243.             renderer.setXAxisMin(-MAX_POINT);  
244.             renderer.setXAxisMax(0);  
245.         } else {  
246.             renderer.setXAxisMin(-series.getItemCount());  
247.             renderer.setXAxisMax(-series.getItemCount() + MAX_POINT);  
248.         }  
249.   
250.         chart.repaint();  
251.     }  
252.       
253.     /** 
254.      * @Title updateCharts  
255.      * @Description 新生成的点一直在右侧，产生向左平移的效果，基于X轴坐标从0开始，然后递加的思想处理 
256.      * @param datas  
257.      * @return void 
258.      */  
259.     protected void updateCharts(ArrayList<Integer> datas) {  
260.         for (int addY : datas) {  
261.             series.add(i, addY);  
262.             i++;  
263.         }  
264.         if (i < MAX_POINT) {  
265.             renderer.setXAxisMin(0);  
266.             renderer.setXAxisMax(MAX_POINT);  
267.         } else {  
268.             renderer.setXAxisMin(series.getItemCount() - MAX_POINT);  
269.             renderer.setXAxisMax(series.getItemCount());  
270.         }  
271.   
272.         chart.repaint();  
273.     }  
274.   
275.     /** 
276.      * @Title updateChart  
277.      * @Description 新生成的点一直在x坐标为0处，因为将所有旧点的x坐标值加1，所以产生向右平移的效果 
278.      * @param addY  
279.      * @return void 
280.      */  
281.     private void updateChart(int addY) {  
282.   
283.         // 设置好下一个需要增加的节点   
284.         addX = 0;   
285.         // 移除数据集中旧的点集  
286.         mDataset.removeSeries(series);  
287.         // 判断当前点集中到底有多少点，因为屏幕总共只能容纳MAX_POINT个，所以当点数超过MAX_POINT时，长度永远是MAX_POINT  
288.         int length = series.getItemCount();  
289.         if (length > MAX_POINT) {  
290.             length = MAX_POINT;  
291.         }  
292.         // 将旧的点集中x和y的数值取出来放入backup中，并且将x的值加1，造成曲线向右平移的效果  
293.         for (int i = 0; i < length; i++) {  
294.             xv[i] = (int) series.getX(i) + 1;  
295.             yv[i] = (int) series.getY(i);  
296.         }  
297.         // 点集先清空，为了做成新的点集而准备   
298.         series.clear();  
299.         // 将新产生的点首先加入到点集中，然后在循环体中将坐标变换后的一系列点都重新加入到点集中  
300.         // 这里可以试验一下把顺序颠倒过来是什么效果，即先运行循环体，再添加新产生的点  
301.         series.add(addX, addY);  
302.         for (int k = 0; k < length; k++) {  
303.             series.add(xv[k], yv[k]);  
304.         }  
305.   
306.         // 在数据集中添加新的点集  
307.         mDataset.addSeries(series);   
308.         // 视图更新，没有这一步，曲线不会呈现动态  
309.         // 如果在非UI主线程中，需要调用postInvalidate()，具体参考api   
310.         //chart.invalidate();  
311.         chart.repaint();  
312.     }  
313.       
314.     /** 
315.      * @Title rightUpdateChart  
316.      * @Description 新生成的点一直在x坐标为MAX_POINT处，因为将所有旧点的x坐标值减1，所以产生向左平移的效果，无法看到历史数据点 
317.      * @param addY  
318.      * @return void 
319.      */  
320.     private void rightUpdateChart(int addY) {  
321.   
322.         // 设置好下一个需要增加的节点   
323.         addX =MAX_POINT;   
324.         // 移除数据集中旧的点集  
325.         mDataset.removeSeries(series);  
326.         // 判断当前点集中到底有多少点，因为屏幕总共只能容纳MAX_POINT个，所以当点数超过MAX_POINT时，长度永远是MAX_POINT  
327.         int length = series.getItemCount();  
328.         if (length > MAX_POINT) {  
329.             length = MAX_POINT;  
330.         }  
331.         // 将旧的点集中x和y的数值取出来放入backup中，并且将x的值-1，造成曲线向左平移的效果  
332.         for (int i = 0; i < length; i++) {  
333.             xv[i] = (int) series.getX(i) - 1;  
334.             yv[i] = (int) series.getY(i);  
335.         }  
336.         // 点集先清空，为了做成新的点集而准备   
337.         series.clear();  
338.         // 将新产生的点首先加入到点集中，然后在循环体中将坐标变换后的一系列点都重新加入到点集中  
339.         // 这里可以试验一下把顺序颠倒过来是什么效果，即先运行循环体，再添加新产生的点  
340.         series.add(addX, addY);  
341.         for (int k = 0; k < length; k++) {  
342.             series.add(xv[k], yv[k]);  
343.         }  
344.   
345.         // 在数据集中添加新的点集  
346.         mDataset.addSeries(series);   
347.         // 视图更新，没有这一步，曲线不会呈现动态  
348.         // 如果在非UI主线程中，需要调用postInvalidate()，具体参考api   
349.         //chart.invalidate();  
350.         chart.repaint();  
351.     }  
352. }  

完整的工程已上传至优快云，为便于展示，将实际项目里获取到的心电图数据修改成随机数数据，详见以下链接： http://download.youkuaiyun.com/detail/lamelias/8251705

使用时请先导入Android-support-V7-appcompat，然后再导入RealTimeChart，二者导入完毕后。注意修改一下Library引用，方法如下：右击RealTimeChart工程，选择Properties->Android->下方Library->add->选择android-support-V7-appcompat即可。