Jqplot之柱状图

最新推荐文章于 2017-08-02 17:47:02 发布

iteye_5753

最新推荐文章于 2017-08-02 17:47:02 发布

阅读量191

点赞数

分类专栏： jquery 文章标签： web js jquery jqplot bar ViewUI

本文链接：https://blog.csdn.net/iteye_5753/article/details/82604685

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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