achartengine画出动态折线图的效果

最近有个项目需要用到实时曲线图，我也上网搜索了一下，最后还是选择使用achartengine这个现成的东西，毕竟自己再canvas一下实在是太麻烦，而且项目时间上也不允许，虽然这个画图引擎比较简单，不过勉强够用了。

下一步问题就来了，我仓促上手，只会画静态图，就是事先定义好几个坐标，然后activity载入的时候折线就已经画好了，可是我的项目要求我每隔一秒种都要把新搜集到的数据添加到图表中去，类似于windows中那个任务管理器里的性能统计图，网上搜来搜去也没找到可用的资源，学习api的文档也没看出门道，只好自己不停地试验了，最后终于用了一种笨方法实现了画动态曲线图，其它的几类图已经没时间在去试了，我想思路应该差不多，回头有空了在说吧。

package com.auto.chat;

import java.util.Timer;
import java.util.TimerTask;

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.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.graphics.Paint.Align;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;

public class AChartDemoActivity extends Activity {

private Timer timer = new Timer();
    private TimerTask task;
    private Handler handler;
    private String title = "Signal Strength";
    private XYSeries series;
    private XYMultipleSeriesDataset mDataset;
    private GraphicalView chart;
    private XYMultipleSeriesRenderer renderer;
    private Context context;
    private int addX = -1, addY;
   
    int[] xv = new int[100];
int[] yv = new int[100];

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        context = getApplicationContext();
       
        //这里获得main界面上的布局，下面会把图表画在这个布局里面
        LinearLayout layout = (LinearLayout)findViewById(R.id.linearLayout1);
       
        //这个类用来放置曲线上的所有点，是一个点的集合，根据这些点画出曲线
        series = new XYSeries(title);
       
        //创建一个数据集的实例，这个数据集将被用来创建图表
        mDataset = new XYMultipleSeriesDataset();
       
        //将点集添加到这个数据集中
        mDataset.addSeries(series);
       
        //以下都是曲线的样式和属性等等的设置，renderer相当于一个用来给图表做渲染的句柄
        int color = Color.GREEN;
        PointStyle style = PointStyle.CIRCLE;
        renderer = buildRenderer(color, style, true);
       
        //设置好图表的样式
        setChartSettings(renderer, "X", "Y", 0, 100, 0, 90, Color.WHITE, Color.WHITE);
       
        //生成图表
chart = ChartFactory.getLineChartView(context, mDataset, renderer);
       
        //将图表添加到布局中去
layout.addView(chart, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
       
        //这里的Handler实例将配合下面的Timer实例，完成定时更新图表的功能
handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
        //刷新图表
        updateChart();
        super.handleMessage(msg);
        }
        };
       
        task = new TimerTask() {
        @Override
        public void run() {
        Message message = new Message();
            message.what = 1;
            handler.sendMessage(message);
        }
        };
       
        timer.schedule(task, 500, 500);
       
    }
   
    @Override
    public void onDestroy() {
    //当结束程序时关掉Timer
    timer.cancel();
    super.onDestroy();
    }
   
    protected XYMultipleSeriesRenderer buildRenderer(int color, PointStyle style, boolean fill) {
    XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
   
    //设置图表中曲线本身的样式，包括颜色、点的大小以及线的粗细等
    XYSeriesRenderer r = new XYSeriesRenderer();
    r.setColor(color);
    r.setPointStyle(style);
    r.setFillPoints(fill);
    r.setLineWidth(3);
    renderer.addSeriesRenderer(r);
   
    return renderer;
    }
   
    protected void setChartSettings(XYMultipleSeriesRenderer renderer, String xTitle, String yTitle,
    double xMin, double xMax, double yMin, double yMax, int axesColor, int labelsColor) {
    //有关对图表的渲染可参看api文档
    renderer.setChartTitle(title);
    renderer.setXTitle(xTitle);
    renderer.setYTitle(yTitle);
    renderer.setXAxisMin(xMin);
    renderer.setXAxisMax(xMax);
    renderer.setYAxisMin(yMin);
    renderer.setYAxisMax(yMax);
    renderer.setAxesColor(axesColor);
    renderer.setLabelsColor(labelsColor);
    renderer.setShowGrid(true);
    renderer.setGridColor(Color.GREEN);
    renderer.setXLabels(20);
    renderer.setYLabels(10);
    renderer.setXTitle("Time");
    renderer.setYTitle("dBm");
    renderer.setYLabelsAlign(Align.RIGHT);
    renderer.setPointSize((float) 2);
    renderer.setShowLegend(false);
    }
   
    private void updateChart() {
   
    //设置好下一个需要增加的节点
    addX = 0;
addY = (int)(Math.random() * 90);

//移除数据集中旧的点集
mDataset.removeSeries(series);

//判断当前点集中到底有多少点，因为屏幕总共只能容纳100个，所以当点数超过100时，长度永远是100
int length = series.getItemCount();
if (length > 100) {
length = 100;
}

//将旧的点集中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();
    }
}

</pre>Layout的xml如下：<p></p><pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="290dp"
        android:layout_height="122dp"
        android:layout_x="12dp"
        android:layout_y="41dp"
        android:orientation="vertical" >

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="290dp"
        android:layout_height="130dp"
        android:layout_x="13dp"
        android:layout_y="215dp"
        android:orientation="vertical" >
    </LinearLayout>

</AbsoluteLayout>

sdk的版本是2.2的，效果一般，不过至少能动起来了，上面是一个demo，做其它程序的时候可以写一个继承了View的类，把上面的代码装进去，然后在其它Activity中的任何布局中都可以用addView来添加上这里画出来的曲线了。

评论

3 楼 Janne 2016-06-15  

你好 有源代码？可以发到我的邮箱里学学吗？[e-mail]，谢谢

2 楼 anbo724 2012-10-26  

我的邮箱 [e-mail]谢谢@

1 楼 anbo724 2012-10-26  

你好 请问有源码没《？谢谢