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