標籤：des style blog http io ar color os 使用
這是第一篇執行個體的步驟與代碼。還有整個項目的結構圖。
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 自己下載就好了
<script type="text/javascript" src="${ctx }/js/jquery-1.10.2.js"></script><script type="text/javascript" src="${ctx }/js/highcharts/highcharts.js"></script>
5.頁面index.jsp增加的代碼
html代碼<a href="javascript:void(0);" id="highchart" onclick="gotoHighchart();" class="blank_btn" >查看圖表</a>js代碼 function gotoHighchart(){ var url = ‘${ctx }/user/chartpage‘; window.location.href=url; }操作當點擊跳轉頁面
6.Controller代碼
@RequestMapping(value = "chartpage") public String chartpage(HttpServletRequest request, HttpServletResponse response) { return "views/user/chartpage"; }與第5步的想對應。
7.所需要的頁面代碼 chartpage.jsp
<body> <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div> </body>
以上實現了頁面跳轉的功能。需要圖表的資料。還得繼續
8.圖表需要的資料方法
8.1 Controller
接受service傳遞json的字串給頁面
@RequestMapping(value = "/chart") public String chart(HttpServletRequest request, HttpServletResponse response) throws Exception { String result = null; try { result = userService.chart(); } catch (Exception e) { if(log.isErrorEnabled()){ log.error("查詢列表失敗", e); } result = null; } StringUtil.writeToWeb(result, "html", response); return null; }
8.2 Service
將list對象存入map中。並轉為json字串數組
/** * highcharts用的 * @Title: chart * @Description: 直接轉出JSON傳遞給前台頁面接受 * @return */ public String chart(){ List<Map<String, Object>> list = userDao.chart(); Map<String, Object> map = new HashMap<String, Object>(); map.put("list", list); Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create(); String s = gson.toJson(map); return s; }
8.3 DAO
使用的的JDBCTemplate 傳遞sql語句查詢。返回list對象
public List<Map<String,Object>> chart(){ String sql = "select u.name,u.age from userinfo u"; return jdbcTemplate.queryForList(sql); }
以上基本完成了資料的擷取和轉JSON字串數組剩下就是在頁面接受JSON並填充到highcharts圖表裡面
9.JS代碼。使用AJAX傳遞過來。並填充到highcharts裡面即可。最後一步，也是最要人命的一步。
一定要注意json字串數組的解析。本人就是在這裡糾結了半天多。怨自己沒好好學習jquery。和強大的JSON字串。
本人的json為 所以在遍曆的時候需要注意一下自己的list這個數組裡面的資料。可以忽略這句話。是本人的失誤。
{"list":[{"name":"一號","age":19},{"name":"二號","age":22},{"name":"test","age":19}....]}
$(function(){ var x = [];//X軸 var y = [];//Y軸 var xtext = [];//X軸TEXT var color = ["gray","pink","red","blue","yellow","green","#fff"]; $.ajax({ type:‘get‘, url:‘${ctx}/user/chart‘,//請求資料的地址 success:function(data){ var json = eval("("+data+")"); var s = 1; for(var key in json.list){ json.list[key].y = json.list[key].age; //給Y軸賦值 xtext = json.list[key].name;//給X軸TEXT賦值 json.list[key].color= color[key]; } chart.series[0].setData(json.list);//資料填充到highcharts上面 }, error:function(e){ } }); var chart = new Highcharts.Chart({ chart:{ renderTo:‘container‘, type:‘column‘ //顯示類型 柱形 }, title:{ text:‘年齡分布圖‘ //圖表的標題 }, xAxis:{ categories:xtext }, yAxis:{ title:{ text:‘年齡‘ //Y軸的名稱 }, }, series:[{ name:"姓名" }] });});
個人微博 http://weibo.com/zxshuai319
個人部落格 http://my.oschina.net/xshuai/blog
公開QQ 783021975
個人聯盟 http://www.bengbeng.com/?sid=687095
Highcharts AJAX JSON JQuery 實現動態資料互動顯示圖表 直條圖
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
