最近在幫老師作一個課題,其中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