jqplot是基于jquery的web前端图表插件,使用json数据进行图表数据填充
官方地址:http://www.jqplot.com/index.php
使用方式参考文档
以下是工作中写的实例代码段
namespace("sctjfx.byzbfxMain")
$(function(){
/*query*/
$("#sctjfx_byzbfxMain_bxllfx_cxbtn").click(function(){
var para = AKF.formParams("#sctjfx_byzbfxMain_bxllfx_form");
//$("#sctjfx_byzbfxMain_bxllfx_chart").flexSearch(para);
//查询报表数据
var sctjfx_byzbfxMain_bxllfx_data = [[
['福州市',2068]
,['厦门市',1108]
,['莆田市',315]
,['龙岩市',1528]
,['泉州市',1985]
,['外省',987]
]];
//图表渲染divid
var chartId = 'sctjfx_byzbfxMain_bxllfx_chart';
//构建图表
var sctjfx_byzbfxMain_bxllfx_chart = $.jqplot(chartId,sctjfx_byzbfxMain_bxllfx_data,
{
title:'班线流量分析图-泉州客运公司(共8875班次) 统计时间段2011.1.14-2011.1.26',
seriesDefaults: {
shadow: true,
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
sliceMargin: 4,
showDataLabels: true
}
},
legend: { show:true, location: 'e' }
}
);
//图表事件绑定
$('#sctjfx_byzbfxMain_bxllfx_chart').bind('jqplotDataClick',
//data参数为点击图表时对应的数据项
function (ev, seriesIndex, pointIndex, data) {
var strData = data.toString();
//点击外省图块才打开子窗口
if(strData.indexOf('省') != -1){
$.pdialog.open($webroot + "/sctjfx/byzbfx/sctjfx_byzbfxChild.jsp",
"sctjfx_byzbfxChild", "班线流向分析图-泉州客运公司至外省(共987班次) 统计时间段2011.1.14-2011.1.26", {
mask : true,
width : 510,
height : 380
});
}
}
);
});
/*reset*/
$("#sctjfx_byzbfxMain_bxllfx_czbtn").click(function() {
resetForm("sctjfx_byzbfxMain_bxllfx_form");
});
/*tab1 end*/
//模块标识
var modeSign_sctjfx_byzbfxMain_bxjzdfx = "sctjfx_byzbfxMain_bxjzdfx";
//对应模块查询按钮标识
var modecxbtn_sctjfx_byzbfxMain_bxjzdfx = modeSign_sctjfx_byzbfxMain_bxjzdfx + "_cxbtn";
//对应模块重置按钮标识
var modeczbtn_sctjfx_byzbfxMain_bxjzdfx = modeSign_sctjfx_byzbfxMain_bxjzdfx + "_czbtn"
//对应模块form标识
var modeForm_sctjfx_byzbfxMain_bxjzdfx = modeSign_sctjfx_byzbfxMain_bxjzdfx + "_form";
//对应模块图表id
var modeChart_sctjfx_byzbfxMain_bxjzdfx = modeSign_sctjfx_byzbfxMain_bxjzdfx + "_chart";
/*重置按钮功能*/
$("#" + modeczbtn_sctjfx_byzbfxMain_bxjzdfx).click(function() {
resetForm(modeForm_sctjfx_byzbfxMain_bxjzdfx);
});
//查询按钮功能
$("#" + modecxbtn_sctjfx_byzbfxMain_bxjzdfx).click(function(){
var para = AKF.formParams("#" + modeForm_sctjfx_byzbfxMain_bxjzdfx);
//报表图表元素Id
var chartId = modeChart_sctjfx_byzbfxMain_bxjzdfx;
//报表数据
var data = [[
[6,4000],
[9,4000],
[12,4200],
[15,4200],
[18,3000],
[21,3800],
[24,4100]
]];
//报表展示选项----------------点线图
var charOptions = {
title:'班线集中度分析 统计时间段:2011.1.14-2011.1.26',
//两个维度的参数项
axes:{
xaxis:{
label:'X Axis 时间(小时)'
},
yaxis:{
label:'Y Axis 周转量(万人公里)'
}
}
};
//生成图表
$.jqplot(chartId,data,charOptions);
});
//tab2 end
//模块标识
var modeSign_sctjfx_byzbfxMain_bxhxbj = "sctjfx_byzbfxMain_bxhxbj";
//对应模块查询按钮标识
var modecxbtn_sctjfx_byzbfxMain_bxhxbj = modeSign_sctjfx_byzbfxMain_bxhxbj + "_cxbtn";
//对应模块重置按钮标识
var modeczbtn_sctjfx_byzbfxMain_bxhxbj = modeSign_sctjfx_byzbfxMain_bxhxbj + "_czbtn"
//对应模块form标识
var modeForm_sctjfx_byzbfxMain_bxhxbj = modeSign_sctjfx_byzbfxMain_bxhxbj + "_form";
//对应模块图表id
var modeChart_sctjfx_byzbfxMain_bxhxbj = modeSign_sctjfx_byzbfxMain_bxhxbj + "_chart";
/*重置按钮功能*/
$("#" + modeczbtn_sctjfx_byzbfxMain_bxhxbj).click(function() {
resetForm(modeForm_sctjfx_byzbfxMain_bxhxbj);
});
//查询按钮功能
$("#" + modecxbtn_sctjfx_byzbfxMain_bxhxbj).click(function(){
var para = AKF.formParams("#" + modeForm_sctjfx_byzbfxMain_bxhxbj);
//报表图表元素Id
var chartId = modeChart_sctjfx_byzbfxMain_bxhxbj;
//报表数据---柱状对比图
var data = [
[15,7,12,3,9,16.5],
[12,1.5,3,2,4.5,6]
];
//报表展示选项----------------点线图
var charOptions = {
title:'班线横向比较 统计日期:2006-2011',
//两个维度的参数项
axes:{
xaxis:{
label:'X Axis 时间 (年)',
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ['2006年', '2007年', '2008年', '2009年','2010年','2011年']
},
yaxis:{
label:'Y Axis 班线(万人)'
}
},
//图表区域串说明
series: [{
label: '泉州客运中心站'
},
{
label: '泉州客运东站'
}],
//区域串说明的位置,与显示与否
legend: {
show: true,
location: 'ne'
},
//针对特定图表类型的参数--默认为点线图
seriesDefaults: {//vertical,horizontal
//渲染为柱状图
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'vertical',
barPadding: 6,
barMargin: 20
}
}
};
//生成图表
$.jqplot(chartId,data,charOptions);
});
//tab3 end
});