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 自行上传分享，仅供网友学习交流。所有权归原作者，若您的权利被侵害，请联系管理员。
转载本站原创文章，请注明出处，并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台，欢迎各类分享！