用Jqplot做的一个简易柱状图
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 barsbarMargin : 15,//the width of each barbarWidth : 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 displayvar arrayKey = new Array();//the values compared to the scale on x axis to displayvar arrayValue = new Array();$.each(json, function(key, value) {arrayKey[index] = key;arrayValue[index] = [ value, index + 1 ];index++;});//the width of the div #chartvar chartWidth = 500;//the height of the div #chart,37 is calculated by barMargin+barWidthvar 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>