作者原创,未经博主允许,不可转载
在前面分析和讲解了用java代码分别实现饼状图和折线图,在工作当中,也会遇到很多用ajax进行异步请求
实现highchart。
先展示一下实现的效果图:
用ajax请求获取数据库后台数据,可以实现异步刷新的效果,其主要实现放在了js代码,即客户端实现请求,
这样可以减轻服务器端的压力。
先展示js处代码:
其实现的思路为:先用ajax请求后台数据,从后台查询获取一个map的集合,然后将map中集合的数据遍历出来,将所需要的数据分别放入
不同的数组当中。,然后再将数组放入highchart插件当中。
此处展示java后台主要代码:
@ResponseBody
@RequestMapping(value = "/showPlayer", method = {RequestMethod.GET, RequestMethod.POST})
public Map<String, Object> showPlayerStatisticToBroad(HttpServletRequest request) {
List<PlayerStatisticsInfo> playerStatisticsInfos = new ArrayList<PlayerStatisticsInfo>();
playerStatisticsInfos = playerStatisticService.qryPlayCountInfo(getSessionInfo(request).getUserId()); //查询数据集合
Map<String, Object> map = new LinkedHashMap<String, Object>();//选择用map集合可以实现键值对形式,通过键值对的形式取得想要的数据和对象
if (CollectionUtils.isNotEmpty(playerStatisticsInfos)) {
map.put("playCountInfo", playerStatisticsInfos);
map.put("hasData", 1);
} else {
map.put("hasData", 0);
}
return map;
}