1:JSP页面引用所 jquery-1.8.2.min.js highCharts/highstock.js highCharts/modules/exporting.js
前往highStock Demo网站选取自己想要的demo http://www.hcharts.cn/demo/highstock.php,各种定制化的参数可以在API中找到http://www.hcharts.cn/api/highstock.php
前台的关键点在于接受的参数,demo中使用 $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {获取参数,我们可以将路径地址转换成任意合法的URL地址,包括http协议,file协议地址或者是自己的action路径。
接受的JSON的格式为:[[1439740800000,4],[1439827200000,4],[1439913600000,331],[1440000000000,11]]
其中1439740800000为13位毫米时间,所以,数据库中时间需要经过解析转换为13位时间。
2:后台处理。
i)时间转换(yyyyMMdd为数据库时间的格式)
DateFormat df = new SimpleDateFormat("yyyyMMdd");
Date time = null;
time=df.parse((String)map.get("date"));
Calendar cal =Calendar.getInstance(TimeZone.getDefault());
cal.setTime(time);
ii)JSON返回,controller上记得加上ResponseBody注解,JSON拼装可以用List<List<LONG>>循环写入,然后找个合适的JSON工具类转换为字符串,然后return JSON字符串。
iii)service和mapper根据需求自己实现
附图:实现后的效果
本文详细介绍了如何在JSP页面中引用jQuery和HighCharts库,通过代理接口获取JSON数据,并展示图表。重点讲解了时间转换、JSON数据结构、数据库时间解析以及数据展示的关键步骤。
2146

被折叠的 条评论
为什么被折叠?



