zoukankan      html  css  js  c++  java
  • highcharts.js绘制统计图的应用,与后台异步交互

    第一步:

      在jsp中引入插件<script src="<c:urlvalue="/asset/admin/js/highcharts.js"/>"></script>

    第二步:

       用div来画统计图<div id="line" style=" 750px; height: 400px;margin: 0 auto"> </div>

    第三步:

       把div与第一步的插件进行绑定代码如下

     
    1. $('#line').highcharts({  
    2.          xAxis: { //横轴       
    3.          categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],  
    4.           title: {text: '横轴名称'}  
    5.      },  
    6.      yAxis: {//纵轴  
    7.   
    8.          title: {  
    9.   
    10.               text: '纵轴名称'  
    11.   
    12.          }  
    13.   
    14.      },    
    15.      series: [{//画图所依据的数据  
    16.   
    17.          data: [1, 3, 5, 2, 3, 9, 6, 7, 3, 5, 4, 3]         
    18.   
    19.      }]             
    20.   
    21.      });  
    22.   
    23.  });  

    几点说明:

    1)      如果不指定统计图类型的话,默认的是折线统计图

    2)      Series是统计所需要的数据,在本文中需要从后台获取json数据

    3)      上面的series只有一条数据{ data: [1, 3, 5, 2, 3, 9, 6, 7, 3, 5, 4, 3]},在图形上的表现是只有一条线如下图

    可以发现,为了清楚的知道这条线是指的什么,可以为这条线指定一个名字

    上面的一条数据可以加一个name属性

    { name:”折线名”,data: [1, 3, 5, 2, 3, 9, 6, 7, 3, 5, 4, 3]}如图

     当然如果需要多条线,那么就需要提供多条数据就可以了

     比如: 

    series:

    [{name:”第一条线”,data: [1, 3, 5, 2, 3, 9, 6,7, 3, 5, 4, 3] },

      {name:”第二条线”,data: [1, 13, 8, 9, 3, 19, 1, 8, 9, 15, 14, 4] }

     

    第四部:异步请求数据获取数据

       通过上面的分析,可以发现如果需要对数据绘制统计图,只需要从后台传来一个json数据串就行了,在这里用ajax异步请求数据

      异步请求代码如下:

    var drawChart = function(sourceUrl) {  
      
           $.ajax({  
               "type" : "post",  
      
               "url" : sourceUrl,  
               "success" : function(result) {  
                  var data = result.data;//获取数据  
                  var categories = result.categories;//categories类别  
                  var datas = [];  
      
                    //把data数据处理成一条条json的格式的数据,付给series  
                  for ( var i = 0; i < data.length; i++) {  
                      // 构建折线图数据  
                      datas.push({  
                         name : data[i].name,//线条的名字  
                         data : data[i].data//线条走势所需要的数据  
                      });  
      
                  }//end for  
       
                  if (datas.length > 0) {      
      
                      var stepSize= Math.floor(categories.length/10);  
      
                      drawLine(datas, categories);//把所需的数据传给highcharts  
      
                      $("#line").css('display','block');  
      
                      $("#line").show();               
      
                  }  
      
               },  
      
               "dataType" : "json"  
      
           });  
      
        };  
       
      
    // var chart;  
      
        var drawLine = function(data, categoriess) {  
      
           chart = new Highcharts.Chart({  
               chart : {  
                  renderTo : 'line',  
                  defaultSeriesType : 'line'  
               },  
      
               title : {text : '频道观看时长统计图'},  
      
               xAxis : {  
                  categories :categoriess,  
                  title:{ text:"时间"}  
               },  
               yAxis : {title : {text : '观看时长'} },  
               legend: {  
                    layout: 'vertical',  
                    backgroundColor: '#FFFFFF',  
                    align: 'left',  
                    verticalAlign: 'top',  
                    x: 50,  
                    y: 20,  
                    floating: true,  
                    shadow: true  
                },  
           series :data        
           });  
        };  
    View Code

    后台得到数据的方法如下

    /** 
         * 数据统计图 
         * @throws ParseException 
         */  
        @RequestMapping(value = "/getBaseDataChart.json", method = RequestMethod.POST)  
      
        public@ResponseBody  
      
        Map<String, Object>getBaseDetailDataChart(HttpServletRequest request)  
      
               throws ParseException {  
      
           Map<String, Object> resultMap = new HashMap<String,Object>();  
      
           resultMap = getData();  
      
           return resultMap;  
      
        }  
      
        private Map<String, Object> getData(){  
      
           // 用来存储返回结果的Map  
      
           Map<String, Object> resultMap = new HashMap<String,Object>();  
      
           List<Analytics> analyticses = Text.getList();  
      
           // 把analyticses按照频道id分组  
      
           Map<String, List> map = new HashMap<String,List>();  
      
           for (int i = 0; i < analyticses.size(); i++) {  
      
               Analytics analytics = (Analytics) analyticses.get(i);  
      
               String channleName = analytics.getChannelName();  
      
               if (map.containsKey(channleName)) {  
      
                  map.get(channleName).add(analytics);  
      
               } else {  
      
                  List<Analytics> groupList = newArrayList<Analytics>();  
      
                  groupList.add(analytics);  
      
                  map.put(channleName, groupList);  
      
               }// end if-else  
      
           }// end for  
      
      
           // 存放曲线的所需的数据  
      
           List<ChartEntity> list = new ArrayList<ChartEntity>();  
      
           // 把每一个组的list里面的Analytics对象的duration放入data  
           for (Iterator<String> iterator = map.keySet().iterator(); iterator  
      
                  .hasNext();) {// 遍历每一个key  
      
               String channelName = iterator.next();//频道名称  
      
               ChartEntity ent = new ChartEntity();  
      
               ent.setName(channelName);  
      
               long[] array = newlong[map.get(channelName).size()];//画图所需的数据,对应着series的data  
      
               int i = 0;  
      
               for (Iterator<Analytics> iterator2 = map.get(channelName)  
      
                      .iterator(); iterator2.hasNext();) {// 遍历每一个key对应的值也就是List  
      
                  Analytics ana = iterator2.next();  
      
                  array[i] = ana.getDuration();  
      
                  i++;  
      
               }//end for  
      
               ent.setData(array);  
      
               list.add(ent);  
      
           }//end for  
      
       
      
           List<Channel> channels = this.channelServcie.listChannel();   
      
           // 横坐标所需的数据  
      
           List<String> channelNames = new ArrayList<String>();  
      
           for (Channel channel : channels) {  
      
               String name = channel.getName();  
      
               channelNames.add(name);  
      
           }// end for  
      
           resultMap.put("categories", channelNames);// 横坐标的名字,应该改为时间最好,后续要完善  
      
           resultMap.put("data", list);// 数据  
      
           return resultMap;  
      
        }  
    View Code

    注意:

         1) 类ChartEntity里面保存了两条字段 private String name,private Long data[],并提供了两个get/set方法,

    name对应着Highcharts.Chart里series的name和data

       2) Text.getList()是提供的一些测试数据,也可以从相关的数据库中获取代码如下

    public static List<Analytics> getList(){  
        List<Analytics> analyticses = new ArrayList<Analytics>();  
        //第一组数据,对应统计图的一条线  
         for(int i=0;i<9;i++){  
             Analytics a= new Analytics();  
             a.setChannelName("A");  
             a.setDuration(100+i*10);  
             analyticses.add(a);  
         }    
           
         //第二组数据,对应统计图的一条线  
         for(int i=0;i<8;i++){  
             Analytics a= new Analytics();  
             a.setChannelName("B");  
             a.setDuration(60+i*10);  
             analyticses.add(a);  
         }    
         //第三组数据,对应统计图的一条线  
         for(int i=0;i<15;i++){  
             Analytics a= new Analytics();  
             a.setChannelName("C");  
             a.setDuration(200+i*10);  
             analyticses.add(a);  
         }  
        return analyticses;  
    View Code
  • 相关阅读:
    Python动态展示遗传算法求解TSP旅行商问题
    MOEAD算法中均匀权向量的实现---Python
    HDU 5294 多校第一场1007题 最短路+最小割
    POJ 3261 Milk Patterns sa+二分
    HDU 4292 FOOD 2012 ACM/ICPC Asia Regional Chengdu Online
    CodeForces 201A Clear Symmetry
    POJ 1679 The Unique MST 确定MST是否唯一
    POJ 3268 Silver Cow Party 最短路 基础题
    POJ 2139 SIx Degrees of Cowvin Bacon 最短路 水題
    POJ2229 Sumsets 基礎DP
  • 原文地址:https://www.cnblogs.com/1ming/p/5784526.html
Copyright © 2011-2022 走看看