用AchartEngineActivity引擎自定义图表控件和背景折线图

　　　　这段时间项目中要用到报表类的统计图，android在统计这快提供了丰富的表图插件，那就是我们很熟悉的AcharEngine，它功能强大，支持散点图、折线图、饼图、气泡图、柱状图、短棒图、仪表图等多种图表。该项目地址位于： http://code.google.com/p/achartengine/
　　　　今天我们要实现的就是，把上面的图表嵌入到一个Activity中，然后自定义图表控件和背景等等！因此我们要用到Embedded Chart，这个chart就可以嵌入到Activity中，而不用通过Intent来调用，它实际上是一个 GraphicalView对象。通过这个View就可以实现自定义。比如添加label、按钮、图片等。

先看看效果图：



AndroidMainifest.xml

在其中加入一个新的Activity，比如就叫做.SphChart：

<activity android:name=".SphChart"></activity>

这是一个普通的Activity类，我们在其中嵌入一个GraphicalView，以演示EmbeddedChart 的例子。下面我们来实现这个Activity。

Layout 文件

一个Activity一个xml布局文件，这里也不例外，我们把它命名为sph_embeddedchart.xml，放在res/layout 目录下：

<?xml version="1.0" encoding="utf-8"?>
<!-- 注意 android:background 属性的使用，为 Activity 加了一个背景图 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/LightSteelgreen"
android:orientation="vertical" >

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:gravity="center_horizontal"
android:orientation="horizontal" >

<!-- <Button
android:id="@+id/day"
android:layout_width="125dip"
android:layout_height="wrap_content"
android:background="@drawable/btn_pink"
android:text="日测量图"
android:textColor="@color/white" /> -->

<Button
android:id="@+id/week"
android:layout_width="125dip"
android:layout_height="wrap_content"
android:background="@drawable/btn_pink"
android:text="周测量图"
android:textColor="@color/white" />

<Button
android:id="@+id/mounth"
android:layout_width="125dip"
android:layout_height="wrap_content"
android:background="@drawable/btn_pink"
android:text="月测量图"
android:textColor="@color/white" />
</LinearLayout>
<!-- 这个 LinearLayout 用于放置 GraphicalView -->

<LinearLayout
android:id="@+id/chart"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:orientation="horizontal" />

</LinearLayout>

SphChart.java　　

1 public class SphChart extends Activity implements OnClickListener {
private XYMultipleSeriesDataset ds;

private XYMultipleSeriesRenderer render;

private XYSeries series;

private GraphicalView gv;

private XYSeriesRenderer xyRender;

private Button  bt_week, bt_mounth;
private String[] titles = new String[] { "收缩压(mmHg)", "脉搏(次/分)",
"舒张压(mmHg)", "正常" };
private int[] colors = new int[] { Color.RED, Color.GREEN, Color.BLUE,
Color.YELLOW };

// private DataBaseOpenHelper helper;
// private SQLiteDatabase sdb = helper.getReadableDatabase();
// private Cursor cur = sdb.query("sph", null, null, null, null, null,
// null);
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.sph_embeddedchart);
getControlsId();
setOnClick();

}

　　//onRestoreInstanceState 方法在 Activity 唤醒时调用，在此我们使用反序列化方法（getSerializable方法）从Bundle中恢复成员变量的值。
@Override
protected void onRestoreInstanceState(Bundle savedState) {
Log.i("onRestoreInstanceState", "onRestoreInstanceState");

super.onRestoreInstanceState(savedState);

ds = (XYMultipleSeriesDataset) savedState.getSerializable("dataset");

render = (XYMultipleSeriesRenderer) savedState
.getSerializable("renderer");

series = (XYSeries) savedState.getSerializable("current_series");

xyRender = (XYSeriesRenderer) savedState
.getSerializable("current_renderer");
}

　　　//在onResume方法中，我们调用getDataset方法构造了折线图的点数据，用getRenderer方法构造了折线图的Renderer，然后用ChartFactory.getLineChartView
　　 //构造了一个GraphicalView，最后把这个GraphicalView 加到id为chart的LinearLayout中。于是在 Activity 上显示了折线图。

protected void onResume() {

Log.i("onResume", "onResume");

super.onResume();

if (ds == null)
getDataset();
if (render == null)
getRenderer();

if (gv == null) {

LinearLayout layout = (LinearLayout) findViewById(R.id.chart);

gv = ChartFactory.getLineChartView(this, ds, render);

layout.addView(gv, new LayoutParams(LayoutParams.FILL_PARENT,

LayoutParams.FILL_PARENT));

} else {

// 绘制图形

gv.repaint();

}

}

　　　　// onSaveInstanceState 方法在挂起时被调用，我们在这里使用序列化方法（putSerializable方法）把Activity的成员变量储存到Bundle。
@Override
protected void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
Log.i("onSaveInstanceState", "onSaveInstanceState");

super.onSaveInstanceState(outState);

outState.putSerializable("dataset", ds);

