Jqplot之柱状图

antlove

浏览: 266492 次
性别:
来自: 苏州

最近访客更多访客>>

shine_fu

青山撒地方

ascii_he

terryhello

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

web js jquery jqplot bar

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 ... '  
            }  
        }  
    });  
});