Home > Developer > Web Develop
This is the step and code for the first instance. There is also a structure diagram of the entire project.
http://my.oschina.net/xshuai/blog/345117
the original blog post. Reproduced in the source. Let's collect them quickly.
i highcharts novice. Just an example of a practiced hand. Also hope the great God guidance.
The last picture gives you a look at the effect.
Click to view the chart as shown in the results
Highcharts Introduction
Highcharts is a library of diagrams written in plain JavaScript that makes it easy to add interactive diagrams to Web sites or Web applications, and free of charge for personal learning, personal websites and non-commercial use. The chart types supported by Highcharts are graph, area, histogram, pie, scatter, and synthetic charts.
2.highcharts Chinese API Instance website
http://www.hcharts.cn/index.php ---------------------Chinese official website
http://www.hcharts.cn/docs/index.php---------------- Chinese course
http://www.hcharts.cn/demo/index.php--------------- Online Demo
http://bbs.hcharts.cn/forum.php----------------------- Chinese forum
3. download highcharts and use
http://www.hcharts.cn/resource/index.php use the latest on it.
The Http://www.hcharts.cn/docs/index.php?doc=start-download website contains a detailed description of the role of each folder.
4. required file jquery download it for yourself .
<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. page index.jsp added code
HTML code <a href= "javascript:void (0);" id= "Highchart" onclick= "Gotohighchart (); class=" BLANK_BTN "> View Chart </a >js code function Gotohighchart () {var url = ' ${ctx}/user/chartpage '; Window.location.href=url; } action when clicking on the jump page6.Controller Code
@RequestMapping (value = "chartpage") public String chartpage (httpservletrequest request, HttpServletResponse Response) {return "views/user/chartpage"; } corresponds to the 5th step.7. Required page code chartpage.jsp
<body> <div id= "container" style= "width:800px; height:400px; margin:0 Auto "></div> </body>
The above implementation of the page jump function. The data needed for the chart. We have to go.
8. Data methods required by the chart
8.1 Controller
Accept the service delivery JSON string to the page
@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 ("Query list failed", e ); } result = null; } stringutil.writetoweb (result, "HTML", response); return null; }
8.2 Service
Save the list object to the map. and convert to a JSON string array
/** * for Highcharts * @Title: Chart * @Description: Direct-forward JSON pass to foreground page accept * @return */public String Cha RT () {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
Use the JdbcTemplate to pass the SQL statement query. Returns the List object
Public list<map<string,object>> Chart () {String sql = ' Select u.name,u.age from userinfo u '; return jdbctemplate.queryforlist (SQL); }The above basic completion of the data acquisition and the JSON string array is left on the page to accept the JSON and populate the Highcharts chart
9.JS code. Use Ajax to pass it over. and fill into the highcharts inside can. The final step is also the most human one.
Be sure to note the parsing of the JSON string array. I am here to tangle for a long day. Blame yourself for not learning jquery well. And a powerful JSON string.
My JSON is so I need to look at the data in the array of my list when I traverse it. This sentence can be ignored. It's my fault.
{"List": [{"Name": "One", "Age": 19},{"name": "Number Second", "Age": 22},{"name": "Test", "Age": 19} ....]}$ (function () { var x = [];//x axis var y = [];//y Axis var xtext = [];//x Axis text var color = ["Gray", "Pink", "red", "blue", "yellow", "green", "#fff"]; $.ajax ({ type: ' Get ', url: ' ${ Ctx}/user/chart ',//The address of the request data success:function (data) { var json = eval ("(" +data+ ")"); var s = 1; for (var key in json.list) { json.list[key].y = json.list[key].age; //assign value to Y-axis xtext = json.list[key].name;//x-Axis text assignment json.list[key].color= color[key]; } chart.series[0].setdata (json.list);//data filled to highcharts top }, error:function (e) { } }); var chart = New highcharts.chart ({ chart:{ renderto: ' Container ', type: ' column ' //display type column }, title:{ text: ' Age map ' //the title of the chart }, xAxis:{ categories:xtext }, yAxis:{ title:{ text: ' Age ' //y axis name }, }, series:[{ name:"Name" &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;}]&NBSP;&NBSP;&NBSP;&NBSP;});
Personal micro-blog http://weibo.com/zxshuai319
Personal blog Http://my.oschina.net/xshuai/blog
Public QQ 783021975
Personal Alliance http://www.bengbeng.com/?sid=687095
Highcharts AJAX JSON JQuery for Dynamic Data Interactive display Chart column charts
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
