个人小程序，可以微信扫一扫看看。谢谢支持
这是第一篇实例的步骤与代码。还有整个项目的结构图。
http://my.oschina.net/xshuai/blog/345117
原创的博文。转载注明出处。大家赶紧收藏吧。
本人highcharts新手。只是做个了练手的实例。还望大神指点。
上个图给大家看下效果。
点击 查看图表 如下图展示效果
- Highcharts简介
Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
2.Highcharts 中文API 实例网站
http://www.hcharts.cn/index.php ---------------------中文官方网站
http://www.hcharts.cn/docs/index.php----------------**中文教程**
http://www.hcharts.cn/demo/index.php---------------**在线演示**
http://bbs.hcharts.cn/forum.php-----------------------**中文论坛**
3.下载highcharts 与使用
http://www.hcharts.cn/resource/index.php 使用最新的就可以了。
http://www.hcharts.cn/docs/index.php?doc=start-download 网站里面有详细的介绍每个文件夹的作用。
4.需要的文件 jquery 自己下载就好了
1<script type="text/javascript" src="${ctx }/js/jquery-1.10.2.js"></script> 2<script type="text/javascript" src="${ctx }/js/highcharts/highcharts.js"></script>
5.页面index.jsp增加的代码
1html代码 2<a href="javascript:void(0);" id="highchart" onclick="gotoHighchart();" class="blank_btn" >查看图表</a> 3 4js代码 5 function gotoHighchart(){ 6 var url = '${ctx }/user/chartpage'; 7 window.location.href=url; 8 } 9 10操作当点击跳转页面
6.Controller代码
1 @RequestMapping(value = "chartpage") 2 public String chartpage(HttpServletRequest request, 3 HttpServletResponse response) { 4 return "views/user/chartpage"; 5 } 6与第5步的想对应。
7.所需要的页面代码 chartpage.jsp
1<body> 2 3 <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div> 4 5</body>
以上实现了页面跳转的功能。需要图表的数据。还得继续
8.图表需要的数据方法
8.1 Controller
接受service传递json的字符串给页面
1 @RequestMapping(value = "/chart") 2 public String chart(HttpServletRequest request, 3 HttpServletResponse response) throws Exception { 4 String result = null; 5 try { 6 result = userService.chart(); 7 } catch (Exception e) { 8 if(log.isErrorEnabled()){ 9 log.error("查询列表失败", e); 10 } 11 result = null; 12 } 13 StringUtil.writeToWeb(result, "html", response); 14 return null; 15 }
8.2 Service
将list对象存入map中。并转为json字符串数组
1/** 2 * highcharts用的 3 * @Title: chart 4 * @Description: 直接转出JSON传递给前台页面接受 5 * @return 6 */ 7 public String chart(){ 8 List<Map<String, Object>> list = userDao.chart(); 9 Map<String, Object> map = new HashMap<String, Object>(); 10 map.put("list", list); 11 Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create(); 12 String s = gson.toJson(map); 13 return s; 14 }
8.3 DAO
使用的的JDBCTemplate 传递sql语句查询。返回list对象
1public List<Map<String,Object>> chart(){ 2 String sql = "select u.name,u.age from userinfo u"; 3 return jdbcTemplate.queryForList(sql); 4 }
以上基本完成了数据的获取和转JSON字符串数组剩下就是在页面接受JSON并填充到highcharts图表里面
9.JS代码。使用AJAX传递过来。并填充到highcharts里面即可。最后一步，也是最要人命的一步。
一定要注意json字符串数组的解析。本人就是在这里纠结了半天多。怨自己没好好学习jquery。和强大的JSON字符串。
本人的json为 所以在遍历的时候需要注意一下自己的list这个数组里面的数据。可以忽略这句话。是本人的失误。
1{"list":[{"name":"一号","age":19},{"name":"二号","age":22},{"name":"test","age":19}....]} 2 3$(function(){ 4 var x = [];//X轴 5 var y = [];//Y轴 6 var xtext = [];//X轴TEXT 7 var color = ["gray","pink","red","blue","yellow","green","#fff"]; 8 $.ajax({ 9 type:'get', 10 url:'${ctx}/user/chart',//请求数据的地址 11 success:function(data){ 12 var json = eval("("+data+")"); 13 var s = 1; 14 for(var key in json.list){ 15 json.list[key].y = json.list[key].age; //给Y轴赋值 16 xtext = json.list[key].name;//给X轴TEXT赋值 17 json.list[key].color= color[key]; 18 } 19 chart.series[0].setData(json.list);//数据填充到highcharts上面 20 }, 21 error:function(e){ 22 } 23 }); 24 var chart = new Highcharts.Chart({ 25 chart:{ 26 renderTo:'container', 27 type:'column' //显示类型 柱形 28 }, 29 title:{ 30 text:'年龄分布图' //图表的标题 31 }, 32 xAxis:{ 33 categories:xtext 34 }, 35 yAxis:{ 36 title:{ 37 text:'年龄' //Y轴的名称 38 }, 39 }, 40 series:[{ 41 name:"姓名" 42 }] 43 }); 44});
个人微博 http://weibo.com/zxshuai319
个人博客 http://my.oschina.net/xshuai/blog
公开QQ 783021975 请留言说明您的问题。否则不加。