Home > Developer > Web Develop
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 < 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"; } corresponding 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") PublicString Chart (httpservletrequest request, httpservletresponse response)throwsException {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
/** * highcharts with * @Title: chart * @De Scription: Transfer json directly to the foreground page accept * @return */< /span> public String chart () {List <ma p<string, object>> list = Userdao.chart (); Map <string, object> map = new hashmap<string, Object> (); Map.put ( "list" = 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 () { = "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(){ varx = [];//X-Axis vary = [];//Y-Axis varXtext = [];//x-Axis text varcolor = ["Gray", "Pink", "red", "blue", "yellow", "green", "#fff"]; $.ajax ({type:' Get ', URL:' ${ctx}/user/chart ',//the address of the request dataSuccessfunction(data) {varJSON = eval ("(" +data+ ")"); vars = 1; for(varKeyinchjson.list) {JSON.LIST[KEY].Y= Json.list[key].age;//Assigning a value to the y-axisXtext = Json.list[key].name;//assign a value to the x-axis textJson.list[key].color=Color[key]; } chart.series[0].setdata (json.list);//data is populated above the Highcharts}, Error:function(e) {}}); varChart =NewHighcharts.chart ({chart:{Renderto:' Container ', type:' Column '//Display Type column}, title:{text:' Age Distribution Chart '//the title of the chart}, xaxis:{Categories:xtext}, yaxis:{title:{text: Age//name of the y-axis},}, series:[{name:Name }] });});
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
