動態獲取數據說白點就是從后台傳值到前台,前台把這些值賦值給x軸與y軸(這里指的是你X軸與Y軸都是變化的數據,如果你的X軸是固定的,像時間等等的那就另說)。
柱狀圖的動態傳值:
//獲取后台數據
var x = [];//X軸
var y = [];//Y軸
var xtext = [];//X軸TEXT
var 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");//格式化result response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); out.print(result); out.flush(); out.close(); }
