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) 
returnfalse;//returnifalreadyexist 
//applydefaultproperties 
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实现）：
由于时间仓促，仅仅写了些皮毛，大家参考使用，详细使用方法还请参考官网。

jQuery插件Highcharts、flexigrid实践

相关推荐