Android传感器之绘图篇——Handler学习

在学习Android传感器的过程中，需要采集传感器实时数据并显示在图表中，绘制图表采用Android自己带的canvas效率不高，因此需要采用第三方的绘图库achartengine。

首先简要介绍一下achartengine包含的模块。

XYSeries: 最常用的数据结构，主要包括一系列的double型（x,y）点对及一个名称（title）。
XYValueSeries:包括一系列的(x,y,value)点对及一个名称（title）。
XYMultipleSeriesDataset:包含一系列XYSeries，是最终的数据结构

TimeSeries:与XYSeries类似，x变为Date型,可以转化为XYSeries。

CategorySeries:与XYSeries类似，x变为string型，可以转化为XYSeries。

MultipleCategorySeries:一系列CategorySeries。

以上就是achartengine

绘制一个图表我们需要了解三个概念

1,ChartFactory ,传入XYMutilpleSeriesRenderer,XYMutilpleSeriesDataset,然后,我们只需用 getXXXChartIntent(Context context,XYMutilpleSeriesRenderer,XYMutilpleSeriesDataset,)方法就可以进行图表的显示

2,XYMutilpleSeriesRenderer 用于进行绘制的设置,添加的XYSeriesRender对象,用于定义绘制的点集合设置,注意数量要和XYMutilpleSeriesDataset,添加的XYseries一致!!!

3,XYMutilpleSeriesDataset 用于数据的存放,添加的XYseries对象,用于提供绘制的点集合的数据

package com.example.xymultipleseriesrenderer;

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 com.neurosky.thinkgear.TGDevice;

import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;
import android.widget.Toast;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;

@SuppressLint("ResourceAsColor")
public class MainActivity extends Activity {
	TGDevice tgDevice = null;
	private GraphicalView chart;
	private XYMultipleSeriesRenderer renderer;
	private Context context;
	private XYMultipleSeriesDataset mDataset;
	private XYSeries series;
	private String title = "";
	private int addX = -1;
	double addY;
	private Random rd =new Random();
	  //使用handler时首先要创建一个handler
    Handler handler = new Handler();
    //要用handler来处理多线程可以使用runnable接口，这里先定义该接口
    //线程中运行该接口的run函数
    Runnable update_thread = new Runnable()
    {
        public void run()
        {
            //线程每次执行时输出"UpdateThread..."文字,且自动换行
            //textview的append功能和Qt中的append类似，不会覆盖前面
            //的内容，只是Qt中的append默认是自动换行模式
        	updateChart(rd.nextInt(100)+10);
            //延时1s后又将线程加入到线程队列中
            handler.postDelayed(update_thread, 10);

        }
    };

	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		int color = Color.GREEN;
		PointStyle style = PointStyle.CIRCLE;
		context = getApplicationContext();
		// 这里获得main界面上的布局，下面会把图表画在这个布局里面
		LinearLayout layout = (LinearLayout) findViewById(R.id.lin);
		// 这个类用来放置曲线上的所有点，是一个点的集合，根据这些点画出曲线
		series = new XYSeries(title);

		// 创建一个数据集的实例，这个数据集将被用来创建图表
		mDataset = new XYMultipleSeriesDataset();

		// 将点集添加到这个数据集中
		mDataset.addSeries(series);
		renderer = buildRenderer(color, style, true);
		// 设置好图表的样式
		setChartSettings(renderer, "time", "ecg",  0, 200, -500, 500,
				Color.WHITE, Color.BLACK);
//		OnDraw();
		
		// 生成图表
		chart = ChartFactory.getLineChartView(context, mDataset,
				renderer);
		//将线程接口立刻送到线程队列中
	     handler.post(update_thread);

		
		//XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
		// 将图表添加到布局中去
		layout.addView(chart, new LayoutParams(
				LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
	}
	/**
	 * 坐标轴(渲染器) : 对曲线图渲染器进行配置, 主要配置坐标轴
	 *
	 * @param renderer 要进行配置的渲染器
	 * @param title 图表的名称
	 * @param xTitle x轴坐标的名称
	 * @param yTitle y轴坐标的名称
	 * @param xMin x轴最小值
	 * @param xMax x轴最大值
	 * @param yMin y轴最小值
	 * @param yMax y轴最大值
	 * @param axesColor 坐标轴的颜色
	 * @param labelsColor 标签的颜色
	 */
	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(0);
		renderer.setYLabels(0);
		renderer.setPointSize((float) 2);
		renderer.setShowLegend(false);
		renderer.setPanEnabled(false);
		renderer.setZoomEnabled(false, false);
		
		
		renderer.setApplyBackgroundColor(true); // 设置是否显示背景色
		renderer.setBackgroundColor(Color.BLACK); // 设置背景色
		renderer.setMargins(new int[] { 10, 40, 40, 10 }); // 设置图表的外边框(上/左/下/右)
		renderer.setAxisTitleTextSize(25); // 设置轴标题文字的大小
		renderer.setLabelsTextSize(20); // 设置刻度显示文字的大小(XY轴都会被设置)
		renderer.setLegendTextSize(20); // 图例文字大小
		renderer.setPointSize(2); // 设置点的大小(图上显示的点的大小和图例中点的大小都会被设置)
		renderer.setShowGrid(true); // 是否显示网格
		renderer.setSelectableBuffer(10); // 设置点的缓冲半径值(在某点附件点击时,多大范围内都算点击这个点)
		
		renderer.setLegendHeight(100); // 设置图例文字位置高度
		renderer.setAxesColor(Color.argb(255, 250, 250, 250)); // 轴颜色
		renderer.setGridColor(Color.argb(150, 200, 200, 200)); // 网格颜色
		renderer.setLabelsColor(Color.argb(180, 180, 180, 180)); // 标注颜色
		renderer.setXLabels(20); // X轴刻度数量
		renderer.setYLabels(50); // Y轴刻度数量
		renderer.setXLabelsColor(Color.argb(255, 255, 255, 255)); // X轴标签文字颜色
		renderer.setYLabelsColor(0, Color.argb(255, 255, 255, 255)); // Y轴标签文字颜色
	}
	/**
	 * 曲线图(渲染器) : 创建曲线图图表渲染器
	 *
	 * @param 每条曲线要渲染的颜色, 把这些颜色放入数组
	 * @param 每条曲线绘制点的风格
	 * @return 数据渲染器集合
	 */
	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;
	}
	 
	 private void updateChart(int rawdata) {
			addY = rawdata;
			// 移除数据集中旧的点集
			mDataset.removeSeries(series);
			// 判断当前点集中到底有多少点，因为屏幕总共只能容纳100个，所以当点数超过100时，长度永远是100
			int length = series.getItemCount();
			if (length > 200) {
				// length = 2048;
				series.clear();
				addX = 0;
			}
			series.add(addX++, addY);
			mDataset.addSeries(series);
			// 视图更新，没有这一步，曲线不会呈现动态
			// 如果在非UI主线程中，需要调用postInvalidate()，具体参考api
			chart.invalidate();
		}
}