2. 程式人生 > >Android——利用Achartengine製作趨勢圖（含雙Y軸，浮窗）

Android——利用Achartengine製作趨勢圖（含雙Y軸，浮窗）

阿新 • • 發佈：2019-02-12

  Achartengine是Android平臺上一款很強大的繪圖工具，能夠實現很多複雜的效果圖，但由於大部分入門者沒有耐心仔細檢視它的庫函式，所以在使用時常常捉襟見肘。本文試圖以應用中時常出現的歷史趨勢圖為例，來幫助讀者加深對Achartengine的認識與理解。首先看一下效果圖：


 歷史趨勢圖難點分析：

    1、時間軸（X軸）的表示：

    Achartengine為我們提供了ChartFactory.getTimeChartView(context, dataset, renderer, format)方法來返回一個時間圖，這是製作歷史趨勢圖時最好的選擇，大部分人也會選擇這一方法，因為它實現起來也相對容易。但是，我們

能不能使用最普通的getLineChartView(context, mDataset,mRenderer)去製作呢？如果能的話，X軸將會使用自定義label，但又因為我們的自定義label是時間格式的字串，很多人可能覺得太棘手了，放棄了此種嘗試。事實上，這種方式使用起來更加靈活，而且可以實現雙Y軸的歷史趨勢圖效果，如果使用前者，雙Y軸的效果無法實現，因為TimeSeries沒有提供類似XYSeries的(String title, int scaleNumber)構造方法 。

    2.拖動重新整理趨勢圖：

    既然是趨勢圖，自然要能夠實現拖動重新整理趨勢圖，這會使用到PanListener介面。通過addPanListener方法可以為返回的圖表新增面板事件監聽器，一旦拖動趨勢圖，就會觸發 public void panApplied()方法，在該方法裡，我們可以去處理資料的更新。而另外一點需要注意的是，我們需要確定從X軸哪一個位置處繼續往後增加X label，而X label如何處理、如何獲取也是需要我們考慮。在本例的實現過程中，以全域性變數i為X軸的索引，這樣，每次拖動時，只需要將Y座標新增到指定的X索引座標處即可，同時，也要進行X座標軸自定義Label的更新，處理思路也是如此。

    3.浮窗顯示某點數值：

    由於螢幕大小有限，所以有時候趨勢圖會很小，所以，點選某點時，彈出浮窗以顯示該點的數值就很有必要了。實現該功能最簡單的方法就是，使用Framelayout佈局，趨勢圖和浮窗分屬不同的Framelayout。首先獲取被點選的點的真實位置，其次獲取被點選點附近最近的趨勢線上的點所表示的值。前者需要為我們的圖表新增OnTouchListener監聽器，後者需要使用到SeriesSelection seriesSelection = mChartView.getCurrentSeriesAndPoint()以獲取當前點選處附近趨勢線上點的相關資訊。獲取相關資訊後，就可以在Framelayout裡使用自定義繪圖的方式，繪製一個浮窗，並設定浮窗的位置，以及需要顯示的資訊。

    以上是趨勢圖繪製過程中不得不考慮的幾點，好了閒話不說了。關鍵程式碼如下：

    主Activity程式碼：

package com.lamelias.achartengine;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		CustomFragment cf=new CustomFragment();
		getFragmentManager().beginTransaction().replace(R.id.trend_container, cf).commit();
	}
}

放置趨勢圖的Fragment： 
/**
 * @Title: CustomFragment.java
 * @Package com.mbelec.flowmeter.fragment
 * @Description: TODO
 * @author Lamelias
 * @date 2014年10月20日 上午11:23:23
 * @version V1.0
 */

package com.lamelias.achartengine;

import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Random;

import org.achartengine.ChartFactory;
import org.achartengine.GraphicalView;
import org.achartengine.chart.PointStyle;
import org.achartengine.model.SeriesSelection;
import org.achartengine.model.XYMultipleSeriesDataset;
import org.achartengine.model.XYSeries;
import org.achartengine.renderer.XYMultipleSeriesRenderer;
import org.achartengine.renderer.XYSeriesRenderer;
import org.achartengine.tools.PanListener;

import com.llamelias.achartengine.R;

import android.app.Fragment;
import android.graphics.Color;
import android.graphics.Paint.Align;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnTouchListener;
import android.widget.FrameLayout;

