首页 > 程序开发 > 软件开发 > Java >

javaEE SSH框架使用ChartDirector绘图

2016-05-10

最近做毕设想要在web端显示图表,网上有很多图表的插件,JFreeChart也不错,不过我选择的是ChartDirector。 一、需求:分页显示学生访问对应课程次数的柱状图,(之前我爬取了网站上的一些课程

最近做毕设想要在web端显示图表,网上有很多图表的插件,JFreeChart也不错,不过我选择的是ChartDirector。

一、需求:分页显示学生访问对应课程次数的柱状图,(之前我爬取了网站上的一些课程,并记录了用户访问的记录)

二、实现:

(1)ChartDirector自带一个jsp文件,复制到项目中,还有将ChartDirector.jar包引入项目中

\

(2)要显示图表的jsp界面,其中chart1URL和imageMap1是Action层处理好传递过来的数据,分页的代码可以忽略掉,其实真实的界面代码也就几行。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>   
  	<%@include file="/WEB-INF/jsp/public/list.jspf" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>我的历史浏览记录</title>
  </head>
  
  <body>
  	<div align="center">
	<hr color="#000080">
	<img src=&#39;${pageContext.request.contextPath}/charts/getchart.jsp?${chart1URL}&#39; usemap="#map1" border="0">
	<map name="map1">${imageMap1}</map>
	</div>
	<s:form name="student_visitRecord" method="post" >
	</s:form>
<!-- 分页 -->
	<div class="pageView" style="font-size:20px;">
页次:${currentPage}/${pageCount}  每页:${pageSize}条 
总记录条数:${recordCount} 
<a href="javascript: gotoPage(1)" title="首页" style="cursor: hand;">首页</a>
<s:iterator begin="%{beginPageIndex}" end="%{endPageIndex}" var="num">
	<s:if test="#num == currentPage">
		<%-- 当前页 --%>
		<span class="PageSelectorSelected">${num}</span>
	</s:if>
	<s:else>
		<%-- 非当前页 --%>
		<span class="PageSelectorNum" onClick="gotoPage(${num});">${num}</span>
	</s:else>
</s:iterator>
<a href="javascript: gotoPage(${pageCount})" title="尾页"
	style="cursor: hand;">尾页</a>



转到:

<select onchange="gotoPage(this.value)" id="_pn">
	<s:iterator begin="1" end="%{pageCount}" var="num">
		<option value="${num}">${num}</option>
	</s:iterator>
</select>
<script type="text/javascript">
	$("#_pn").val("${currentPage}");
</script>

<script type="text/javascript">
	function gotoPage( pageNum ){
		// window.location.href = "forum_show.action?id=${id}&pageNum=" + pageNum;
		
		$(document.forms[0]).append("<input type=&#39;hidden&#39; name=&#39;pageNum&#39; value=&#39;" + pageNum +"&#39;>");
		document.forms[0].submit();
	}
</script>
</div>
  </body>
</html>

(3)Action层,一些注释已经标注上,乱码的问题设置默认文字c.setDefaultFonts("simsun.ttc"),分页查询的方法就不多说了,将得到chart1URL和imageMap1字符串返回给jsp界面

/** 浏览记录 */
	public String visitRecord() throws Exception{
		int i,recordCount=0;
		//取出学生
		Student stuFind=getCurrentUser().getStudent();
		//取出访问的课程
		String hql="FROM VisitCourseRecord WHERE student=?";
		List parameters=new ArrayList();
		parameters.add(stuFind);
		int s=parameters.size();
		PageBean pageBean=visitCourseRecordService.getPageBean(pageNum, 15, hql, parameters);
		
		List courseList=pageBean.getRecordList();
		ActionContext.getContext().getValueStack().push(pageBean);
		
		//记录条数
		recordCount=courseList.size();
		//数据--显示访问记录数
		double[] count=new double[courseList.size()];
		for(i=0;i<recordcount;i++){ count[i]="courseList.get(i).getCount();" }="" 数据--要显示的标题="" string[]="" labels="new" string[courselist.size()];="" for(i="0;i<recordCount;i++){" labels[i]="courseList.get(i).getSpiderCourse().getName();" 创建1000*800的chart="" xychart="" c="new" xychart(1000,="" 800);="" c.setdefaultfonts("simsun.ttc");="" 添加图形的标题="" ----="" 18pt="" 宋体="" c.addtitle("访问课程记录",="" "宋体",="" 18);="" set="" the="" plotarea="" at="" (60,="" 40)="" and="" of="" size="" 500="" x="" 280="" pixels.="" use="" a="" vertical="" gradient="" color="" from="" light="" blue="" (eeeeff)="" to="" deep="" (0000cc)="" as="" background.="" border="" grid="" lines="" white="" (ffffff).="" c.setplotarea(100,="" 40,="" 800,="" 300,="" c.lineargradientcolor(100,="" 60,="" 280,="" 0xeeeeff,="" 0x0000cc),="" -1,="" 0xffffff,="" 0xffffff);="" add="" multi-color="" bar="" chart="" layer="" using="" supplied="" data.="" soft="" lighting="" effect="" with="" direction="" left.="" c.addbarlayer3(count).setbordercolor(chart.transparent,="" chart.softlighting(chart.left));="" 设置文字="" c.xaxis().setlabels(labels);="" 设置文字以及方向65度="" c.xaxis().setlabelstyle("宋体",="" 10).setfontangle(65);="" draw="" ticks="" between="" label="" positions="" (instead="" positions)="" c.xaxis().settickoffset(0.5);="" title="" y="" axis="" 10pt="" arial="" bold="" font="" c.yaxis().settitle("访问次数","宋体",12);="" line="" width="" 2="" pixels="" c.xaxis().setwidth(2);="" c.yaxis().setwidth(2);="" output="" string="" chart1url="c.makeSession(ServletActionContext.getRequest()," "chart1");="" include="" tool="" tip="" for="" imagemap1="c.getHTMLImageMap(""," "",="" "title="&#39;{xLabel}:" us$="" {value}m&#39;");="" actioncontext.getcontext().put("chart1url",="" chart1url);="" actioncontext.getcontext().put("imagemap1",="" imagemap1);="" return="" "visitrecord";="" }

(4)其他就是SSH框架的东西,这里就不说了

三、测试:

\

分页信息:

\

下面黄色的标识是ChartDirector本身带的,网上有破解的方法,版本的原因,这里不再给出。

四、总结

刚开始ChartDirector给的jsp显示图表的Demo都是写在jsp界面的java代码,一些准备数据的代码,就可以移到Action或其他处理的代码中,只需要提供img的src的url和map的值即可。还有中文乱码问题,也是在网上搜到一些解决方法,关于其中的设置还要不断使用熟悉。

相关文章
最新文章
热点推荐