用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;
        }
    }