Android 中使用 ichartjs 完成圖表的展現

時間 2019-11-05

標籤 android 使用 ichartjs 完成圖表展現欄目 Android 简体版

原文原文鏈接

ichartjs 是一款基於HTML5的圖形庫。使用純javascript語言, 利用HTML5的canvas標籤繪製各式圖形.ichartjs致力於爲您的應用提供簡單、直觀、可交互的體驗級圖表組件。是WEB/APP圖表展現方面的解決方案 ichartjs目前支持餅圖、環形圖、折線圖、面積圖、柱形圖、條形圖。ichartjs是基於Apache License 2.0協議的開源項目。 html

2. 下載ichartjs放入android工程中以下圖所示位置:<br>

3. 新建一個html文件:index.html java

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no" target-densitydpi="device-dpi"/>
	<title>Document</title>
	<script src="file:///android_asset/ichart.1.2.min.js" type="text/javascript" charset="utf-8" > </script>
	<script type="text/javascript" charset="utf-8" >
	</script>
</head>

<body onload="javascript:myObject.init()">
	<div id='canvasDiv'></div>
</body>

<script type="text/javascript" charset="utf-8" >
	
	var mdata;
	var w;
	var h;

	 function setContactInfo(data)  
     {  
            mdata= eval(data);   //經過eval方法處理獲得json對象數組  
            w=window.myObject.getW();
            h=window.myObject.getH();
            execute();
     }

	 function execute(){	
		var chart = new iChart.Column2D({
			render : 'canvasDiv',//渲染的Dom目標,canvasDiv爲Dom的ID
			data: mdata,//綁定數據
			width : w,//設置寬度，默認單位爲px
			height : h-40,//設置高度，默認單位爲px
			// shadow:true,//激活陰影
			// shadow_color:'#c7c7c7',//設置陰影顏色
			border:0,
			animation_timing_function:'easeIn',
			coordinate:{//配置自定義座標軸
				scale:[{//配置自定義值軸
					 position:'left',//配置左值軸	
					 start_scale:0,//設置開始刻度爲0
					 end_scale:26,//設置結束刻度爲26
					 scale_space:2,//設置刻度間距
					 listeners:{//配置事件
						parseText:function(t,x,y){//設置解析值軸文本
							return {text:t+" cm"}
						}
					}
				}]
			},
			sub_option:{
				listeners:{			
					click:function(r,e,m){
						window.myObject.setValue(r.get('name'),r.get('value'));
					}
				}
			}
		});
		//調用繪圖方法開始繪圖
		chart.draw();
	}
	

	</script>
</html>

4.在activity中對webview作一些簡單的設置 android

       @Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		webView = (WebView) findViewById(R.id.webView1);

		webView.setHorizontalScrollBarEnabled(true);
		webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_INSET);

		WebSettings settings = webView.getSettings();

		// 設置字符集編碼
		settings.setDefaultTextEncodingName("UTF-8");
		settings.setPluginsEnabled(true);
		// 開啓JavaScript支持
		settings.setJavaScriptEnabled(true);
		settings.setSupportZoom(true);
		settings.setBuiltInZoomControls(true);
		webView.addJavascriptInterface(new JSinterface(this, handler, webView), "myObject");
		// 加載assets目錄下的文件
		String url = "file:///android_asset/index.html";
		webView.loadUrl(url);
	}

5.最爲關鍵的,js與java代碼之間的交互 web

package com.chart.test;

import java.util.Random;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.content.Context;
import android.os.Handler;
import android.util.Log;
import android.webkit.WebView;
import android.widget.Toast;

class JSinterface {

	private Context		mContext	= null;
	private Handler		mHandler	= null;
	private WebView		mView;

	private JSONArray	jsonArray	= new JSONArray();
	private Random		random		= new Random();

	public JSinterface(Context context, Handler handler, WebView webView) {
		mContext = context;
		mHandler = handler;
		mView = webView;
	}

	public void init() {
		// 經過handler來確保init方法的執行在主線程中
		mHandler.post(new Runnable() {

			public void run() {
				// 調用客戶端setContactInfo方法
				mView.loadUrl("javascript:setContactInfo('" + getJsonStr() + "')");
			}
		});
	}

	public int getW() {
		return px2dip(mContext.getResources().getDisplayMetrics().widthPixels);
	}

	public int getH() {
		return px2dip(mContext.getResources().getDisplayMetrics().heightPixels);
	}

	public int px2dip(float pxValue) {
		final float scale = mContext.getResources().getDisplayMetrics().density;
		return (int) (pxValue / scale + 0.5f);
	}

	public void setValue(String name, String value) {
		Toast.makeText(mContext, name+" "+value+"%", Toast.LENGTH_SHORT).show();
	}

	public String getRandColorCode() {
		String r, g, b;
		Random random = new Random();
		r = Integer.toHexString(random.nextInt(256)).toUpperCase();
		g = Integer.toHexString(random.nextInt(256)).toUpperCase();
		b = Integer.toHexString(random.nextInt(256)).toUpperCase();

		r = r.length() == 1 ? "0" + r : r;
		g = g.length() == 1 ? "0" + g : g;
		b = b.length() == 1 ? "0" + b : b;

		return "#" + r + g + b;
	}

	public String getJsonStr() {
		try {

			for (int i = 0; i < 10; i++) {
				JSONObject object1 = new JSONObject();
				object1.put("name", "name" + i);
				object1.put("value", random.nextInt(30));
				object1.put("color", getRandColorCode());
				jsonArray.put(object1);
			}
			Log.i("", jsonArray.toString());
			return jsonArray.toString();
		} catch (JSONException e) {
			e.printStackTrace();
		}
		return null;
	}
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。