highcharts绘制统计图的应用

 

第一步：

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

第二步:

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

第三步:

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

  $('#line').highcharts({
           xAxis: { //横轴     
           categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            title: {text: '横轴名称'}
       },
       yAxis: {//纵轴

           title: {

                text: '纵轴名称'

           }

       },  
       series: [{//画图所依据的数据

           data: [1, 3, 5, 2, 3, 9, 6, 7, 3, 5, 4, 3]       

       }]           

       });

   });

几点说明：

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      
       });
    };

后台得到数据的方法如下

/**
     * 数据统计图
     * @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;

    }

 注意：

     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;
	

       一个很好的学习Highcharts插件的网站，类似于w3c，可以自己对例子进行编辑，http://api.highcharts.com/highcharts