【jqPlot】jqPlot柱状图

最新推荐文章于 2023-07-20 16:00:10 发布

lizhuquanx

最新推荐文章于 2023-07-20 16:00:10 发布

阅读量294

点赞数

分类专栏： chart 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/lizhuquanx/article/details/84614421

版权

chart 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

lizhuquanx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【jqPlot】jqPlot柱状图

1）首先引入必须的js和css文件&lt;link href="&lt;%=contextPath %&gt;/lib/jqplot/jquery.jqplot.css" rel="stylesheet" type="text/css" /&gt;&lt;script type="text/javascript" src="&lt;%=contextPath
复制链接

扫一扫