Android利用Achartengine实现实时曲线图_android 实时更新心率曲线图

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();  
    }  
}  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353

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