Android圖表引擎AChartEngine之折線圖使用

        最近在幫老師作一個課題,其中app端須要顯示折線圖以便直觀地看數據波動,上網查了些資料後發現了這款圖標引擎,另外感謝李坤老師的博客,幫助很大。java

  廢話很少說,下面寫代碼。android

一.AChartEngine是一款很是強大的繪圖引擎,不過我這裏只需用到折線圖,因此並無其餘圖的使用。首先咱們要導入achartengine-xxx.jar,我這裏使用的是achartengine-0.7.0.jar.sql

二.工欲善其事,必先利其器。因爲在項目中須要使用圖表的地方不止一處,我根據本身實際所需狀況先封了個工具類。app

  1 package xidian.zhr.utils;
  2 
  3 import java.util.ArrayList;
  4 import java.util.List;
  5 
  6 import org.achartengine.ChartFactory;
  7 import org.achartengine.chart.PointStyle;
  8 import org.achartengine.model.XYMultipleSeriesDataset;
  9 import org.achartengine.model.XYSeries;
 10 import org.achartengine.renderer.XYMultipleSeriesRenderer;
 11 import org.achartengine.renderer.XYSeriesRenderer;
 12 
 13 import android.content.Context;
 14 import android.graphics.Color;
 15 import android.graphics.Paint.Align;
 16 import android.view.View;
 17 import android.widget.LinearLayout;
 18 
 19 public class AChartEngineUtil 
 20 {
 21     
 22     
 23     /**
 24      * 獲取座標序列
 25      * @param size 序列點數
 26      * @param values  y軸值
 27      * @return  座標x軸序列   或   座標y軸序列
 28      */
 29     public static List<double[]> getlist(int size,List<String> values)
 30     {
 31         List<double[]> xy = new ArrayList<double[]>();
 32         
 33         double[] list =  new double[size];
 34         for(int i = 0 ; i < size ;i++)
 35         {
 36             list[i] = (values.isEmpty())? i : Double.valueOf(values.get(i));
 37         }
 38         
 39         xy.add(list);
 40         
 41         return xy;
 42     }
 43     
 44     
 45      /** 
 46        * 構建XYMultipleSeriesRenderer. 
 47        *  
 48        * @param colors 每一個序列的顏色 
 49        * @param styles 每一個序列點的類型(可設置三角,圓點,菱形,方塊等多種) 
 50        *                            ( PointStyle.CIRCLE, PointStyle.DIAMOND,PointStyle.TRIANGLE, PointStyle.SQUARE )
 51        * @return XYMultipleSeriesRenderer 
 52        */  
 53     public static XYMultipleSeriesRenderer buildRenderer(int[] colors,PointStyle[] styles)
 54     {
 55         XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
 56         // 控制橫縱軸的屬性字大小
 57         renderer.setAxisTitleTextSize(15);
 58         // 控制橫縱軸的值大小
 59         renderer.setChartTitleTextSize(20);
 60         renderer.setLabelsTextSize(15);
 61         renderer.setLegendTextSize(15);
 62         renderer.setPointSize(5f);
 63         renderer.setMargins(new int[]
 64         { 20, 30, 15, 0 });
 65         int length = colors.length;
 66         for (int i = 0; i < length; i++)
 67         {
 68             XYSeriesRenderer r = new XYSeriesRenderer();
 69             r.setColor(colors[i]);
 70             r.setPointStyle(styles[i]);
 71             renderer.addSeriesRenderer(r);
 72         }
 73         return renderer;
 74     }
 75 
 76      /** 
 77        * 設置renderer的一些座標軸屬性. 
 78        *  
 79        * @param renderer 要設置的renderer 
 80        * @param title 圖表標題 
 81        * @param xTitle X軸標題 
 82        * @param yTitle Y軸標題 
 83        * @param xMin X軸最小值 
 84        * @param xMax X軸最大值 
 85        * @param yMin Y軸最小值 
 86        * @param yMax Y軸最大值 
 87        * @param axesColor X軸顏色 
 88        * @param labelsColor Y軸顏色 
 89        */  
 90     public static void setChartSettings(XYMultipleSeriesRenderer renderer,
 91             String title, String xTitle, String yTitle, double xMin,
 92             double xMax, double yMin, double yMax, int axesColor,
 93             int labelsColor)
 94     {
 95         renderer.setChartTitle(title);
 96         renderer.setXTitle(xTitle);
 97         renderer.setYTitle(yTitle);
 98         renderer.setXAxisMin(xMin);
 99         renderer.setXAxisMax(xMax);
100         renderer.setYAxisMin(yMin);
101         renderer.setYAxisMax(yMax);
102         renderer.setAxesColor(axesColor);
103         renderer.setLabelsColor(labelsColor);
104     }
105 
106      /** 
107        * 構建和時間有關的XYMultipleSeriesDataset,這個方法與buildDataset在參數上區別是須要List<Date[]>做參數. 
108        *  
109        * @param titles 序列圖例 
110        * @param xValues X軸值 
111        * @param yValues Y軸值 
112        * @return XYMultipleSeriesDataset 
113        */  
114     public static XYMultipleSeriesDataset buildDataset(String[] titles,
115             List<double[]> xValues, List<double[]> yValues)
116     {
117         XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
118         int length = titles.length;
119         for (int i = 0; i < length; i++)
120         {
121             XYSeries series = new XYSeries(titles[i]);
122             double[] xV = xValues.get(i);
123             double[] yV = yValues.get(i);
124             int seriesLength = xV.length;
125             for (int k = 0; k < seriesLength; k++)
126             {
127                 series.add(xV[k], yV[k]);
128             }
129             dataset.addSeries(series);
130         }
131         return dataset;
132     }
133     
134     
135     
136     /**
137      * 繪製圖表
138      * @param context  當前環境
139      * @param layout   承載圖標的容器
140      * @param titles   折線名稱
141      * @param colors   折線顏色
142      * @param data     y軸座標數據
143      * @param xname    x軸名字
144      * @param yname    y軸名字
145      */
146     public static void setchart(Context context,LinearLayout layout,String[] titles,int[] colors,
147             List<String> data,String xname,String yname)
148     {
149         
150         //獲取x軸座標
151         List<double[]> x = getlist(data.size(), new ArrayList<String>());
152         //獲取y軸座標
153         List<double[]> values = getlist(data.size(),data);
154         
155         PointStyle[] styles = new PointStyle[] {PointStyle.CIRCLE};
156         //構建XYMultipleSeriesRenderer
157         XYMultipleSeriesRenderer renderer = buildRenderer(colors, styles);
158         
159         setChartSettings(renderer, "", xname, yname, 0.5, 12.5, 0, 30,Color.LTGRAY, Color.LTGRAY);
160         
161         int length = renderer.getSeriesRendererCount();//獲取點數量
162         for (int i = 0; i < length; i++) 
163         {
164               ((XYSeriesRenderer) renderer.getSeriesRendererAt(i)).setFillPoints(true);//設置圖上的點爲實心  
165         }
166         renderer.setXLabels(12);//設置x軸顯示12個點,根據setChartSettings的最大值和最小值自動計算點的間隔  
167         renderer.setYLabels(10);//設置y軸顯示10個點,根據setChartSettings的最大值和最小值自動計算點的間隔  
168         renderer.setShowGrid(true);//是否顯示網格  
169         renderer.setXLabelsAlign(Align.RIGHT);//刻度線與刻度標註之間的相對位置關係  
170         renderer.setYLabelsAlign(Align.CENTER);//刻度線與刻度標註之間的相對位置關係  
171         renderer.setZoomButtonsVisible(true);//是否顯示放大縮小按鈕  
172         renderer.setPanLimits(new double[] { -10, 300, -10, 300 }); //設置拖動時X軸Y軸容許的最大值最小值.  
173         renderer.setZoomLimits(new double[] {  -10, 300, -10, 300 });//設置放大縮小時X軸Y軸容許的最大最小值. 
174         
175         //構建view
176         View v = ChartFactory.getLineChartView(context,buildDataset(titles, x, values),renderer); 
177         
178         layout.addView(v);
179     }
180 }

 

