jqplot前端图形报表

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
???
});