jqplot报表之柱状图

jqplot文件目录
jqplot简单报表柱状图插件 随笔 第1张
前台引用插件

     <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/cs/mics/cal/dist1          /excanvas.js">  </script><![endif]-->
    <script class="include" type="text/javascript" src="/cs/mics/cal/dist1/jquery.min.js"></script> 
    <script class="include" type="text/javascript" src="/cs/mics/cal/dist1/jquery.jqplot.min.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="/cs/mics/cal/dist1/plugins        /jqplot.barRenderer.min.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="/cs/mics/cal/dist1/plugins        /jqplot.categoryAxisRenderer.min.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="/cs/mics/cal/dist1/plugins        /jqplot.pointLabels.min.js"></script>
    <script language="javascript" type="text/javascript" src="/cs/mics/cal/dist1/excanvas.js"></script>
//ajax请求后台，返回json数据
function reloadSumChart(){
    var me =this;
    var startDt = $('startCreateAt').value;
    startDt = startDt.replace(/\-/g,"");
    var endDt   = $('endCreateAt').value;
    endDt = endDt.replace(/\-/g,"");
    var gbmCode = getSelectedValue('gbm_code');
    var platCode = getSelectedValue('plant_code');
    var deptCode = getSelectedValue('dept_code');
    var url = "/cs/mics/cal/calTargetStatChart.do?gbm_code="+gbmCode+"&plant_code="+platCode+"&dept_code="+deptCode+"&st_date="+startDt+"&ed_date="+endDt;
    jQuery.ajax({
        type: "get",
        url: url,
        contentType: 'application/json;charset=UTF-8', 
        dataType: "json",
        success: function (data){
            var cnt = new Array();
            var tick = new Array();

            var rows=data.rows;
            for (var i = 0;i< (rows.length<=5?rows.length:5);i++){
                tick.push(rows[i].BASE_NAME);
                cnt.push(parseInt(rows[i].DELAY_CNT));
            }
            document.getElementById("chart1").innerHTML="";
            me.showView(cnt,tick);
        },
        error:function (error) {      
            alert("request error！");
        }
     });
}
//显示柱状图
function showView(cnt,tick){
     var ticks = tick;
     var plot1 = jQuery.jqplot('chart1', [cnt], {//chart1为显示图表的div的id
        seriesDefaults:{
            renderer:jQuery.jqplot.BarRenderer,
                pointLabels: { show: true } ,
               rendererOptions: {barWidth: 50,barMargin: 50}              
        },
        noDataIndicator:{
            show:true,
            indicator:'<font color=red>no data found</font>' // 可使用html标签
        },
        

        series:[
            {label:'DELAY_CNT'}
        ],

        legend: {
            show: true,
            placement: 'outsideGrid'
        },
        axes: {
            xaxis: {
                renderer: jQuery.jqplot.CategoryAxisRenderer,
                ticks: ticks
            },

            yaxis: {
                pad: 1.05,
                tickOptions: {formatString: '$%d'}
            }
        }
    })
}

<div id="chart1"  style="width:450px;" class="Graph"></div><!-- 這是柱狀圖位置 -->

实现结果如图

jqplot简单报表柱状图插件 随笔 第2张

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

更多报表样式，可以参照examples文件例子

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