jqplot插件的简单使用

最近项目中需要使用jqplot做一些统计图，于是做了好几个实例，在这里分享给需要的朋友。

1.jqplot柱状图

data = [['公务车',12], ['可用公务车', 12], ['其它车辆',827]];
    //jqplot本身是不支持的，但是支持自己写的数组
    var total = 0;
    $(data).map(function(){total += this[1];})
    var arrLabels = $.makeArray($(data).map(function(){return this[1] + " " +"["+ Math.round(this[1]/total * 100) + "%]";}));//这里主要是将值写在饼状图中，格式可以自己定义。
    $.jqplot('chartdiv', [data], {  
        title: "",//$("#User").find("option:selected").text() + '--月度消费统计表( Last 12 Monthes)', //标题  
        animate: $.jqplot.use_excanvas, //是否动画显示  
        seriesDefaults: {
            fill: true,    
            showMarker: true,    
            shadow: false,   
            renderer:$.jqplot.PieRenderer,    
            rendererOptions:{   
                dataLabels:arrLabels,//对应变量arrLabels
                dataLabelsFormatString:'%s',
                   showDataLabels: true,//显示数值加上百分比
                diameter: undefined, // 设置饼的直径    
                padding: 20, // 饼距离其分类名称框或者图表边框的距离，变相该表饼的直径    
                sliceMargin: 6, // 饼的每个部分之间的距离    
                fill:true, // 设置饼的每部分被填充的状态  
                shadow:true, //为饼的每个部分的边框设置阴影，以突出其立体效果    
                shadowOffset: 2, //设置阴影区域偏移出饼的每部分边框的距离    
                shadowDepth: 5, // 设置阴影区域的深度    
                shadowAlpha: 0.07 // 设置阴影区域的透明度    
            }  
        },
        legend:{    
            show: true,//设置是否出现分类名称框（即所有分类的名称出现在图的某个位置）    
            location: 'ne', // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w.    
            xoffset: 12, // 分类名称框距图表区域上边框的距离（单位px）    
            yoffset: 12, // 分类名称框距图表区域左边框的距离(单位px)    
        }
    });  
    /*//给柱状图加点击事件，其中pointIndex是可以作为标记值的，类似数组的下标。
    $('#chartdiv').bind('jqplotDataClick',  
        function (ev, seriesIndex, pointIndex, data) {
            console.log(ev);
            //data值是xy坐标值，pointIndex是代表第几个柱子（从0开始），seriesIndex一直是0
            alert(ev+"::"+seriesIndex+"::"+pointIndex+"::"+data);
    });*/ 

2.柱状图

   //data是ajax返回的json串

        var line1 = [];
        var dept = [];

        var arr= [];
        for(var i=1;i<data.length;i++){
            line1.push(data[i].c);
            dept.push(data[i].deptName);
            arr.push(data[i].dept_id);
        }
        //chart2柱状图
        //--添加横纵坐标分类
       plot = $.jqplot('chart', [line1], {
        title: '上线率统计图',
        legend: {show: true, location: 'ne'}, //提示工具栏--show：是否显示,location: 显示位置 (e:东,w:西,s:南,n:北,nw:西北,ne:东北,sw:西南,se:东南)
        series: [{label: '上线率'}], //提示工具栏
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer, //使用柱状图表示
                pointLabels: { show: true },
                rendererOptions: {
                     barMargin: 30,   //柱状体组之间间隔
                     varyBarColor: true
                 }
            },
            axes: {
                xaxis : {
                    ticks : dept,
                    renderer : $.jqplot.CategoryAxisRenderer
                //x轴绘制方式
                    },
                yaxis: {
                    tickOptions:{
                        formatString :"%.2f%"//y轴数据显示格式
                    }
               }
            }
        });

//每一个柱子都可以绑定事件，根据id，这里是将每根柱子的id封装到arr数组中，然后通过pointIndex去取id的值
        $('#chart').bind('jqplotDataClick',  
            function (ev, seriesIndex, pointIndex, data) {
                var depid = arr[pointIndex];
                $.ajax({
                     url: "/rest/gps_online_stat.json",
                     data: {dept_id : depid},
                     global : false,
                     type: 'POST',
                     dataType :'json'
                 }).done(function(data) {
                     //成功后的操作
                 });
                //data值是xy坐标值，pointIndex是代表第几个柱子（从0开始），seriesIndex一直是0
        });

//html部分

<div id="chart" style="width:100%; height:380px;"></div>

希望能够帮助有需要的朋友