outState.putSerializable("renderer", render);

outState.putSerializable("current_series", series);

outState.putSerializable("current_renderer", xyRender);
}

private XYMultipleSeriesDataset getDataset() {
ds = new XYMultipleSeriesDataset();
final int nr = 10;// 每个系列种包含10个随机数
for (int i = 0; i < titles.length; i++) {
// 新建一个系列（线条）
series = new XYSeries(titles[i]);

switch (i) {
case 0:
for (int k = 1; k < nr; k++) {
int m = (int) Math.rint(Math.random() * (180 - 100) + 100);
series.add(k, m);
}
ds.addSeries(series);
break;
case 1:
for (int k = 1; k < nr; k++) {
int m = (int) Math.rint(Math.random() * (80 - 60) + 60);

series.add(k, m);
}
ds.addSeries(series);
break;
case 2:

for (int k = 1; k < nr; k++) {
int m = (int) Math.rint(Math.random() * (100 - 60) + 60);
series.add(k, m);
}
ds.addSeries(series);
break;
case 3:
for (int k = 1; k < nr; k++) {
int zhenchang = 135;
series.add(k, zhenchang);
}
ds.addSeries(series);
break;
default:
break;
}

}

return ds;

}

@SuppressLint({ "ResourceAsColor", "ResourceAsColor" })
public XYMultipleSeriesRenderer getRenderer() {

// 新建一个xymultipleseries

render = new XYMultipleSeriesRenderer();
render.setAxisTitleTextSize(16); // 设置坐标轴标题文本大小
render.setChartTitleTextSize(20); // 设置图表标题文本大小
render.setChartTitle("当日测量血压数据值");
render.setLabelsTextSize(15); // 设置轴标签文本大小
render.setLegendTextSize(15); // 设置图例文本大小
render.setMargins(new int[] { 20, 30, 15, 15 }); // 设置4边留白
render.setPanEnabled(false, false); // 设置x,y坐标轴不会因用户划动屏幕而移动
render.setMarginsColor(Color.argb(0, 0xff, 0, 0));// 设置4边留白透明
render.setBackgroundColor(Color.TRANSPARENT); // 设置背景色透明
render.setApplyBackgroundColor(true); // 使背景色生效
render.setXLabels(10);// 设置X轴显示12个点，根据setChartSettings的最大值和最小值自动计算点的间隔
render.setYLabels(12);// 设置y轴显示10个点,根据setChartSettings的最大值和最小值自动计算点的间隔
render.setXLabelsAlign(Align.RIGHT);// 刻度线与刻度标注之间的相对位置关系
render.setYLabelsAlign(Align.CENTER);// 刻度线与刻度标注之间的相对位置关系
// render.setZoomButtonsVisible(true);// 是否显示放大缩小按钮
render.setShowGrid(true);// 是否显示网格
render.setGridColor(R.color.white);// 设置网格颜色
render.setAxesColor(R.color.black);// 设置X.y轴颜色
render.setFitLegend(true);// 设置自动按比例缩放
render.setYAxisMax(200.0); // 设置Y轴最大值
render.setYAxisMin(40.0); // 设置Y轴最小值

// 设置x,y轴上的刻度的颜色
render.setLabelsColor(Color.BLACK);
render.setXTitle("测量次数");
render.setYTitle("测量数值");

render.setLabelsColor(R.color.red);
// render.setYLabelsColor(1, R.color.black);
// 设置一个系列的颜色为红色
for (int i = 0; i < titles.length; i++) {
xyRender = new XYSeriesRenderer();
xyRender.setPointStyle(PointStyle.CIRCLE);
xyRender.setColor(colors[i]);// 设置线图颜色
xyRender.setFillPoints(true);// 设置为实心点
render.addSeriesRenderer(xyRender);// 添加到render中
}
return render;

}

private void getControlsId() {
//        bt_day = (Button) findViewById(R.id.day);
bt_week = (Button) findViewById(R.id.week);
bt_mounth = (Button) findViewById(R.id.mounth);
//        back_bt = (Button) findViewById(R.id.back);
//        devices_bt = (Button) findViewById(R.id.device_paired);
//        devices_bt.setVisibility(View.GONE);
}

@Override
protected void onStop() {
// TODO Auto-generated method stub
super.onStop();
}

private void setOnClick() {
bt_week.setOnClickListener(this);
bt_mounth.setOnClickListener(this);
//        back_bt.setOnClickListener(this);
}

@Override
public void onClick(View v) {
Intent intent = new Intent();
switch (v.getId()) {

case R.id.week:
intent = new Intent(SphChart.this, SphWeekData.class);
startActivity(intent);
SphChart.this.finish();
break;
case R.id.mounth:
intent = new Intent(SphChart.this, SphMounthData.class);
startActivity(intent);
SphChart.this.finish();
break;
case R.id.back:
intent = new Intent(SphChart.this, SphModule.class);
startActivity(intent);
break;
default:
break;
}
}