首页 > 代码库 > highcharts动态获取数据生成图表问题

highcharts动态获取数据生成图表问题


  动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴。
  柱状图的动态传值:

//获取后台数据             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(); }

 

highcharts动态获取数据生成图表问题