achartengine画出动态折线图的效果[转]

[java]  view plain copy

1. package com.auto.chat;  
2.   
3. import java.util.Timer;  
4. import java.util.TimerTask;  
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.app.Activity;   
15. import android.content.Context;  
16. import android.graphics.Color;   
17. import android.graphics.Paint.Align;  
18. import android.os.Bundle;   
19. import android.os.Handler;  
20. import android.os.Message;  
21. import android.view.ViewGroup.LayoutParams;  
22. import android.widget.LinearLayout;  
23.   
24. public class AChartDemoActivity extends Activity {  
25.       
26.     private Timer timer = new Timer();  
27.     private TimerTask task;  
28.     private Handler handler;  
29.     private String title = "Signal Strength";  
30.     private XYSeries series;  
31.     private XYMultipleSeriesDataset mDataset;  
32.     private GraphicalView chart;  
33.     private XYMultipleSeriesRenderer renderer;  
34.     private Context context;  
35.     private int addX = -1, addY;  
36.       
37.     int[] xv = new int[100];  
38.     int[] yv = new int[100];  
39.       
40.     /** Called when the activity is first created. */  
41.     @Override  
42.     public void onCreate(Bundle savedInstanceState) {  
43.         super.onCreate(savedInstanceState);  
44.         setContentView(R.layout.main);  
45.           
46.         context = getApplicationContext();  
47.           
48.         //这里获得main界面上的布局，下面会把图表画在这个布局里面  
49.         LinearLayout layout = (LinearLayout)findViewById(R.id.linearLayout1);  
50.           
51.         //这个类用来放置曲线上的所有点，是一个点的集合，根据这些点画出曲线  
52.         series = new XYSeries(title);  
53.           
54.         //创建一个数据集的实例，这个数据集将被用来创建图表  
55.         mDataset = new XYMultipleSeriesDataset();  
56.           
57.         //将点集添加到这个数据集中  
58.         mDataset.addSeries(series);  
59.           
60.         //以下都是曲线的样式和属性等等的设置，renderer相当于一个用来给图表做渲染的句柄  
61.         int color = Color.GREEN;  
62.         PointStyle style = PointStyle.CIRCLE;  
63.         renderer = buildRenderer(color, style, true);  
64.           
65.         //设置好图表的样式  
66.         setChartSettings(renderer, "X", "Y", 0, 100, 0, 90, Color.WHITE, Color.WHITE);  
67.           
68.         //生成图表  
69.         chart = ChartFactory.getLineChartView(context, mDataset, renderer);  
70.           
71.         //将图表添加到布局中去  
72.         layout.addView(chart, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
73.           
74.         //这里的Handler实例将配合下面的Timer实例，完成定时更新图表的功能  
75.         handler = new Handler() {  
76.             @Override  
77.             public void handleMessage(Message msg) {  
78.                 //刷新图表  
79.                 updateChart();  
80.                 super.handleMessage(msg);  
81.             }  
82.         };  
83.           
84.         task = new TimerTask() {  
85.             @Override  
86.             public void run() {  
87.                 Message message = new Message();  
88.                 message.what = 1;  
89.                 handler.sendMessage(message);  
90.             }  
91.         };  
92.           
93.         timer.schedule(task, 500, 500);  
94.           
95.     }  
96.       
97.     @Override  
98.     public void onDestroy() {  
99.         //当结束程序时关掉Timer  
100.         timer.cancel();  
101.         super.onDestroy();  
102.     }  
103.       
104.     protected XYMultipleSeriesRenderer buildRenderer(int color, PointStyle style, boolean fill) {  
105.         XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();  
106.           
107.         //设置图表中曲线本身的样式，包括颜色、点的大小以及线的粗细等  
108.         XYSeriesRenderer r = new XYSeriesRenderer();  
109.         r.setColor(color);  
110.         r.setPointStyle(style);  
111.         r.setFillPoints(fill);  
112.         r.setLineWidth(3);  
113.         renderer.addSeriesRenderer(r);  
114.           
115.         return renderer;  
116.     }  
117.       
118.     protected void setChartSettings(XYMultipleSeriesRenderer renderer, String xTitle, String yTitle,  
119.                                     double xMin, double xMax, double yMin, double yMax, int axesColor, int labelsColor) {  
120.         //有关对图表的渲染可参看api文档  
121.         renderer.setChartTitle(title);  
122.         renderer.setXTitle(xTitle);  
123.         renderer.setYTitle(yTitle);  
124.         renderer.setXAxisMin(xMin);  
125.         renderer.setXAxisMax(xMax);  
126.         renderer.setYAxisMin(yMin);  
127.         renderer.setYAxisMax(yMax);  
128.         renderer.setAxesColor(axesColor);  
129.         renderer.setLabelsColor(labelsColor);  
130.         renderer.setShowGrid(true);  
131.         renderer.setGridColor(Color.GREEN);  
132.         renderer.setXLabels(20);  
133.         renderer.setYLabels(10);  
134.         renderer.setXTitle("Time");  
135.         renderer.setYTitle("dBm");  
136.         renderer.setYLabelsAlign(Align.RIGHT);  
137.         renderer.setPointSize((float) 2);  
138.         renderer.setShowLegend(false);  
139.     }  
140.       
141.     private void updateChart() {  
142.           
143.         //设置好下一个需要增加的节点  
144.         addX = 0;  
145.         addY = (int)(Math.random() * 90);  
146.           
147.         //移除数据集中旧的点集  
148.         mDataset.removeSeries(series);  
149.           
150.         //判断当前点集中到底有多少点，因为屏幕总共只能容纳100个，所以当点数超过100时，长度永远是100  
151.         int length = series.getItemCount();  
152.         if (length > 100) {  
153.             length = 100;  
154.         }  
155.           
156.         //将旧的点集中x和y的数值取出来放入backup中，并且将x的值加1，造成曲线向右平移的效果  
157.         for (int i = 0; i < length; i++) {  
158.             xv[i] = (int) series.getX(i) + 1;  
159.             yv[i] = (int) series.getY(i);  
160.         }  
161.           
162.         //点集先清空，为了做成新的点集而准备  
163.         series.clear();  
164.           
165.         //将新产生的点首先加入到点集中，然后在循环体中将坐标变换后的一系列点都重新加入到点集中  
166.         //这里可以试验一下把顺序颠倒过来是什么效果，即先运行循环体，再添加新产生的点  
167.         series.add(addX, addY);  
168.         for (int k = 0; k < length; k++) {  
169.             series.add(xv[k], yv[k]);  
170.         }  
171.           
172.         //在数据集中添加新的点集  
173.         mDataset.addSeries(series);  
174.           
175.         //视图更新，没有这一步，曲线不会呈现动态  
176.         //如果在非UI主线程中，需要调用postInvalidate()，具体参考api  
177.         chart.invalidate();  
178.     }  
179. }  

[java]  view plain copy

1.   

Layout的xml如下：

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <TextView  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="wrap_content"  
10.         android:text="@string/hello" />  
11.   
12.     <LinearLayout  
13.         android:id="@+id/linearLayout1"  
14.         android:layout_width="290dp"  
15.         android:layout_height="122dp"  
16.         android:layout_x="12dp"  
17.         android:layout_y="41dp"  
18.         android:orientation="vertical" >  
19.   
20.     </LinearLayout>  
21.   
22.     <LinearLayout  
23.         android:id="@+id/linearLayout2"  
24.         android:layout_width="290dp"  
25.         android:layout_height="130dp"  
26.         android:layout_x="13dp"  
27.         android:layout_y="215dp"  
28.         android:orientation="vertical" >  
29.     </LinearLayout>  
30.   
31. </AbsoluteLayout>  

让我看了一目了然，感谢大神。设置和动态都标注的非常清楚，理解深刻。下一篇给大家做个一个布局中多条动态曲线的更新。