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
});
分享到:
相关推荐
jqplot图形报表开发所用到的js jqplot图形报表开发所用到的js
jquery 图形报表插件jqplot 简介及参数详解
jqPlot 图形报表插件简介及参数详解(jquery) 前边也讲过一个基于java的图形报表,功能及外观也不错,但存在通用性的问题。所以我们来学一个具有易用性+兼容性+可扩展性的js图表插件。 jqPlot是一款基于jquery类库的...
报表制作 曲线图 饼图 折线图 jquery.jqplot水晶报表 制作图表,统计,汇总,预测比较实用,结合流行的jquery技术,更是能大大提高工作效率,使用的灵活性高,可以做出动态、时时的效果。
jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线形图、条形图、饼形图。jqPlot支持为图表设置各种不同的样式,提供Tooltips,数据点高亮显示等功能柱状图可以提供坐标轴定制、柱条宽度、颜色定制和阴影设置等等...
线状图也称曲线图,是指用于技术分析,线状图是最简单的图形。jqplot可以方便的绘制线状图。 饼图是一个划分为几个扇形的圆形统计图表,用于描述量、频率或百分比之间的相对关系。jqplot可以方便的绘制饼图。 面积图...
jqplot
jqplot报表的实现,内有多种报表的实现,及jqplot的API。
用JS作图形报表,有多个插件可选择,其中HighCharts、JqPlot、JsChart是使用比较多的,但HighCharts和JsChart只能用作个人使用、为了以后项目中能使用,很多人选择JqPlot(个人和商业都免费)。俺最近开发项目进要...
前端项目-jqPlot,jqplot是jquery javascript框架的绘图和图表插件。jqplot生产的线条、条形图和饼图很漂亮,有很多特点。
jqplot官方文档,包含所有的api。 居家旅行必备
使用jqplot进行图形绘制,该插件为图形标注线,扩展标注线的功能使其能添加注释。
官方jqplot chart 例子,非常丰富。应有尽有。。
功能概述: 有多种图表样式可供选择 可以自定义日期轴线 可设置旋转轴文字 自动计算趋势线 工具条提示和高亮数据点 默认最优设置,非常易于使用 以上功能在jqPlot主页中的示例页面有 很多直观的展示。这里是它详细...
jqplot饼状统计图,很鲜明很简单的例子。如需其他图形只需改动小部分即可。
一个很好的开源JQuery 图形控件,包括源代码和样例程序。
jqplot插件的option对象属性的配置描述
没啥可描述的,就是用jqplot做的例子,无语了,这还有文字限制,一点都不自由。