/**
 * @ClassName: CustomFragment
 * @Description: 自定義趨勢圖，含自定義x軸label的使用
 * @author Lamelias
 * @date 2014年10月20日 上午11:23:23
 */

public class CustomFragment extends Fragment {

	private static final String TAG =  CustomFragment.class.getSimpleName();

	private FrameLayout layoutTendency, layoutCursor, layoutBg; // layoutBg 是第三個Framelayout，可用來設定座標系不同區域的底色，暫未使用

	private XYMultipleSeriesDataset mDataset = new XYMultipleSeriesDataset();
	private XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer(2);
	private GraphicalView mChartView;
	private XYSeries pefSeries = new XYSeries("PEF");// 定義XYSeries
	private XYSeries fevSeries = new XYSeries("FEV1",1);// 定義XYSeries
	private SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
	
	private Random rand = new Random();
	private Calendar c = Calendar.getInstance();
	private  int i ; //自定義label時，X軸刻度索引

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
		
		View view = inflater.inflate(R.layout.trend_view_fragment, container,false);
		layoutTendency = (FrameLayout) view.findViewById(R.id.layout_tendency_chart);
		layoutCursor = (FrameLayout) view.findViewById(R.id.layout_tendency_cursor);
		layoutBg = (FrameLayout) view.findViewById(R.id.layout_tendency_bg);

