Android 中使用 ichartjs 完成圖表的展示
ichartjs 是一款基于HTML5的圖形庫。使用純javascript語言, 利用HTML5的canvas標簽繪制各式圖形.ichartjs致力于為您的應用提供簡單、直觀、可交互的體驗級圖表組件。是WEB/APP圖表展示方面的解決方案 ichartjs目前支持餅圖、環形圖、折線圖、面積圖、柱形圖、條形圖。ichartjs是基于Apache License 2.0協議的開源項目。
2. 下載ichartjs放入android工程中如下圖所示位置:<br>
3. 新建一個html文件:index.html
<!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做一些簡單的設置
@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代碼之間的交互
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;
}
}
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！