作者原創，未經博主允許，不可轉載

??????? 在前面分析和講解了用java代碼分別實現餅狀圖和折線圖，在工作當中，也會遇到很多用ajax進行異步請求

實現highchart。

????? 先展示一下實現的效果圖：

?????? 用ajax請求獲取數據庫后臺數據，可以實現異步刷新的效果，其主要實現放在了js代碼，即客戶端實現請求，

這樣可以減輕服務器端的壓力。

先展示js處代碼：

<!-- 播放統計柱型折線圖 --> <script type="text/javascript">var chart;$(function(){$.ajax({type:"post",cache: false,async: false,url:"<%=basePath%>personSpace/showPlayer",success:function(data){var data=eval(data);if(data.hasData>0){showBroadColumData(data);}else{$("#playStatistic").attr("src","images/playStatistic.png")var left=($(window).width()-1000)/2+"px";$("#playStatistic").css("margin-left",left);}}});});function showBroadColumData(data){var xCategory=[];var yData=[];var demandData=[];var splineData=[];for(var i=0;i<data.playCountInfo.length;i++){xCategory.push(data.playCountInfo[i].yearMonth);yData.push(parseInt(data.playCountInfo[i].livePlayCount));demandData.push(parseInt(data.playCountInfo[i].vodPlayCount));splineData.push(parseInt(data.playCountInfo[i].count));}chart = new Highcharts.Chart({chart:{renderTo:'broadColum'},title:{ text:'播放統計',style:{color:'#000',fontSize:'18px',fontFamily:"微軟雅黑"}}, credits:{ enabled:false }, xAxis:[{categories:xCategory,lineWidth:2,//自定義x軸寬度 title: {text: '播放時間',style:{color:'black',fontSize:'14px',fontFamily:"宋體"}},style:{ color:"#4572A7" } }],yAxis:[{tickInterval:50,labels:{style:{ color:"#4572A7" } },title:{text: '播放次數',style:{color:'black',fontSize:'14px',fontFamily:"宋體"}}}],legend:{shadow:true,layout:"horizontal"},series:[{name:'直播', type:"column",data:yData,color:Highcharts.getOptions().colors[3]},{name:'點播', type:"column",data:demandData,color:Highcharts.getOptions().colors[7]},{name:'總播放次數',type:"spline",data:splineData,marker: { lineWidth: 2, lineColor: Highcharts.getOptions().colors[4], fillColor: 'white' },color:Highcharts.getOptions().colors[5] }] });}</script>

?????? 其實現的思路為：先用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;
??? }

?

轉載于:https://www.cnblogs.com/zjdxr-up/p/7421445.html

總結

以上是生活随笔為你收集整理的ajax实现highchart与数据库数据结合完整案例分析（三）---柱状折线图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。