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

events : {
	click : function(event) {
	  window.SurveyUtil.getCheckDetail(event.point.x);//得到选择的x坐标值
	}
}

在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 不同图表的使用和交互,,5-wow.com