Android下相对成熟的使用highcharts折线图的案例
2013-12-31 00:04
661 查看
先说明,本人是新手,因最近在工作中要开发应用,要在移动设备上动态生成折线图,经过好一番折腾,总算有一个相对完善的案例了。看了很多网上的案例,发现有些细节的地方没有一个很好的解决方法,通过自己的努力,也一步步解决了,特在此分享一下经验。
解决的问题包括:1.标题,单位,x,y轴的自定义;2.数据的自定义和前台处理,包括空值的处理,数据元素的定位。
至于如何于java后台交互的,这类文章很多了,就不在这里说明了。在这里,我主要说一下如何自定义折线图的相关内容,最主要的是json数据的前台处理。
所使用的json数据的处理结果,这里有3列数据,有很典型的null值的出现:
[{"data":"null,6.41,4.15,11.44,12.02,10.36,3.41,4.44,11.46,10.60,18.43","name":"2010"},{"data":"18.43,17.13,23.00,38.53,25.92,18.80,10.33,5.68,6.68,13.31,13.31","name":"2011"},{"data":"0.60,34.86,34.20,35.02,43.30,43.60,37.74,30.99,34.17,2.11,2.11","name":"2012"}]
部分代码:
网页文件:
最终要得到的结果:不管数据是什么样的情况,有无空值,都能从java后台得到想要的数据~
解决的问题包括:1.标题,单位,x,y轴的自定义;2.数据的自定义和前台处理,包括空值的处理,数据元素的定位。
至于如何于java后台交互的,这类文章很多了,就不在这里说明了。在这里,我主要说一下如何自定义折线图的相关内容,最主要的是json数据的前台处理。
所使用的json数据的处理结果,这里有3列数据,有很典型的null值的出现:
[{"data":"null,6.41,4.15,11.44,12.02,10.36,3.41,4.44,11.46,10.60,18.43","name":"2010"},{"data":"18.43,17.13,23.00,38.53,25.92,18.80,10.33,5.68,6.68,13.31,13.31","name":"2011"},{"data":"0.60,34.86,34.20,35.02,43.30,43.60,37.74,30.99,34.17,2.11,2.11","name":"2012"}]
部分代码:
// 折线图的数据结构,这个参考了网上的案例 public class Contact { private String name; // 数值的名称 private String value; // 数值 /** * 构造函数 * * @param name * 数据名称 * @param value * 数据 */ public Contact(String name, String value) { this.name = name; this.value = value; } // 下面是实例变量的getters and setters public String getName() { return name; } public void setName(String name) { this.name = name; } public String getValue() { return value; } public void setValue(String value) { this.value = value; } } // javascript接口///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// String _title = "小试牛刀玩一玩", _lable = "1,2,3,4,5,6,7,8,9,10,11,12", _Ytext = "增长%", _tipvs = "%"; double _max = 100, _min = 0; // 实现将list转换成json格式字符串 public String getContacts() { List<Contact> contacts = contactService.getContact(); String json = null; try { JSONArray array = new JSONArray(); for (Contact contact : contacts) { JSONObject item = new JSONObject(); item.put("name", contact.getName()); item.put("data", contact.getValue()); array.put(item); } json = array.toString(); System.out.println(json); } catch (JSONException e) { e.printStackTrace(); } return json; } // 得到图表标题mtitle public String gettitle() { return _title; } // 得到图表X轴坐标(_lable格式:2012.2,2012.4,2012.5,2012.6,2012.7,2012.8)_lable public String getlable() { return _lable; } // 得到Y轴上要显示的字_Ytext public String getYtext() { return _Ytext; } // 得到提示内容中的单位_tipvs public String gettipvs() { return _tipvs; } // Y轴最大值 public double getYmax() { return _max; } // Y轴最小值 public double getYmin() { return _min; }
网页文件:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="highcharts.js"></script> <script type="text/javascript"> var title=window.MainActivity.gettitle(); var lable=window.MainActivity.getlable(); var Ytext=window.MainActivity.getYtext(); var tipvs=window.MainActivity.gettipvs(); var ymax=window.MainActivity.getYmax(); var ymin=window.MainActivity.getYmin(); var templable=lable.split(",");//将传来的标签转换为字符串数组 var data=new Array(); var contact=window.MainActivity.getContacts(); eval("data="+contact); var tempdata,tempnewdata,tempname,x; var newdata=new Array(); var tempnumber;
//以下是重点,如何将后台传来的json数据转换为图表能识别的数组格式! for(var i=0;i<data.length;i++) {//转换data格式 tempname=data[i].name; tempdata=data[i].data.split(",");//把字符串转换为数组 tempnewdata=new Array(); x=new Array(); for(var j=0;j<tempdata.length;j++) {//json传过来的数据是字符型的,在这里转换为数值型 if(tempdata[j]=="null") { continue; } else { tempnumber=Number(tempdata[j]);//使用number()自动转换类型 x.push({x:j,y:tempnumber});//这句很重要,x是当前数据在x轴上的位置,比如说x轴从1月(0)起,当前数据是3月,那x就为2;此句的目的是为了解决有空值不能显示的问题~ } } newdata.push({name:tempname,data:x}); } $(function () { $('#container').highcharts({ title: { text: title,//自定义标题 x: -20 //center }, xAxis: { categories: templable//自定义标签 }, yAxis: { title: { text: Ytext//y轴的单位 }, max:ymax,//最大值,这里在后台处理,得到数组中最大值,再加上5 min:ymin//最小值,这里得到数组最小值,再减去5 }, tooltip: { valueSuffix: tipvs//点击数据点后,显示的数据的单位 }, legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom', borderWidth: 0 }, series:newdata//处理好的数据数组 }); }); </script> </head> <body> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> <div id="containera" style="text-align:right; size:12pt;"> 点击节点显示数据 </div> </body> </html>
最终要得到的结果:不管数据是什么样的情况,有无空值,都能从java后台得到想要的数据~
相关文章推荐
- Android中综合使用AsyncHttpClient和SmartImageView编写新闻客户端的案例
- Android之TelephonyManager类的使用案例
- Android中ActivityManager的使用案例
- android 低耦合度的adapter与holder案例,使用butterknife
- Android Studio SlidingMenu 开源项目使用案例
- android的PopupWindow的使用案例
- Android JSON解析库Gson和Fast-json的使用对比和图书列表小案例
- Android拓展之使用MPAndroidChart绘制动态折线图
- 使用Highcharts生成折线图与曲线图
- Highcharts纯Javascript图表使用讲解(附Demo全源码案例)
- Android数据库入门小案例SQLiteOpenHelper和SQLiteDatabase使用
- 使用Highcharts生成折线图_at last
- 初学Android——相对和线性布局的使用与程序的国际化
- Android之TelephonyManager类的使用案例
- Android画折线图、柱状图、饼图(使用achartengine.jar)
- android常用UI使用案例:SeekBar
- Android fragment使用详解及案例
- Android中WebView基本使用介绍与案例
- Android Jni使用案例
- 使用Highcharts生成折线图与曲线图