用Jqplot做的一个简易柱状图 -

VincentZheng

浏览: 52293 次
性别:
来自: 成都

最近访客更多访客>>

zzc125

why_Are_You

zjqfly21

srzh2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

用Jqplot做的一个简易柱状图

博客分类：

报表相关

jQuery json CSS jfreechart JSP

Jqplot应该说也是属于基于JQuery制作的一个插件,或者说是类库.运用Jqplot能达到不错的效果,感觉和JFreeChart差不多,不过各有所长吧,以下是页面代码,全都写一个JSP里了:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="javax.servlet.*, javax.servlet.jsp.*;" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Horizontal Bar with Vertical lines Test</title>

<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/jqplot/jquery.jqplot.css" />

<!-- BEGIN: load jquery -->
<script language="javascript" type="text/javascript"
	src="${pageContext.request.contextPath}/jquery-1.3.2.min.js"></script>
<!-- END: load jquery -->

<!-- BEGIN: load jqplot -->
<script language="javascript" type="text/javascript"
	src="${pageContext.request.contextPath}/jqplot/excanvas.js"></script>
<script language="javascript" type="text/javascript"
	src="${pageContext.request.contextPath}/jqplot/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript"
	src="${pageContext.request.contextPath}/jqplot/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript"
	src="${pageContext.request.contextPath}/jqplot/jqplot.categoryAxisRenderer.js"></script>
<!-- END: load jqplot -->

<script language="javascript" type="text/javascript">
	function drawHistogram(type, arrayKey, arrayValue) {

		$.jqplot.config.enablePlugins = true;
		line = arrayValue;
		plot = $.jqplot('chart', [ line ], {
			title : type,
			series : [ {
				renderer : $.jqplot.BarRenderer,
				color : 'blue',
				rendererOptions : {
					barDirection : 'horizontal',
					//the interval of two bars
					barMargin : 15,
					//the width of each bar
					barWidth : 22
				}
			} ],
			axes : {
				xaxis : {
					min : 0,
					max : 5,
					tickInterval : '1',
					renderer : $.jqplot.LinearAxisRenderer
				},
				yaxis : {
					renderer : $.jqplot.CategoryAxisRenderer,
					ticks : arrayKey
				}
			}
		});
	}

	$(function() {
		$("#chart").empty();
		var url = "testAction.action";
		var type = $("#type").val();
		var param = {
			type : type
		};
		$.post(url, param, function(data) {
			var json = eval("(" + data + ")")[0];
			var index = 0;
			//the values on the Y axis to display
				var arrayKey = new Array();
				//the values compared to the scale on x axis to display
				var arrayValue = new Array();
				$.each(json, function(key, value) {
					arrayKey[index] = key;
					arrayValue[index] = [ value, index + 1 ];
					index++;
				});
				//the width of the div #chart
				var chartWidth = 500;
				//the height of the div #chart,37 is calculated by barMargin+barWidth
				var chartHeight = (index + 1) * 37 + 15;
				var chart = {
					width : chartWidth + 'px',
					height : chartHeight + 'px'
				};
				$("#chart").css(chart);
				drawHistogram(type, arrayKey, arrayValue);

				$("#chart").css("left",
						($(window).width() - $("#chart").width()) / 2);
				$("#chart").css("top",
						($(window).height() - $("#chart").height()) / 2);
			}, 'json');
	});
</script>

</head>
<body>
<div id="chart"></div>
</body>
</html>

分享到：