使用Highcharts和flexigrid的一些学习感想

 jQuery有很多好用的插件，最近由于项目需要学习使用了Highcharts、flexigrid、jsTree三个插件：

  （一）  Highcharts是一个制作图表的纯Javascript类库，支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；使用需要导入jquery.js,highcharts.js以及exporting.js，可以通过网站http://www./下载。

首先是  Highcharts插件

  

    Highcharts包括配置选项

   chart：{

           renderTo//放置图表的容器

           defaultSeriesType//图表类型line, spline, area, areaspline, column, bar, pie , scatter

           inverted: true//左右显示，默认上下正向

   }

   tooltip：{

        formatter:当鼠标悬置数据点时的提示

  }

   xAxis:{

      categories:值的列表eg.[1,2,3]

   }

  yAxis:{

     title：纵柱标题

     labels:纵柱标尺

   }

  title:{

      text:图标标题名

      style:标题样式

   }

   subtitle：{

   }

   legend：{}图例位置样式

   series接受的数据格式为json Array：[{},{},{}]具体对应yAxis

不再啰嗦直接上例子：

 

     $(document).ready(
   function() {
    chart = new Highcharts.Chart( {
     chart : {
      renderTo : 'container',
      margin : [ 80, 200, 60, 100 ],
      zoomType : 'xy'
     },
     title : {
      text : '合同  ${contractName} 数据分析',
      style : {
       margin : '10px 0 0 0' // center it
     }
     },
     subtitle : {
      text : '——',
      style : {
       margin : '10px 0 0 0' // center it
     }
     },
     xAxis : [ {
      categories : [ ''  , ]
     } ],
     yAxis : [  // Secondary yAxis
        {
         title : {
         text : '点击数',
         margin : 70,
         style : {
          color : '#4572A7'
         }
        },
        
        labels : {
         formatter : function() {
          return this.value + ' 次';
         },
         style : {
          color : '#4572A7'
         }
        }

       }, { // Tertiary yAxis
        title : {
         text : '曝光数',
         margin : 80,
         style : {
          color : '#AA4643'
         }
        },
        labels : {
         formatter : function() {
          return this.value + ' 次';
         },
         style : {
          color : '#AA4643'
         }
        },
        opposite : true,
        offset : 100
       },
       { // Primary yAxis
        labels : {
         formatter : function() {
          return this.value + '%';
         },
         style : {
          color : '#89A54E'
         }
        },
        title : {
         text : '点击率',
         style : {
          color : '#89A54E'
         },
         margin : 50
        },
        opposite : true

       }],
     tooltip : {
      formatter : function() {
       var unit = {
        '点击数' : '次',
        '曝光数' : '次',
        '点击率' : '%'
       }[this.series.name];

       return '' + this.x + ': ' + this.y + ' ' + unit;
      }
     },
     legend : {
      layout : 'vertical',
      style : {
       left : '30px',
       bottom : 'auto',
       right : 'auto',
       top : '10px'
      },
      backgroundColor : '#FFFFFF'
     },
     series : [
        {
        name : '点击数',
        color : '#4572A7',
        type : 'line',
        data : [ , ]

       },
       
       {
        name : '曝光数',
        type : 'line',
        color : '#AA4643',
        yAxis : 1,
        
        data : [ , ]

       },
       {
        name : '点击率',
        color : '#89A54E',
        type : 'line',
        yAxis : 2,
        data : [ ,]
       } ]
    });

   });

Html中只需要适当位置加上

即可。如果要显示网格式的风格再js中再加入下面代码：

