【jqPlot】jqPlot柱状图

amyleeYMY

2014-07-14

1）首先引入必须的js和css文件

<link href="<%=contextPath %>/lib/jqplot/jquery.jqplot.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/jquery.min.js"></script>
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.pieRenderer.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.logAxisRenderer.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.barRenderer.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.enhancedLegendRenderer.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.highlighter.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.pointLabels.min.js"></script>  
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.cursor.min.js"></script> 
<script type="text/javascript" src="<%=contextPath %>/lib/jqplot/plugins/jqplot.dragable.min.js"></script>

2）在body上定义一个div容器

<body>  
   <div id="chartContainer"/>  
</body>

3）柱状图

//构造数据
   var date = [['2014-07-01',1],['2014-07-02',2],['2014-07-03',3],['2014-07-04',4],['2014-07-05',5],['2014-07-06',6],['2014-07-07',7]];
  //构造柱状图chart
   $.jqplot('chartContainer', [date], {  
        title : '柱状图',  
        seriesDefaults : {  
            renderer : jQuery.jqplot.BarRenderer,  
            rendererOptions : {  
              barMargin : 20, //柱子间的外间距
                animation: {  
                    show: true  
                }  
            },  
            pointLabels : {  
                show : true  
            }  
        },  
        axesDefaults : {  
            tickRenderer : jQuery.jqplot.CanvasAxisTickRenderer,  
            tickOptions : {  
                angle : 0  
            }  
        },  
        axes : {  
            xaxis : {  
                renderer : jQuery.jqplot.CategoryAxisRenderer  
            },  
            yaxis : {  
                tickOptions : {  
                    angle : 0  
                }  
            }  
        },  
        legend : {// Date series title  
        	renderer : jQuery.jqplot.EnhancedLegendRenderer,
            show : true,  
            location : 'ne',  
            placement : 'inside'
        }  
    });

【jqPlot】jqPlot柱状图