最近做畢設想要在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='${pageContext.request.contextPath}/charts/getchart.jsp?${chart1URL}' 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 οnchange="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='hidden' name='pageNum' value='" + pageNum +"'>");
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<Object> parameters=new ArrayList<Object>();
parameters.add(stuFind);
int s=parameters.size();
PageBean pageBean=visitCourseRecordService.getPageBean(pageNum, 15, hql, parameters);
List<VisitCourseRecord> 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 blue (0000cc) as background. Set border and grid lines to white
// (ffffff).
c.setPlotArea(100, 40, 800, 300, c.linearGradientColor(100, 40, 60, 280, 0xeeeeff, 0x0000cc), -1,
0xffffff, 0xffffff);
// Add a multi-color bar chart layer using the supplied data. Use soft lighting effect with light
// direction from left.
c.addBarLayer3(count).setBorderColor(Chart.Transparent, Chart.softLighting(Chart.Left));
// 設置文字
c.xAxis().setLabels(labels);
//設置文字以及方向65度
c.xAxis().setLabelStyle("宋體", 10).setFontAngle(65);
// Draw the ticks between label positions (instead of at label positions)
c.xAxis().setTickOffset(0.5);
// Add a title to the y axis with 10pt Arial Bold font
c.yAxis().setTitle("訪問次數","宋體",12);
// Set axis line width to 2 pixels
c.xAxis().setWidth(2);
c.yAxis().setWidth(2);
// Output the chart
String chart1URL = c.makeSession(ServletActionContext.getRequest(), "chart1");
// Include tool tip for the chart
String imageMap1 = c.getHTMLImageMap("", "", "title='{xLabel}: US$ {value}M'");
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的值即可。還有中文亂碼問題，也是在網上搜到一些解決方法，關於其中的設置還要不斷使用熟悉。