三.下面是個人界面代碼,因爲這課題並不在意界面,我這裏也就簡陋了點工具

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <LinearLayout 
 3     android:layout_width="fill_parent"
 4     android:layout_height="fill_parent"
 5     android:orientation="vertical"
 6     android:background="@color/black"
 7     xmlns:android="http://schemas.android.com/apk/res/android">
 8     
 9     <LinearLayout  
10             android:layout_width="fill_parent"
11             android:layout_height="25dp"
12             android:orientation="horizontal"
13             android:layout_marginLeft="25dp"
14             android:layout_marginRight="10dp"
15             android:layout_marginTop="5dp"
16             android:gravity="left|center_vertical"
17             android:background="@drawable/prompt">
18             <TextView 
19                 android:layout_width="wrap_content"
20                 android:layout_height="wrap_content"
21                 android:textColor="#FFFFFF" 
22                 android:textStyle="bold"
23                 android:textSize="15dp"
24                 android:text="@string/glu_value"
25                 android:layout_marginLeft="60dp"
26                 android:paddingTop="3dp"/>
27     </LinearLayout>
28     
29     <LinearLayout 
30         android:id="@+id/gluc_glulay"
31         android:orientation="vertical"
32         android:layout_width="fill_parent"
33         android:layout_height="230dp"
34         android:gravity="center_horizontal">
35     </LinearLayout>
36     
37     <LinearLayout  
38             android:layout_width="fill_parent"
39             android:layout_height="25dp"
40             android:orientation="horizontal"
41             android:layout_marginLeft="25dp"
42             android:layout_marginRight="10dp"
43             android:layout_marginTop="5dp"
44             android:gravity="left|center_vertical"
45             android:background="@drawable/prompt">
46             <TextView 
47                 android:layout_width="wrap_content"
48                 android:layout_height="wrap_content"
49                 android:textColor="#FFFFFF" 
50                 android:textStyle="bold"
51                 android:textSize="15dp"
52                 android:text="@string/insulin_value"
53                 android:layout_marginLeft="60dp"
54                 android:paddingTop="3dp"/>
55     </LinearLayout>
56     
57     <LinearLayout 
58         android:id="@+id/gluc_ydslay"
59         android:orientation="vertical"
60         android:layout_width="fill_parent"
61         android:layout_height="230dp"
62         android:gravity="center_horizontal">
63     </LinearLayout>
64     
65 </LinearLayout>