Highcharts.theme = {
   colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
   chart: {
      backgroundColor: {
         linearGradient: [0, 0, 500, 500],
         stops: [
            [0, 'rgb(255, 255, 255)'],
            [1, 'rgb(240, 240, 255)']
         ]
      }
,
      borderWidth: 2,
      plotBackgroundColor: 'rgba(255, 255, 255, .9)',
      plotShadow: true,
      plotBorderWidth: 1
   },
   title: {
      style: {
         color: '#000',
         font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
      }
   },
   subtitle: {
      style: {
         color: '#666666',
         font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
      }
   },
   xAxis: {
      gridLineWidth: 1,
      lineColor: '#000',
      tickColor: '#000',
      labels: {
         style: {
            color: '#000',
            font: '11px Trebuchet MS, Verdana, sans-serif'
         }
      },
      title: {
         style: {
            color: '#333',
            fontWeight: 'bold',
            fontSize: '12px',
            fontFamily: 'Trebuchet MS, Verdana, sans-serif'

         }           
      }
   },
   yAxis: {
      minorTickInterval: 'auto',
      lineColor: '#000',
      lineWidth: 1,
      tickWidth: 1,
      tickColor: '#000',
      labels: {
         style: {
            color: '#000',
            font: '11px Trebuchet MS, Verdana, sans-serif'
         }
      },
      title: {
         style: {
            color: '#333',
            fontWeight: 'bold',
            fontSize: '12px',
            fontFamily: 'Trebuchet MS, Verdana, sans-serif'
         }           
      }
   },
   legend: {
      itemStyle: {        
         font: '9pt Trebuchet MS, Verdana, sans-serif',
         color: 'black'

      },
      itemHoverStyle: {
         color: '#039'
      },
      itemHiddenStyle: {
         color: 'gray'
      }
   },
   labels: {
      style: {
         color: '#99b'
      }
   }
};

var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

你也可以自己按要求定义显示风格。

另外，要从服务器获取数据动态生成运行曲线，像心电图那样可以

配置chart:{

events:{

   load:requestData

  }

} ,

series: [{ name: '服务器数据', data: [] }]

方法:

chart.series[0].addPoint([x,y], true, shift);

var x=-10;

