【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'
}
}); 
相关推荐
Burgdan 0喜欢 / 0评论 2015-06-11
pjk 0喜欢 / 0评论 2014-09-15
javaweiming 0喜欢 / 0评论 2014-07-12
xiuping0 0喜欢 / 0评论 2013-01-29
maple00 0喜欢 / 0评论 2012-10-29
ningwentao 0喜欢 / 0评论 2012-09-12
Sincelily 0喜欢 / 0评论 2011-10-25
84533871 0喜欢 / 0评论 2019-04-19
89580498 0喜欢 / 0评论 2011-04-28
舜岳 0喜欢 / 0评论 2009-07-25