		return view;
	}

	@Override
	public void onResume() {
		super.onResume();
		renderSettings();
		if (mChartView == null) {

			mChartView = ChartFactory.getLineChartView(getActivity(), mDataset,mRenderer);
			layoutTendency.addView(mChartView);
			
			getTendencyView();                     //初始化趨勢圖；
			
			 //新增PanListener監聽器，監測拖動趨勢圖的事件.  
		    mChartView.addPanListener(new PanListener() {
		    	@Override
		        public void panApplied() {  
		        	update();                            //拖動圖表時更新趨勢圖
		        }  
		      });  
			
			mChartView.setOnTouchListener(new OnTouchListener() {
				@Override
				public boolean onTouch(View v, MotionEvent event) {
					switch(event.getAction()){
					case MotionEvent.ACTION_DOWN:
						layoutCursor.removeAllViews();
						break;
					case MotionEvent.ACTION_MOVE:
						break;
					case MotionEvent.ACTION_UP:
						SeriesSelection seriesSelection = mChartView.getCurrentSeriesAndPoint();//獲取當前點選的點的相關資訊
						if(seriesSelection!=null){
							PopupView pv=new PopupView(getActivity()); // 浮窗
							pv.setStartX(event.getX()); //設定浮窗的位置
							pv.setStartY(event.getY());
							pv.setValue(String.valueOf(seriesSelection.getValue()));  //設定浮窗上顯示的數值
							layoutCursor.addView(pv); //將浮窗新增到Framelayout
						}
						break;
					}
					Log.w(TAG, "X座標："+event.getX()+"  Y座標："+event.getY());
					return false;
				}
			});
		}
	}

	/**
	 * @Title renderSettings
	 * @Description 渲染整個座標系
	 * @return void
	 */
	public void renderSettings() {
		mRenderer.setApplyBackgroundColor(true);// 設定是否顯示背景色
		mRenderer.setBackgroundColor(Color.WHITE);// 設定背景色

		mRenderer.setMarginsColor(Color.parseColor("#f0f3f6"));
		mRenderer.setAxesColor(Color.parseColor("#000000"));
		mRenderer.setXLabelsColor(Color.BLACK);
		mRenderer.setYLabelsColor(0, Color.BLACK);
		mRenderer.setYTitle("PEF");
		mRenderer.setYLabelsAlign(Align.LEFT);

		mRenderer.setLabelsColor(Color.BLACK);
		mRenderer.setChartTitleTextSize(20);

		mRenderer.setAxisTitleTextSize(16); // 設定軸標題文字的大小
		mRenderer.setChartTitleTextSize(20);// 設定整個圖表標題文字大小
		mRenderer.setLabelsTextSize(15);// 設定刻度顯示文字的大小(XY軸都會被設定)
		mRenderer.setLegendTextSize(15);// 圖例文字大小
		mRenderer.setMargins(new int[] { 20, 20, 0, 20 });// 設定圖表的外邊框(上/左/下/右)
		mRenderer.setPointSize(8);// 設定點的大小(圖上顯示的點的大小和圖例中點的大小都會被設定)

		mRenderer.setShowCustomTextGrid(true);//設定是否顯示自定義的刻度的網格豎線

		mRenderer.setPanEnabled(true, false);// 不可上下拖動，可水平拖動
		mRenderer.setAntialiasing(true);
		mRenderer.setFitLegend(true);// 調節圖例至適當位置
		//mRenderer.setClickEnabled(true);// 設定圖表是否允許點選
		mRenderer.setSelectableBuffer(40);// 設定點的緩衝半徑值(在某點附近點選時,多大範圍內算點選這個點)

		// 自定義標籤
		mRenderer.setXLabels(0);
		mRenderer.setYLabels(10);
		mRenderer.setYAxisMax(600);
		mRenderer.setYAxisMin(200);

		/*設定第二條Y軸*/ 
		mRenderer.setYLabelsColor(1, Color.BLACK);
		mRenderer.setYTitle("Fev1", 1);
		mRenderer.setYAxisMin(1, 1);
		mRenderer.setYAxisMax(10, 1);
		mRenderer.setYAxisAlign(Align.RIGHT, 1);
		mRenderer.setYLabelsPadding(-5);//設定label距離Y軸的水平距離
		mRenderer.setYLabelsAlign(Align.RIGHT, 1);
		
	}
	
	/**
	 * @Title update 
	 * @Description 拖動時更新趨勢圖
	 * @return void
	 */
	public void update(){
		mDataset.clear();
		
		for (int j=0; j <= 5; j++,i++) {
			pefSeries.add(i, 400+rand.nextInt(200));                     //構造pef趨勢線上新的資料點集
			fevSeries.add(i, 1+rand.nextInt(7));                              //構造pef趨勢線上新的資料點集
			mRenderer.addXTextLabel(i, sdf.format(c.getTime()));   //構造X軸新的自定義Label，自定義label只是改變了顯示的名稱，X軸本質上依然是0，1，2·······
			c.add(Calendar.DAY_OF_YEAR, 1);                               //獲得下一天
		}
		
		mDataset.addSeries(pefSeries);                                        // 在XYMultipleSeriesDataset中新增pefSeries
		mDataset.addSeries(fevSeries);                                        // 在XYMultipleSeriesDataset中新增fevSeries
		
		mChartView.repaint();                                                      //重繪 等同於invalidate()，只不過是把它封裝了
		
	}
	
	public void getTendencyView() {
		mDataset.clear();
		mRenderer.removeAllRenderers();
		pefSeries.clear();
		fevSeries.clear();

		for (int j=0; j <= 5; j++,i++){
			pefSeries.add(i, 400+rand.nextInt(200));
			fevSeries.add(i, 1+rand.nextInt(7));
			mRenderer.addXTextLabel(i, sdf.format(c.getTime()));
			c.add(Calendar.DAY_OF_YEAR, 1);
		}
		
		mDataset.addSeries(pefSeries);// 在XYMultipleSeriesDataset中新增XYSeries
		mDataset.addSeries(fevSeries);// 在XYMultipleSeriesDataset中新增XYSeries

		XYSeriesRenderer lowRenderer = new XYSeriesRenderer();// 定義XYSeriesRenderer
		mRenderer.addSeriesRenderer(lowRenderer);// 將單個XYSeriesRenderer增加到XYMultipleSeriesRenderer
		lowRenderer.setPointStyle(PointStyle.CIRCLE);// 點的型別是圓形
		lowRenderer.setFillPoints(true);// 設定點是否實心
		lowRenderer.setColor(Color.GREEN);
		
		XYSeriesRenderer highRenderer = new XYSeriesRenderer();// 定義XYSeriesRenderer
		mRenderer.addSeriesRenderer(highRenderer);// 將單個XYSeriesRenderer增加到XYMultipleSeriesRenderer
		highRenderer.setPointStyle(PointStyle.CIRCLE);// 點的型別是圓形
		highRenderer.setFillPoints(true);// 設定點是否實心

		mChartView.repaint();
	}

}
自定義浮窗檢視類： 
/**
 * @Title: PopupView.java
 * @Package com.mbelec.flowmeter.widget
 * @Description: 浮窗
 * @author Lamelias
 * @date 2014年10月17日 下午1:53:08
 * @version V1.0
 */

package com.lamelias.achartengine;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.view.View;

/**
 * @ClassName: PopupView
 * @Description: 彈窗
 * @author Lamelias
 * @date 2014年10月17日 下午1:53:08
 */

