用Jqplot做的一个简易柱状图

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

VincentZheng163

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

阅读量211

点赞数

分类专栏：报表相关文章标签： jQuery json CSS jfreechart JSP ViewUI

报表相关专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种基于JQuery的图表绘制插件Jqplot，并通过一个具体示例展示了如何使用该插件来实现水平条形图的绘制。代码中详细介绍了所需的库文件加载方式及JavaScript函数编写技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<%@ 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>