此文為轉載,非本人原創,尊重原創
最近一段時間完成“體重記錄”的功能,需要實現日歷和曲線的效果。也花費不少精力吧,這里就先把曲線的實現分享出來,俗話說的好:“好記憶不如爛筆頭”!
AChartEngine是什么?
AChartEngine是一個android應用的圖表庫,他支持一些常見的一些圖表,如線狀圖,區域圖,散點圖,時間圖,柱狀圖,餅狀圖,氣泡圖等。當然這次只用到了線狀圖。項目地址在http://code.google.com/p/achartengine/
下面先看下這次項目中實現的效果吧:
實現
總的來說,AChartEngine提供的api還是很全的,使用起來是很方便的,但是唯一的缺點就是api文檔描述的不夠詳細,很多自己想要的效果都只能自己根據api的命名去推測,更有甚者得必須自己親自一點點嘗試才能實現出自己想要的效果,為了以后用到,這次也在代碼中用到的接口表明了清晰的注釋,廢話不多說,直接上代碼。
1 public class WeightCurveActivity extends ActivityBase { 2 3 static final String TAG = WeightCurveActivity.class.getName(); 4 5 private LinearLayout rootLayout; 6 private XYMultipleSeriesRenderer mRenderer; 7 private XYMultipleSeriesDataset mDataset = new XYMultipleSeriesDataset(); 8 9 private int month; 10 private Date date; 11 private ArrayList<WeightRecord> records; 12 private double[] xValues; 13 private double[] yValues; 14 15 public void onCreate(Bundle outState) { 16 super.onCreate(outState); 17 setContentView(R.layout.weight_curve); 18 19 handleIntent(); 20 initRender(); 21 initData(); 22 initUI(); 23 } 24 25 private void handleIntent() { 26 String dateString = getIntent().getStringExtra(Const.DATE); 27 date = DateHelper.parseString(dateString); 28 } 29 30 private void initRender() { 31 mRenderer = buildRenderer(); 32 setChartSettings(0, 31, 30, 120); 33 } 34 35 private void initData() { 36 month = DateHelper.getMonth(date); 37 WeightRecordDao dao = new WeightRecordDao(this); 38 records = dao.getMonthLists(date); 39 Helper.showLog(TAG, records.size()); 40 dao.closeDB(); 41 initValues(); 42 } 43 44 private void initValues() { 45 int count = records.size(); 46 if (count > 0) { 47 xValues = new double[count]; 48 yValues = new double[count]; 49 for (int i = 0; i < count; i ++) { 50 WeightRecord record = records.get(i); 51 xValues[i] = DateHelper.getDay(record.record_on); 52 yValues[i] = (Math.round(record.weight * 10) / 10.0); 53 } 54 setXLabel(); 55 } 56 } 57 58 private void initUI() { 59 addXYSeries(0); 60 61 rootLayout = (LinearLayout) findViewById(R.id.root); 62 View view = ChartFactory.getLineChartView(this, mDataset, mRenderer); 63 rootLayout.addView(view); 64 } 65 66 private void setXLabel() { 67 mRenderer.setXLabels(0); // 設置X軸標簽不顯示 68 int length = xValues.length; 69 for (int i = 0; i < length; i++) { 70 mRenderer.addXTextLabel(i * 3 + 1, month + "/" + (int)xValues[i]); 71 } 72 } 73 74 private XYMultipleSeriesRenderer buildRenderer() { 75 XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer(); 76 renderer.setAxisTitleTextSize(16); // 設置坐標軸字體大小 77 renderer.setChartTitleTextSize(20); // 設置標題大小 78 renderer.setLabelsTextSize(20); // 設置標簽字體大小 79 renderer.setLegendTextSize(15); // 設置底部曲線說明字體大小 80 renderer.setShowGridX(true); // 設置X方向表格顯示 81 renderer.setShowLegend(false); // 設置底部曲線說明顯示 82 renderer.setGridColor(Color.LTGRAY); // 設置表格顏色 83 renderer.setPointSize(5f); 84 renderer.setMargins(new int[] { 30, 40, 10, 30 }); 85 renderer.setPanEnabled(true, false); // 設置曲線可滑動 86 87 renderer.setApplyBackgroundColor(true); // 設置圖表背景 88 renderer.setBackgroundColor(Color.TRANSPARENT); 89 90 renderer.setChartTitle("體重曲線"); 91 renderer.setXTitle("日期"); 92 renderer.setYTitle("體重"); 93 94 renderer.setXLabelsColor(getResources().getColor( 95 R.color.main_font_color)); 96 renderer.setXLabelsAlign(Align.CENTER); 97 renderer.setXLabelsPadding(5); 98 renderer.setYLabelsColor(0, 99 getResources().getColor(R.color.main_font_color)); 100 renderer.setYLabelsPadding(5); 101 renderer.setYLabelsAlign(Align.RIGHT); 102 103 renderer.setAxesColor(Color.GRAY); // 設置坐標軸顏色 104 renderer.setMarginsColor(getResources().getColor(R.color.main_bg_color)); // 設置圖表周圍顏色 105 106 renderer.setLabelsColor(Color.GRAY); // 設置標簽顏色 107 108 XYSeriesRenderer r = new XYSeriesRenderer(); 109 r.setColor(getResources().getColor(R.color.stress_font_color)); 110 r.setFillPoints(true); 111 r.setPointStyle(PointStyle.CIRCLE); 112 renderer.addSeriesRenderer(r); 113 r.setDisplayChartValues(true); // 設置顯示圖表值 114 r.setDisplayChartValuesDistance(1); 115 r.setChartValuesTextSize(16); 116 r.setChartValuesSpacing(10); 117 r.setHighlighted(true); 118 return renderer; 119 } 120 121 private void setChartSettings(double xMin, double xMax, double yMin, 122 double yMax) { 123 mRenderer.setXAxisMin(xMin); // 設置X軸最小值 124 mRenderer.setXAxisMax(xMax); // 設置X軸最大值 125 mRenderer.setYAxisMin(yMin); // 設置Y軸最小值 126 mRenderer.setYAxisMax(yMax); // 設置Y軸最大值 127 } 128 129 private void addXYSeries(int scale) { 130 XYSeries series = new XYSeries("", scale); 131 if (records.size() > 0) { 132 int seriesLength = xValues.length; 133 for (int k = 0; k < seriesLength; k++) { 134 series.add(k * 3 + 1, yValues[k]); 135 } 136 } 137 mDataset.addSeries(series); 138 } 139 }
現在看來代碼倒是很簡單,但是為了實現現在這個樣子,當初費了不少精力來一步步嘗試。當然AChartEngine能實現的不止這些,可以充分發揮自己的想象力與創造力,實現更加復雜的效果與功能。