Jqplot之柱状图

barChart.html

 

<script type="text/javascript" src="jslib/jquery.min.js"></script>  
<script type="text/javascript" src="jslib/excanvas.min.js"></script> 
<script type="text/javascript" src="jslib/jquery.jqplot.min.js"></script>  


<script type="text/javascript" src="jslib/jqplot.highlighter.min.js"></script>  
<script type="text/javascript" src="jslib/jqplot.canvasAxisLabelRenderer.min.js"></script>  
<script type="text/javascript" src="jslib/jqplot.logAxisRenderer.min.js"></script>  
<script type="text/javascript" src="jslib/jqplot.canvasTextRenderer.min.js"></script>  
<script type="text/javascript" src="jslib/jqplot.canvasAxisTickRenderer.min.js"></script>  
<script type="text/javascript" src="jslib/jqplot.dateAxisRenderer.min.js"></script>  
<script type="text/javascript" src="jslib/jqplot.categoryAxisRenderer.min.js"></script>  
<script type="text/javascript" src="jslib/jqplot.barRenderer.min.js"></script>  
  
<script type="text/javascript" src="barChart.js"></script>  

<link type="text/css" rel="stylesheet" href="css/jquery.jqplot.min.css"/>  
  
<div id="chart"></div>  

 

barChart.js

$(document).ready(function(){  
    var barData = [[2,"a"], [4,"b"], [6,"c"], [3,"d"]]  ;
    $.jqplot('chart', [barData], {  
        title:"this is the title ... ",  
        seriesDefaults: {  
            renderer:$.jqplot.BarRenderer,   
            rendererOptions: {  
                barDirection: 'horizontal'  
            }  
        },  
        axes: {  
            xaxis: {  
                label:"the x line ... "  
            },  
            yaxis: {  
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,  
                renderer: $.jqplot.CategoryAxisRenderer,  
                label:'the y line ... '  
            }  
        }  
    });  
});