? 動態獲取數據說白點就是從后臺傳值到前臺，前臺把這些值賦值給x軸與y軸（這里指的是你X軸與Y軸都是變化的數據，如果你的X軸是固定的，像時間等等的那就另說）。
? 柱狀圖的動態傳值：

//獲取后臺數據var x = [];//X軸var y = [];//Y軸var xtext = [];//X軸TEXTvar color = ["#FFB6C1","#DC143C","#C71585","#D8BFD8","#8B008B","#4B0082","#6A5ACD","#0000FF","#B0C4DE","#1E90FF","#00CED1","#228B22"];$.ajax({type:'post',url:'${pageContext.request.contextPath}/InOrder!showInfoList.do',success:function(data){var json = eval("("+data+")");//轉換數據 for(var key in json.rows){json.rows[key].y = json.rows[key].money; //給Y軸賦值xtext = json.rows[key].name;//給X軸TEXT賦值json.rows[key].color= color[key];}//新建圖表 chart = new Highcharts.Chart({ chart: { renderTo: 'container', //圖表放置的容器，關聯DIV#id type: 'column', //柱狀圖 reflow:true //自適應div的大小 }, title: { text: '分類采購額' //圖表標題 }, xAxis: { //X軸標簽 categories:[xtext]}, yAxis: { //設置Y軸 title: { text: '采購額 (元)' } },credits:{ //右下角文本不顯示enabled: false},tooltip:{ //鼠標移動到圖形上時顯示的提示框 headerFormat: '{series.name}：<span style="font-size:12px"><b>{point.key}</b></span><table>',pointFormat: '<tr><td>采購額： </td>' +'<td style="padding:0"><b>{point.y:.1f} ￥</b></td></tr>',footerFormat: '</table>',shared: true,useHTML: true}, series:[{name:"商品類別"}] }), chart.series[0].setData(json.rows);//數據填充到highcharts上面}, } error:function(e){}});

?

//action層調用從數據庫中查詢出來的方法，獲取數據。Dao層從數據庫中查詢，與service層調用Dao層方法

public void showInfoList() throws IOException{ List list = null;List _list = new ArrayList();try {list = (ArrayList<DocProSto>)inOrderListService.CountAll(); //調用查詢方法 if(list.size()>0){for(DocProSto pro:list){ //遍歷后臺傳值Map<String,Object> map = new HashMap<String,Object>();map.put("money",pro.getMoney() );map.put("name", pro.getProduct().getTprosort().getName());map.put("number",pro.getNumber());_list.add(map); }}} catch (Exception e) {e.printStackTrace();}Map<String, Object> jsonMap = new HashMap<String, Object>();//定義map jsonMap.put("rows", _list);//rows鍵 存放每頁記錄 list result = JSON.toJSONStringWithDateFormat(jsonMap,"yyyy-MM-dd");//格式化resultresponse.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();out.print(result);out.flush();out.close();}

?

轉載于:https://www.cnblogs.com/zcleilei/p/5909802.html

總結

以上是生活随笔為你收集整理的highcharts动态获取数据生成图表问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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