四.下面來到咱們的Activity,這部分代碼就很簡單了,就是實例化控件以及籌備數據,再調用工具類繪圖方法便可,就不所有貼出了。ui

 1         glu_chart = (LinearLayout)findViewById(R.id.gluc_glulay);
 2         yds_chart = (LinearLayout)findViewById(R.id.gluc_ydslay);
 3         sqlitedatabase = DbManager.open(GlucoseChartA

ctivity.this);
 4         GlucoseDao glucoseDao = new GlucoseDao(sqlitedatabase);
 5         glulist = glucoseDao.getglucose(getsql(" and GlucoseDate = ? "), new String[]{TimeUtil.getNowDate()});
 6         //獲取數據
 7         List<String> glu_data = new ArrayList<String>();
 8         List<String> yds_data = new ArrayList<String>();
 9         for(int i = 0; i< glulist.size() ;i++)
10         {
11             glu_data.add(String.valueOf(glulist.get(i).getGlucoseValue()));
12             yds_data.add(String.valueOf(glulist.get(i).getGlucoseYDSValue()));
13         }
14         //調用工具類方法
15         AChartEngineUtil.setchart(GlucoseChartActivity.this,glu_chart,new String[]{"血糖值"},new int[]{Color.GREEN},glu_data,"時間","血糖值");
16         AChartEngineUtil.setchart(GlucoseChartActivity.this,yds_chart,new String[]{"胰島素值"},new int[]{Color.YELLOW},yds_data,"時間","胰島素值");

五,最後看看咱們的效果圖,我這裏隨便擬了幾條數據this

相關文章
相關標籤/搜索