动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给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();}