public class PopupView extends View {
	
	private static final String TAG = PopupView.class.getSimpleName();
	
	private float startX;  // 浮窗起始繪製位置X座標
	private float startY;  // 浮窗起始繪製位置Y座標
	private String value;  // 浮窗顯示的點的值
	
	private Paint textPaint=new Paint();// 字型畫筆
	private Paint  paint=new Paint();

	public PopupView(Context context) {
		super(context);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		renderPaint();
		Resources rec = getResources();
		
		BitmapDrawable bitmapDrawable = (BitmapDrawable) rec.getDrawable(R.drawable.popup);
		Bitmap bitmap = bitmapDrawable.getBitmap();
		canvas.drawBitmap(bitmap, startX-bitmap.getWidth()/2, startY, null);
		canvas.drawText(value, startX-bitmap.getWidth()/4, startY+bitmap.getHeight()*2/3, textPaint);
		
		super.onDraw(canvas);
	}

	/**
	 * @Title renderPaint 
	 * @Description 渲染畫筆
	 * @return void
	 */
	public void renderPaint(){
		paint.setColor(Color.parseColor("#97aca5"));
		paint.setStyle(Style.FILL);
		
		textPaint.setColor(Color.parseColor("#40a9b7"));
		textPaint.setTextSize(25);
		textPaint.setStyle(Style.FILL);
	}

	public float getStartX() {
		return startX;
	}

	public void setStartX(float startX) {
		this.startX = startX;
	}

	public float getStartY() {
		return startY;
	}

	public void setStartY(float startY) {
		this.startY = startY;
	}

	public String getValue() {
		return value;
	}

	public void setValue(String value) {
		this.value = value;
	}
	
	
}

完整工程程式碼下載連結：http://download.csdn.net/detail/lamelias/8062767，程式碼中已包含基準線，基準線的圖例可以自行去掉

相關推薦

Android——利用Achartengine製作趨勢圖（含雙Y軸，浮窗）

  Achartengine是Android平臺上一款很強大的繪圖工具，能夠實現很多複雜的效果圖，但由於大部分入門者沒有耐心仔細檢視它的庫函式，所以在使用時常常捉襟見肘。本文試圖以應用中時常出現的歷史趨勢圖為例，來幫助讀者加深對Achartengine的認識與理解。首先看一

iOS開發——監聽系統截圖並獲得截圖（含狀態列statusBar和鍵盤keyboard）

補充：經過真機測試，這份程式碼一點用都沒有-_- 專案需要得到獲得截圖然後生成自己的分享圖，某度能找到的基本都是怎麼獲取View的檢視，但是幾乎沒有提到包含狀態列（貌似只看到一個），而包含鍵盤的就真的沒有了。經過一翻查詢，在stackoverflow上找到了截

還原淘寶首頁最頂部的導航欄（含下拉選單，圖示等）

　　還原了淘寶首頁最頂部的導航欄，包括了各個導航的下拉列表等（位置對齊稍微有些偏差，畢竟沒有原版設計圖），用到了jquery，js，CSS3等知識。沒有花時間去做錄屏GIF，就幾張效果圖看下：如下 　　原始導航欄進去後如上圖，當滑鼠劃過後下拉選單出現，本身的背景色改變等。如下： 上圖為區域選擇，每

【Linux】Linux網路程式設計（含常見伺服器模型，上篇）

基本資料結構介紹 Linux系統是通過提供巢狀字（socket）來進行網路程式設計的。網路程式通過socket和其他幾個函式的呼叫，會返回一個通用的檔案描述符，使用者可以將這個描述符看成普通的檔案的描述符來操作，這就是Linux的裝置無關性的好處。使用者可以通過向描述符的讀

Android Studio 使用AChartEngine製作餅圖

前言：        在很多專案中都會使用到圖表，具體表現形式為餅圖、折線圖、柱狀圖等，但是網上有很多圖表架包都是需要收費的，而Google的AChartEngine是免費的，於是AChartEngine就變成了首選方案，接下來就介紹一下AChartEngine在專案中的具體使用方法。 AChartEngi

利用vml製作統計圖全攻略----餅圖的製作 （二）

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><script type="text/

HTML程式設計之利用jquery製作長圖動畫的方法

