Jqplot柱图前台代码

引入jqplot相关js，css文件：

<script type="text/javascript" src="../../common/js/jqplot/jquery.jqplot.min.js"></script>
<!--[if IE]><script language="javascript" type="text/javascript" src="../../common/js/jqplot/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="../../common/js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="../../common/js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../../common/js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../../common/js/jqplot/plugins/jqplot.pointLabels.min.js"></script>

<script type="text/javascript" src="../../common/js/jqplot/plugins/jqplot.barRenderer.min.js"></script>

<link rel="stylesheet" type="text/css" href="../../common/css/jqplot/jquery.jqplot.css"></link>

//图例说明变量
var legends = [{label:'预测销量'},{label:'实际销量'},{label:'整体MAPE'},{label:'平均MAPE'},{label:'不分仓SKU数量'},{label:'分仓SKU数量'},{label:'促销天数'},{label:'库存异常天数'}];

v

//绘制柱图

var plot1 = $.jqplot('chartdiv',values,{
//设置统计图柱图属性
      seriesDefaults: {
          stackSeries: true,
          captureRightClick: true,
            renderer:$.jqplot.BarRenderer, //显示为柱图
            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
            pointLabels: { show: true }//,
        },
        //设置横纵坐标样式
        axes: { 
         //X轴
         xaxis: {   
         renderer: $.jqplot.CategoryAxisRenderer,  //渲染器          
      ticks:ticks //X轴坐标
         },
         //Y轴
         yaxis: {
         tickOptions:{formatString:'%.2f'}//设置数据格式 
         }
        },
        series:legends, //图例说明数据
        legend:{
         show: true, //是否显示图例说明
         showLabels: true ,  //是否显示框
         location: 'e', //图例显示位置
         placement: 'outsideGrid' //图例是否在统计图中
        }

});

<div id="chartdiv" style="height:300px;width:1000px;"></div>

显示的div中样式中的高度和宽度是不能省略的，否则在IE浏览器中出现实现错误。

统计图中的数据格式为数组格式，如果每个横坐标中的有多个柱图，那么数据格式为[[横坐标1数据1,横坐标2数据1],[横坐标1数据2,横坐标2数据1]]