zoukankan      html  css  js  c++  java
  • highcharts动态获取数据生成图表问题


      动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给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(); }
  • 相关阅读:
    echarts 算百分比与js toFixed算出来的百分比不一致的问题。
    VUE, Vue Router Tab 显示动态页签名称。
    [日常坑]前端j's数据导出excel,导出的文件损坏
    [最新 | Build 3211]Sublime Text 2.x, 3.x 许可License集合
    图片滤波
    electron-ipc通信性能分析
    设计vue3的请求实体工厂
    canvas-修改图片亮度
    canvas性能-drawImage渲染图片
    基于windows配置gitlab-runner
  • 原文地址:https://www.cnblogs.com/zcleilei/p/5909802.html
Copyright © 2011-2022 走看看