　　在網站前端程式設計開發中，我們經常會遇到需要將圖片設定為背景圖，當滑鼠移入時利用setTimeout定時器去控制改變background-position使得圖片逐幀向上移動，滑鼠移除則控制向下移動，但要注意在滑鼠移入和移出時要相互關閉定時器。具體如何來實現呢?下面就來為

利用tensorboard顯示特徵圖（28）---《深度學習》

原圖如下：（對，就是《吸血鬼日記》中的女主啦） #coding=utf-8 import tensorflow as tf import cifar10 import img_convert im

利用python製作馬賽克圖

目錄 爬蟲 拼圖 先是看到 英雄聯盟大拼圖的文章，裡面用爬蟲爬了LOL官網所有英雄的面板圖片，然後做了一個拼圖，他的拼圖用其他軟體做的，然後我就想到python應該也能做拼圖吧，然後就搜到 使用Python簡單實現馬賽克拼圖這篇技術文，照貓畫虎實

android 檢查電話號碼是否合理（含大陸和香港格式）

public class PhoneFormatCheckUtils { /** * 大陸號碼或香港號碼均可 */ public static boolean isPhon

android自定義環形統計圖（帶動畫）

一、測試截圖 二、實現原理  package com.freedomanlib; import java.util.Timer; import java.util.TimerTask; import android.annotation.SuppressLint;

Android利用Achartengine實現實時曲線圖

實時曲線圖在實際專案中經常會遇到，特別是與感測器相關的專案中。也正是因為公司專案需要實時展現從BLE裝置獲取到的心電圖資料，所以有機會對實時曲線圖的實現過程進行了較深入的探究。本文會講述兩種實現方式，其中每種實現方式裡都會包含兩種展現方式（曲線圖平移方向：左、右）。 假設

利用Javascript製作網頁特效（時間特效）

在網頁中經常可以看到各種各樣的動態時間顯示，在網頁中合理地使用時間可以增加網頁的時效感。 顯示當前時間 getHours()、getMinutes()、getSeconds()分別獲得當前小時數、當前分鐘數、當前秒數。 開啟網頁文件，在head標籤中輸

latex製作中英文簡歷（含模板程式碼）

1. 英文簡歷：  1） 網上較好的英文簡歷模板  2）較簡潔的英文簡歷模板自己主要根據第2）個模板製作了一個更為簡潔的英文簡歷， 效果如下圖: 2. 中文簡歷： 中文簡歷是根據一個師兄的簡歷改變的，效果圖如下： 中英文製作的工程差不多，就把中文版的程式碼貼出來了：

第六章 最短路徑——有向圖（Floyd-Warshall、Dijkstra、Bellman-Ford）

數組 opened 表示 printf 開始 style logs include 五行 一、Floyd-Warshall——加入點（多源最短路徑，核心算法只有五行） 城市之間的最短路徑 輸入： 4 8 1 2 2 1 3 6 1 4 4 2 3 3 3 1 7 3 4

轉:SQL SERVER 2014 安裝圖解（含 SQL SERVER 2014 安裝程序共享）

baidu ref 密碼 步驟 ase share 配置 實例 try 開篇介紹 2015年1月1日，新的一年開始之際，本來應該好好做點有意義的事情來跨個年的。結果，老習慣 - 睡覺之前一定要折騰一下電腦，說幹就幹，給新到的 DELL 電腦裝虛機，下載 SQL SERV

Redis系列--內存淘汰機制（含單機版內存優化建議）

del dbn amp 一段 最簡 nal imp 同學 博客 https://blog.csdn.net/Jack__Frost/article/details/72478400?locationNum=13&fps=1 每臺redis的服務器的內存都是有限的，而

Scrum立會報告+燃盡圖（十月二十三日總第十四次）

連接 成員 str 數據表 所有 ble fall 困難 計數 此作業要求參見：https://edu.cnblogs.com/campus/nenu/2018fall/homework/2246 項目地址：https://git.coding.net/zhangjy982

Scrum立會報告+燃盡圖（十月二十七日總第十八次）

學院 home info 記錄 href pac 貢獻 check 所有 此作業要求參見：https://edu.cnblogs.com/campus/nenu/2018fall/homework/2246 項目地址：https://git.coding.net/zhang

記錄小文件上傳的幾個例子（含進度條效果，附源碼下載）

clas 運行 open ntb httppost 會有 text recent mappath 1、簡單原生上傳 無javascript腳本、無進度條； 借助iframe實現post提交後的無刷新效果； jquery插件ajaxFileUpload.js的實現原