用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;  4 
    private XYMultipleSeriesRenderer render;  6 
    private XYSeries series;  8 
    private GraphicalView gv;  10 
    private XYSeriesRenderer xyRender;  12 
    private Button bt_week, bt_mounth;  14     private String[] titles = new String[] { "收縮壓(mmHg)", "脈搏(次/分)",  15             "舒張壓(mmHg)", "正常" };  16     private int[] colors = new int[] { Color.RED, Color.GREEN, Color.BLUE,  17  Color.YELLOW };  18 
    // private DataBaseOpenHelper helper;  20     // private SQLiteDatabase sdb = helper.getReadableDatabase();  21     // private Cursor cur = sdb.query("sph", null, null, null, null, null,  22     // null);
 @Override  24     protected void onCreate(Bundle savedInstanceState) {  25         super.onCreate(savedInstanceState);  26  setContentView(R.layout.sph_embeddedchart);  27  getControlsId();  28  setOnClick();  29 
 }
  31 　　//onRestoreInstanceState 方法在 Activity 喚醒時調用，在此我們使用反序列化方法（getSerializable方法）從Bundle中恢復成員變量的值。
 @Override  33     protected void onRestoreInstanceState(Bundle savedState) {  34         Log.i("onRestoreInstanceState", "onRestoreInstanceState");  35 
        super.onRestoreInstanceState(savedState);  37 
        ds = (XYMultipleSeriesDataset) savedState.getSerializable("dataset");  39 
        render = (XYMultipleSeriesRenderer) savedState  41                 .getSerializable("renderer");  42 
        series = (XYSeries) savedState.getSerializable("current_series");  44 
        xyRender = (XYSeriesRenderer) savedState  46                 .getSerializable("current_renderer");  47  }  48 

　　　//在onResume方法中，我們調用getDataset方法構造了折線圖的點數據，用getRenderer方法構造了折線圖的Renderer，然后用ChartFactory.getLineChartView
　　 //構造了一個GraphicalView，最后把這個GraphicalView 加到id為chart的LinearLayout中。於是在 Activity 上顯示了折線圖。

    protected void onResume() {  50 
        Log.i("onResume", "onResume");  52 
        super.onResume();  54 
        if (ds == null)  56  getDataset();  57         if (render == null)  58  getRenderer();  59 
        if (gv == null) {  61 
            LinearLayout layout = (LinearLayout) findViewById(R.id.chart);  63 
            gv = ChartFactory.getLineChartView(this, ds, render);  65 
            layout.addView(gv, new LayoutParams(LayoutParams.FILL_PARENT,  67 
 LayoutParams.FILL_PARENT));  69 
        } else {  71 
            // 繪制圖形

 gv.repaint();  75 
 }  77 
 }  79 
　　　　// onSaveInstanceState 方法在掛起時被調用，我們在這里使用序列化方法（putSerializable方法）把Activity的成員變量儲存到Bundle。
 @Override  81     protected void onSaveInstanceState(Bundle outState) {  82         super.onSaveInstanceState(outState);  83         Log.i("onSaveInstanceState", "onSaveInstanceState");  84 
        super.onSaveInstanceState(outState);  86 
        outState.putSerializable("dataset", ds);  88 
        outState.putSerializable("renderer", render);  90 
        outState.putSerializable("current_series", series);  92 
        outState.putSerializable("current_renderer", xyRender);  94  }  95 
    private XYMultipleSeriesDataset getDataset() {  97         ds = new XYMultipleSeriesDataset();  98         final int nr = 10;// 每個系列種包含10個隨機數
        for (int i = 0; i < titles.length; i++) { 100             // 新建一個系列（線條）
            series = new XYSeries(titles[i]); 102 
            switch (i) { 104             case 0: 105                 for (int k = 1; k < nr; k++) { 106                     int m = (int) Math.rint(Math.random() * (180 - 100) + 100); 107  series.add(k, m); 108  } 109  ds.addSeries(series); 110                 break; 111             case 1: 112                 for (int k = 1; k < nr; k++) { 113                     int m = (int) Math.rint(Math.random() * (80 - 60) + 60); 114                     
 series.add(k, m); 116  } 117  ds.addSeries(series); 118                 break; 119             case 2: 120 
                for (int k = 1; k < nr; k++) { 122                     int m = (int) Math.rint(Math.random() * (100 - 60) + 60); 123  series.add(k, m); 124  } 125  ds.addSeries(series); 126                 break; 127             case 3: 128                 for (int k = 1; k < nr; k++) { 129                     int zhenchang = 135; 130  series.add(k, zhenchang); 131  } 132  ds.addSeries(series); 133                 break; 134             default: 135                 break; 136  } 137 
 } 139 
        return ds; 141 
 } 143 
    @SuppressLint({ "ResourceAsColor", "ResourceAsColor" }) 145     public XYMultipleSeriesRenderer getRenderer() { 146 
        // 新建一個xymultipleseries

        render = new XYMultipleSeriesRenderer(); 150         render.setAxisTitleTextSize(16); // 設置坐標軸標題文本大小
        render.setChartTitleTextSize(20); // 設置圖表標題文本大小
        render.setChartTitle("當日測量血壓數據值"); 153         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);// 刻度線與刻度標注之間的相對位置關系 164         // 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軸最小值 171 
        // 設置x,y軸上的刻度的顏色
 render.setLabelsColor(Color.BLACK); 174         render.setXTitle("測量次數"); 175         render.setYTitle("測量數值"); 176 
 render.setLabelsColor(R.color.red); 178         // render.setYLabelsColor(1, R.color.black); 179         // 設置一個系列的顏色為紅色
        for (int i = 0; i < titles.length; i++) { 181             xyRender = new XYSeriesRenderer(); 182  xyRender.setPointStyle(PointStyle.CIRCLE); 183             xyRender.setColor(colors[i]);// 設置線圖顏色
            xyRender.setFillPoints(true);// 設置為實心點
            render.addSeriesRenderer(xyRender);// 添加到render中
 } 187         return render; 188 
 } 190 
    private void getControlsId() { 192 // bt_day = (Button) findViewById(R.id.day);
        bt_week = (Button) findViewById(R.id.week); 194         bt_mounth = (Button) findViewById(R.id.mounth); 195 // back_bt = (Button) findViewById(R.id.back); 196 // devices_bt = (Button) findViewById(R.id.device_paired); 197 // devices_bt.setVisibility(View.GONE);
 } 199 
 @Override 201     protected void onStop() { 202         // TODO Auto-generated method stub
        super.onStop(); 204  } 205 
    private void setOnClick() { 207         bt_week.setOnClickListener(this); 208         bt_mounth.setOnClickListener(this); 209 // back_bt.setOnClickListener(this);
 } 211 
 @Override 213     public void onClick(View v) { 214         Intent intent = new Intent(); 215         switch (v.getId()) { 216 
        case R.id.week: 218             intent = new Intent(SphChart.this, SphWeekData.class); 219  startActivity(intent); 220             SphChart.this.finish(); 221             break; 222         case R.id.mounth: 223             intent = new Intent(SphChart.this, SphMounthData.class); 224  startActivity(intent); 225             SphChart.this.finish(); 226             break; 227         case R.id.back: 228             intent = new Intent(SphChart.this, SphModule.class); 229  startActivity(intent); 230             break; 231         default: 232             break; 233  } 234  } 235