您的位置：首页 > Web前端 > JavaScript

使用ichartjs生成报表以及和activity交互！

2014-10-11 10:17 423 查看 
ichartjs是一款轻量级的图表工具，使用方便。首先把需要的文件放入assets文件夹下。ichart-1.0.js，ichart-1.0.min.js。zhuzhuang_chart.html。zhuzhuang_chart.html为要显示的页面。
<!DOCTYPE html><html>	<head>		<meta charset="UTF-8" />		<title>ichartjs</title>		<script type="text/javascript" src="ichart-1.0.min.js"></script>		<script type="text/javascript">		<span style="color:#ff6666;">var chart;		var data = new Array();          <span style="white-space:pre">	</span>var contact = window.android.getModels();        <span style="white-space:pre">	</span> <span style="white-space:pre">	</span>eval('data='+contact);           <span style="white-space:pre">	</span>var va = eval('('+window.android.getPreference()+')');</span>		$(function(){				new iChart.Bar2D({					render : 'canvasDiv',					data: data,<span style="white-space:pre">	</span>//动态加载数据					turn_off_touchmove:true,					title : {						text:va.size*30,						color:va.color					},					width : 500,					height : va.size*30+160,  // 动态改变图表的高度					offsetx:20,					coordinate:{						width:500,						height:va.size*30, <span style="font-family: Arial, Helvetica, sans-serif;">// 动态改变图表的高度</span>						grid_color:'#4e5464',						axis:{							color:'#4e5464',							width:[0,0,8,1]						},						scale:[{							 position:'bottom',								 start_scale:0,							 end_scale:40,							 scale_space:5,							 label:{color:'#ffffff'},							 listeners:{								parseText:function(t,x,y){									return {text:t}								}							 }						}]					},					label:{color:'#dcdcdc'},					background_color : '#3c4251',					sub_option:{						listeners:{							parseText:function(r,t){								return t;							}						}					},					legend:{enable:false}				}).draw();			});			</script>		</head>		<body>			<div id='canvasDiv'></div>		</body></html>
各个属性的用法可以去查看ichartjs官网，这里就不在累赘了。之后设置webView控件，因为需要使用webView控件进行显示。设置如下：wv.getSettings().setJavaScriptEnabled(true); //设置支持javascript显示 wv.getSettings().setBuiltInZoomControls(true);   //设置可以进行缩放wv.addJavascriptInterface(this,"android"); //设置javascript和activity交互的接口，这里设置为本activity。交互方法为：
@JavascriptInterface	public String getModels()	{		String Json = null;		try		{			JSONArray array = new JSONArray();			for(DeviceMobile moblie:listDevice)			{				JSONObject object = new JSONObject();				object.put("name", moblie.getName());				object.put("value", moblie.getCount());				object.put("color", "#b5bcc5");				array.put(object);			}			Json =  array.toString();		}		catch(JSONException e)		{			e.printStackTrace();		}		return Json;	}		@JavascriptInterface	public String getPreference()	{		JSONObject jsonOb =  new JSONObject();		try		{			String title = station.getText().toString();			jsonOb.put("text", title+"资源统计");			jsonOb.put("color", "#b5bcc5");			jsonOb.put("size", listDevice.size());		}		catch(JSONException e)		{			e.printStackTrace();		}				return jsonOb.toString();			}
注意到：
@JavascriptInterface
为了系统的安全，在android4.2之后如果不加上就不能调用activity中的方法。可能你已经发现到了这里注册了两个方法，返回的类型不一样，一个为Json数组形式，一个味json形式。而且在js中使用的也不一样。调用方法都是window.android.XXX();形式调用。数组对象为：先创建数组类型变量。获取activity之中的数据。使用eval()进行解析赋值。
<span style="color: rgb(255, 102, 102);">var data = new Array();  var contact = window.android.getModels(); eval('data='+contact);</span>
非数组对象为：
<span style="color: rgb(255, 102, 102);">var va = eval('('+window.android.getPreference()+')'); </span>
通过eval()解析数据，并且返回变量，变量可以通过 va.XX  获取属性。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航