02	$(document).ready(function(){

03	chart = new Highcharts.Chart({

04

chart: {

05	renderTo: 'container',

06	defaultSeriesType: 'spline',

07

events: {

08	load: requestData

09

}

10

},

11

tooltip:{

12	formatter: function() {

13	return ''+ this.series.name +' '+

14	'时间 : '+ this.x +' '+

15	'价格: '+ this.y;

16

}

17

},

18

title: {

19	text: '运行曲线'

20

},

21

xAxis: {

22	//type: 'linear',

23	//tickPixelInterval: 10,

24	maxZoom: 60*3,

25

min:0,

26	minPadding:0.2

27

},

28

yAxis: {

29	minPadding: 0.2,

30	maxPadding: 0.2,

31

title: {

32	text: 'Value',

33	margin: 80

34

}

35

},

36	series: [{

37	name: '服务器数据',

38

data: []

39

}//,{

40	//name:"fuww",

41

//data:[]

42

//}

43

]

44

});

45	function requestData() {

46

$.ajax({

47	url: 'orderAuction.action',

48	success: function(point) {

49	var series = chart.series[0],

50	shift = series.data.length > 20;

51	var s=eval('('+point+')');

52	var y=s.initial.price;

53	var z=s.initial.change;

54	chart.series[0].addPoint([x,y], true, shift);

55	// call it again after one second

56	timett = setTimeout('requestData()', 1000);

57	//timett = setInterval(requestData,1000);

58

},

59	cache: false

60

});

61

x=x+10;

62

}

（二）jQuery插件flexigrid是像ext的DataGrid一样的活动表格插件，使用它首先要引入query.js,还要引入flexigrid.js和flexigrid.css

        看看插件中部分代码以及说明 

1. if (t.grid)   
2.             return false; // return if already exist   
3.   
4.         // apply default properties   
5.         p = $.extend({   
6.             height : 200, // flexigrid插件的高度，单位为px   
7.             width : 'auto', // 宽度值，auto表示根据每列的宽度自动计算   
8.             striped : true, // 是否显示斑纹效果，默认是奇偶交互的形式   
9.             novstripe : false,   
10.             minwidth : 30, // 列的最小宽度   
11.             minheight : 80, // 列的最小高度   
12.             resizable : true, // 是否可伸缩   
13.             url : false, // ajax方式对应的url地址   
14.             method : 'POST', // 数据发送方式   
15.             dataType : 'xml', // 数据加载的类型   
16.             checkbox : false,// 是否要多选框   
17.             errormsg : '连接错误!',// 错误提示信息   
18.             usepager : false, // 是否分页   
19.             nowrap : true, // 是否不换行   
20.             page : 1, // 默认当前页   
21.             total : 1, // 总页面数   
22.             useRp : true, // 是否可以动态设置每页显示的结果数   
23.             rp : 15, // 每页默认的结果数   
24.             rpOptions : [5,10, 15, 20, 25, 30, 40],// 可选择设定的每页结果数   
25.             title : false,// 是否包含标题   
26.             pagestat : '显示第 {from} 条到 {to} 条,共 {total} 条数据',// 显示当前页和总页面的样式   
27.             procmsg : '正在处理,请稍候 ...',// 正在处理的提示信息   
28.             query : '',// 搜索查询的条件   
29.             qtype : '',// 搜索查询的类别   
30.             nomsg : '没有数据存在!',// 无结果的提示信息   
31.             minColToggle : 1, // 允许显示的最小列数   
32.             showToggleBtn : true, // 是否允许显示隐藏列，该属性有bug设置成false点击头脚本报错   
33.             hideOnSubmit : true,// 隐藏提交   
34.             autoload : true,// 自动加载   
35.             blockOpacity : 0.5,// 透明度设置   
36.             onToggleCol : false,// 当在行之间转换时，可在此方法中重写默认实现，基本无用   
37.             onChangeSort : false,// 当改变排序时，可在此方法中重写默认实现，自行实现客户端排序   
38.             onSuccess : false,// 成功后执行   
39.             onSubmit : false   
40.               // 调用自定义的计算函数   
41.           }, p);  

了解了每个属性的含义后就可以根据自己的需要来配置了，看我的实例：

 $("#flex1").flexigrid
   (
   {
        url:  './contract_getAllJsonData.action?startDate=&endDate=&contractId=${contractId}',
   dataType: 'json',
   method: 'POST',
   colModel : [
    {display: '广告位', name : 'advName', width : 300, sortable : true, align: 'center'},
    {display: '开始投放时间', name : 'start', width : 180, sortable : true, align: 'left'},
    {display: '结束投放时间', name : 'end', width : 180, sortable : true, align: 'left'},
    {display: '点击数', name : 'clicks', width : 80, sortable : true, align: 'left'},
    {display: '曝光数', name : 'impressions', width : 80, sortable : true, align: 'left'},
    {display: '分析', name : 'impressions', width : 80, sortable : true, align: 'left'}
    ],
      sortname: "advName",
   sortorder: "asc",
   usepager: true,
   useRp: true,   
   title: '统计期间该合同广告位投放',
   showTableToggleBtn: true,
   width: 1000,
   height: 200
   }
 );  

后台java代码（struts2），由于框架不同代码有可能不同，我这里一次查出了所有需要数据，没有考虑分页，需要分页的话，请将page 等信息传入后来查询。

/**
  * 用于结合flexigrid实现可选表格
  * @return
  */
 public String getAllJsonData() {
  SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm");
  ContractReportService service = (ContractReportService) SpringHelper
  .getBean(TMG_REPORTS_CONTRACT);
  Map map = new HashMap();
  map.put("contractId", contractId);
  map.put("startdate", startDate);
  map.put("enddate", endDate);
  list = service.getAdvListbyContract(map);
  try {
  List mapList = new ArrayList();  
  for(int i = 0; i < list.size(); i++) { 
     Map cellMap = new HashMap(); 
     ContractReport cr = (ContractReport)list.get(i);
           cellMap.put("cell", new Object[] {cr.getAdvName(), formatter.format(cr.getStart()), formatter.format(cr.getEnd()), cr.getClicks(), cr.getImpressions(),""});    
           mapList.add(cellMap);  
  }
     Map pageInfo = new HashMap();     
     pageInfo.put("rows", mapList);
     JSONObject object = new JSONObject();  
     object.accumulateAll(pageInfo);

     Struts2Utils.getResponse().setContentType("text/x-json");
     Struts2Utils.getResponse().setCharacterEncoding("UTF-8");
     Struts2Utils.getResponse().setHeader("Cache-Control", "no-cache");

     Struts2Utils.getResponse().getWriter().write(object.toString());
     Struts2Utils.getResponse().getWriter().flush();
     Struts2Utils.getResponse().getWriter().close();

  } catch (IOException e) {
   e.printStackTrace();
  }
  return null;
 }

 最后上图（用highcharts和flexigrid实现）：

由于时间仓促，仅仅写了些皮毛，大家参考使用，详细使用方法还请参考官网。