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

不再啰嗦直接上例子：

$(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 : '<ss:date name="startDate" format="yyyy-MM-dd HH:mm" />——<ss:date name="endDate" format="yyyy-MM-dd HH:mm" />',
style : {
margin : '10px 0 0 0' // center it
}
},
xAxis : [ {
categories : [ <ss:iterator value="dataList">'<ss:date name="statDate" format="MM-dd" />' ,</ss:iterator> ]
} ],
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 : [ <ss:iterator value="dataList"><ss:property value="click" />,</ss:iterator> ]

},

{
name : '曝光数',
type : 'line',
color : '#AA4643',
yAxis : 1,

data : [ <ss:iterator value="dataList"> <ss:property value="impressions" />,</ss:iterator> ]

},
{
name : '点击率',
color : '#89A54E',
type : 'line',
yAxis : 2,
data : [ <ss:iterator value="dataList"> <ss:property value="clickRank" /> ,</ss:iterator>]
} ]
});

});

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

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

1. if(t.grid)
2. returnfalse;//returnifalreadyexist
4. //applydefaultproperties
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=<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实现）：

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