转 jQuery插件Highcharts、flexigrid实践

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

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

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

不再啰嗦直接上例子：

Html中只需要适当位置加上<div id="container" ></div>即可。如果要显示网格式的风格再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 +'<br/>'+ 

14
                '时间 : '+ this.x +'<br/>'+ 

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
        看看插件中部分代码以及说明 
if (t.grid)   
            return false; // return if already exist   
  
        // apply default properties   
        p = $.extend({   
            height : 200, // flexigrid插件的高度，单位为px   
            width : 'auto', // 宽度值，auto表示根据每列的宽度自动计算   
            striped : true, // 是否显示斑纹效果，默认是奇偶交互的形式   
            novstripe : false,   
            minwidth : 30, // 列的最小宽度   
            minheight : 80, // 列的最小高度   
            resizable : true, // 是否可伸缩   
            url : false, // ajax方式对应的url地址   
            method : 'POST', // 数据发送方式   
            dataType : 'xml', // 数据加载的类型   
            checkbox : false,// 是否要多选框   
            errormsg : '连接错误!',// 错误提示信息   
            usepager : false, // 是否分页   
            nowrap : true, // 是否不换行   
            page : 1, // 默认当前页   
            total : 1, // 总页面数   
            useRp : true, // 是否可以动态设置每页显示的结果数   
            rp : 15, // 每页默认的结果数   
            rpOptions : [5,10, 15, 20, 25, 30, 40],// 可选择设定的每页结果数   
            title : false,// 是否包含标题   
            pagestat : '显示第 {from} 条到 {to} 条,共 {total} 条数据',// 显示当前页和总页面的样式   
            procmsg : '正在处理,请稍候 ...',// 正在处理的提示信息   
            query : '',// 搜索查询的条件   
            qtype : '',// 搜索查询的类别   
            nomsg : '没有数据存在!',// 无结果的提示信息   
            minColToggle : 1, // 允许显示的最小列数   
            showToggleBtn : true, // 是否允许显示隐藏列，该属性有bug设置成false点击头脚本报错   
            hideOnSubmit : true,// 隐藏提交   
            autoload : true,// 自动加载   
            blockOpacity : 0.5,// 透明度设置   
            onToggleCol : false,// 当在行之间转换时，可在此方法中重写默认实现，基本无用   
            onChangeSort : false,// 当改变排序时，可在此方法中重写默认实现，自行实现客户端排序   
            onSuccess : false,// 成功后执行   
            onSubmit : false   
              // 调用自定义的计算函数   
          }, p);  
了解了每个属性的含义后就可以根据自己的需要来配置了，看我的实例：
 $("#flex1").flexigrid
   (
   {
      
  url:  './contract_getAllJsonData.action?startDate=<ss:date 
name="startDate" format="yyyy-MM-  dd"/>&endDate=<ss:date 
name="endDate" format="yyyy-MM-dd"/>&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(),"<img alt='分析' 
src='../image/analyse.gif'>"});     
           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实现）：
由于时间仓促，仅仅写了些皮毛，大家参考使用，详细使用方法还请参考官网。
http://www.highcharts.com/
 
转自：http://blog.csdn.net/liuzhoulong/article/details/6076071
仅供个人收藏

posted on 2012-08-28 16:49 把酒言欢阅读(1741) 评论(0) 编辑收藏举报