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

最新推荐文章于 2021-12-27 16:51:11 发布

weixin_30868855

最新推荐文章于 2021-12-27 16:51:11 发布

阅读量202

点赞数

文章标签： json 数据库

原文链接：http://www.cnblogs.com/zcleilei/p/5909802.html

版权

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

转载于:https://www.cnblogs.com/zcleilei/p/5909802.html