Android 中使用 ichartjs 完成图表的展示

最新推荐文章于 2024-07-05 09:45:50 发布

weixin_34334744

最新推荐文章于 2024-07-05 09:45:50 发布

阅读量90

点赞数

文章标签：移动开发 javascript json ViewUI

原文链接：https://my.oschina.net/huangyunlin2010/blog/145309

版权

2019独角兽企业重金招聘Python工程师标准>>>

1. http://www.ichartjs.com/

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;
	}
}

转载于:https://my.oschina.net/huangyunlin2010/blog/145309