android 不同图表的使用和交互

首先,我是在实习,没太多经验,可能写的没太大技术含量,排版和语言组织也很欠缺,大家有需要的可以看看。

最近在参加一个项目,里面有一个功能就是用折线图展示最近六个月的消费情况,点击某个月份后可以在饼图中具体展示这个月份的具体消费信息。首先需要明白要想实现想要的功能必须要完成的两步:


第一步:实现java代码向html文件的传值,里面包含所有要展示的数据信息(json类型较多),一般采用整体变量传值的方法,就是相当于一个变量对字符串的替换,说起来挺容易的,但实践起来真的是很纠结,检查好多遍完全符合传值的思想啊,可为什么就是传不过去呢?想死的心都有了,而且有时候在这个地方不可以,在同样的另一个地方使用相同的方法确是可以的。哎,出去转一圈吧,实在没办法,只能死马当活马医了,回来在html文件中变量后面加个逗号(按照语法规则在一个代码块的最后一个语句后是不需要加的)试试吧,tmd竟然可以了,很是奇怪,再把逗号删了,竟然还是可以的,到现在还不知道怎么回事。不管怎么说,总算可以了。还有就是在html文件中引用.js文件的路径一定是正确的,否则显示的只是一个白板。


第二步:就是html代码调用java代码里面的方法了,因为点击下面的月份后上面的饼图是要根据月份变化的。这个实现需要在java代码中加入语句:webView.addJavascriptInterface(this, "SurveyUtil");,这样在html中就可以使用window.SurveyUtil.方法名(方法参数);进行调用this类中的对应方法了。这个过程还算容易理解,主要就是不同的图表得到所点击的模块的X轴索引的方法是不一样的,而且在各自的官网上并没有这样的介绍。只能在网上自己搜搜看了。

比如百度echarts是这样实现的:

var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.CLICK, function(param) {
       //刷新动态图标 --获取dataIndex,调用java对外开放接口
       //调用刷新库表部分
       window.SurveyUtil.getCheckDetail(param.dataIndex);
});
而highcharts是这样的实现的:

events : {
	click : function(event) {
	  window.SurveyUtil.getCheckDetail(event.point.x);//得到选择的x坐标值
	}
}
在jqplot和flotr2中,下面工程代码中也有对应实现,需要注意的是flotr2中返回的是一个float类型,要想获得点击的月份需要进行四舍五入得到整数,可以通过this.month = (int) (month + 0.5);这个(我认为)很巧妙的方法得到。

在java代码中对用的方法:

public void getCheckDetail(float month) {
	// 得到月份,根据月份刷新饼图数据
}
这样第二步就完成了。

总的来说在java代码中就是首先得到webview对象,然后对其一通设置,比如界面放大,页面根据手机屏幕大小进行调整以及居中显示,支持插件等,重点是设置webView.getSettings().setJavaScriptEnabled(true);和webView.setWebChromeClient(new WebChromeClient());是必不可少的。接下来就可以通过webview.loadUrl("file:///android_asset/chart.html");加载在asserts文件夹下的页面文件了,很重要的一点是不要立即调用刷新方法就进行数据的传入,因为加载页面是需要时间的,当我们立即就刷新时可能这个方法还没有被加载上来,这时候在日志中就会发现找不到方法的警告了。我们的解决方法是,重写WebViewClient类中onPageFinished()方法,这个方法是在页面被加载完成后的回调方法,在里面刷新我们的数据就OK了。在折线图中点击某个月份刷新数据时,我们就不必担心找不到方法的问题了,因为方法在刚开始页面加载完毕后早就加载好了。总的流程大概就这样了。具体的可以在完整的工程代码中查看。


demo工程代码中展示了android如何使用各种不同厂商的图表,其中包括折线图和饼图,图表有 echarts flotr2 highcharts  jqplot四种不同的类型,其中highcharts是收费的,echarts视频效果最棒,不过可能手机型号不同会出现些异常,比如背景变黑等。自认为flotr2 和jqplot页面真的很丑,调了半天也只能这样了,如果你可以得到更好的视觉效果可以跟我交流,我将会很感激你的分享。


demo完整代码:http://download.csdn.net/detail/u014071669/7752545

可能要的分有点多(嘿嘿,谁让我下载时分都不够呢),如果你真的没有分,可以单独找我。

第一次完整的打那么长博客,不喜勿喷啊。谢谢!

android 不同图表的使用和交互,布布扣,bubuko.com

android 不同图表的使用和交互

上一篇:IOS APP 图标


下一篇:Android开发之工厂模式初探