概述
本示例用来展示dorado与JfreeChart的结合,用来展示JfreeChart的综合图表。除JFreeChart,本示例还采用了Cewolf,可以看知识点部分。本示例链接如下:
准备工作
步骤1:新建一工程combine,并且配置好数据库,具体步骤参考3.1.2节。
步骤2:下载cewolf。下载链接如下:
步骤3:解压下载的cewolf-1.0-bin-src.zip,拷贝cewolf/lib文件夹下面的如下文件到您web工程的web-inf/lib目录下面:jfreechart-.jar、jcommon-.jar、commons-logging.jar、cewolf.jar、batik-xml.jar、batik-util.jar、batik-svggen.jar、batik-dom.jar、batik-awt-util.jar。
如果需要在基于mozilla的浏览器下面使用image maps的功能的话,必须拷贝/etc/overlib.js到web根目录下面。
另外,拷贝/etc/cewolf.tld拷贝到工程的web-inf里面。
步骤4:在web-inf的web.xml文件下面添加如下代码:
<servlet> <servlet-name>CewolfServlet</servlet-name> <servlet-class>de.laures.cewolf.CewolfRenderer</servlet-class> <!-- sets storage implementation --> <init-param> <param-name>storage</param-name> <param-value>de.laures.cewolf.storage.TransientSessionStorage</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>CewolfServlet</servlet-name> <url-pattern>/cewolf/*</url-pattern> </servlet-mapping>
开发步骤
添加Dataset
步骤1:新建一文件夹,文件夹名为combine。在combine中添加一Common ViewModel,文件名为CombineView。
步骤2:添加一AutoSqlDataset,选择Employee表格,选择所有字段。AutoSqlDataset属性设置如下:
属性 | 值 |
---|---|
id | dataset1 |
originTable | Employee |
pageSize | 8 |
readOnly | true |
添加DataTable和PagePolit
步骤1:添加一DataTable,属性设置如下:
属性 | 值 |
---|---|
dataset | dataset1 |
height | 100% |
id | table1 |
width | 100% |
选择table1,点击字段生成按钮。
步骤2:添加一PagePolit,属性设置如下:
属性 | 值 |
---|---|
dataset | dataset1 |
id | pagepilot1 |
步骤3:添加一ListDropDown,属性设置如下:
属性 | 值 |
---|---|
id | dropdownSex |
mapValue | true |
autoDropDown | true |
步骤4:为dropdownSex添加2个DropDownItem,第一个字段name为"男",value为"true",第二个字段name为"女",value为"false"。
步骤5:设置dataset1的字段sex的DropDown为dropdownSex。
添加DataProducer和显示图表的Jsp
步骤1:添加一Simple Class,类名为PieProducer,代码如下:
import java.util.ArrayList; import java.util.Date; import java.util.List; import java.util.Map; import org.jfree.data.general.DefaultPieDataset; import com.bstek.dorado.common.DoradoContext; import com.bstek.dorado.data.PagingHelper; import com.bstek.dorado.data.db.DBStatement; import com.bstek.dorado.utils.variant.VariantSet; import de.laures.cewolf.DatasetProduceException; import de.laures.cewolf.DatasetProducer; import de.laures.cewolf.links.PieSectionLinkGenerator; public class PieProducer implements DatasetProducer, PieSectionLinkGenerator { public String getProducerId() { return null; } public boolean hasExpired(Map params, Date since) { return true; } public Object produceDataset(Map params) throws DatasetProduceException { DefaultPieDataset pie = new DefaultPieDataset(); DoradoContext context = DoradoContext.getContext(); String pageIndex = context.getParameter("pageIndex"); String pageSize = context.getParameter("pageSize"); if (pageIndex != null && pageSize != null) { DBStatement stmt = new DBStatement(); stmt.setDataSource("demo"); List result = new ArrayList(); List degreeResult = new ArrayList(); String sql = "select count(star) as c from employee"; stmt.setSql(sql); PagingHelper page = new PagingHelper(); try { VariantSet vs = stmt.query(); int recordCount = vs.getInt("c"); page.setPageIndex(Integer.parseInt(pageIndex)); page.setPageSize(Integer.parseInt(pageSize)); page.setTotalRow(recordCount); sql = "select * from employee"; stmt.setSql(sql); List list = stmt.queryForList(); for (int i = page.getFromIndex(); i < page.getFromIndex() + page.getPageSize(); i++) { if (i > list.size() - 1) { break; } VariantSet variantSet = (VariantSet) list.get(info); String degree = variantSet.getString("degree"); if (!degreeResult.contains(degree)) { degreeResult.add(degree); } result.add(variantSet); } } catch (Exception e) { e.printStackTrace(); throw new IllegalArgumentException("数据处理异常."); } finally { stmt.close(); } for (int i = 0; i < degreeResult.size(); i++) { String degree = (String) degreeResult.get(info); int count = 0; for (int j = 0; j < result.size(); j++) { VariantSet vs = (VariantSet) result.get(j); String d = (String) vs.getString("degree"); if (d.equals(degree)) { count++; } pie.setValue(degree + "学历员工数", count); } } } return pie; } public String generateLink(Object dataset, Object category) { DefaultPieDataset pie = (DefaultPieDataset) dataset; String value = pie.getValue(category.toString()).toString(); StringBuffer sb = new StringBuffer(); sb.append("javascript:alert('"); sb.append("" + category + "=" + value + ""); sb.append("');"); return sb.toString(); } }
步骤2:添加一Simple Class,类名为TimeSeriesProducer,代码如下:
import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import java.util.List; import java.util.Map; import org.jfree.data.time.Day; import org.jfree.data.time.TimeSeries; import org.jfree.data.time.TimeSeriesCollection; import org.jfree.data.time.TimeSeriesDataItem; import com.bstek.dorado.common.DoradoContext; import com.bstek.dorado.data.PagingHelper; import com.bstek.dorado.data.db.DBStatement; import com.bstek.dorado.utils.variant.VariantSet; import de.laures.cewolf.DatasetProduceException; import de.laures.cewolf.DatasetProducer; import de.laures.cewolf.links.XYItemLinkGenerator; public class TimeSeriesProducer implements DatasetProducer, XYItemLinkGenerator { public String getProducerId() { return null; } public boolean hasExpired(Map params, Date since) { return true; } public Object produceDataset(Map params) throws DatasetProduceException { TimeSeries manTime = new TimeSeries("男士工资走势曲线", Day.class); TimeSeries womanTime = new TimeSeries("女士工资走势曲线", Day.class); DoradoContext context = DoradoContext.getContext(); String pageIndex = context.getParameter("pageIndex"); String pageSize = context.getParameter("pageSize"); if (pageIndex != null && pageSize != null) { DBStatement stmt = new DBStatement(); stmt.setDataSource("demo"); List result = new ArrayList(); String sql = "select count(star) as c from employee"; stmt.setSql(sql); PagingHelper page = new PagingHelper(); try { VariantSet vs = stmt.query(); int recordCount = vs.getInt("c"); page.setPageIndex(Integer.parseInt(pageIndex)); page.setPageSize(Integer.parseInt(pageSize)); page.setTotalRow(recordCount); sql = "select employee_id,employee_name,birthday,salary,sex from employee"; stmt.setSql(sql); List list = stmt.queryForList(); for (int i = page.getFromIndex(); i < page.getFromIndex() + page.getPageSize(); i++) { if (i > list.size() - 1) { break; } VariantSet variantSet = (VariantSet) list.get(info); result.add(variantSet); } } catch (Exception e) { e.printStackTrace(); throw new IllegalArgumentException("数据处理异常."); } finally { stmt.close(); } SimpleDateFormat sd = new SimpleDateFormat("yyyy-MM-dd"); for (int i = 0; i < result.size(); i++) { VariantSet vSet = (VariantSet) result.get(info); boolean sex = vSet.getBoolean("sex"); double salary = vSet.getDouble("salary"); String birthday = vSet.getString("birthday"); try { Date date = sd.parse(birthday); if (sex) { manTime.add( new Day(this.getDatePartByFormat("dd", date), this.getDatePartByFormat("MM", date), this.getDatePartByFormat("yyyy", date)), salary); } else { womanTime .add(new Day(this.getDatePartByFormat("dd", date), this.getDatePartByFormat("MM", date), this.getDatePartByFormat("yyyy", date)), salary); } } catch (ParseException e) { e.printStackTrace(); throw new IllegalArgumentException("数据处理异常."); } } } TimeSeriesCollection tc = new TimeSeriesCollection(); tc.addSeries(womanTime); tc.addSeries(manTime); return tc; } private int getDatePartByFormat(String pattern, Date d) { SimpleDateFormat sd = new SimpleDateFormat(pattern); return Integer.parseInt(sd.format(d)); } public String generateLink(Object data, int series, int item) { TimeSeriesCollection timeseries = (TimeSeriesCollection) data; TimeSeries ser = timeseries.getSeries(series); StringBuffer sb = new StringBuffer(); TimeSeriesDataItem it = ser.getDataItem(item); double tmp = ((Double) it.getValue()).doubleValue(); sb.append("javascript:"); sb.append("var record = parent.dataset1.getFirstRecord();"); sb.append("while (record) {"); sb.append("var a=record.getValue('salary');"); sb.append("if(a=='" + tmp + "'){"); sb.append("parent.dataset1.setCurrent(record);"); sb.append("break;"); sb.append("}"); sb.append("record = record.getNextRecord();"); sb.append("}"); sb.append("alert('" + tmp + "');"); return sb.toString(); } }
步骤3:添加一Jsp页面,文件名为combine-chart.jsp,代码如下:
<%@page contentType="text/html; charset=UTF-8"%> <%@taglib uri='/WEB-INF/cewolf.tld' prefix='cewolf'%> <html> <body style="margin: 0"> <jsp:useBean id="pieProducer" class="combine.PieProducer"/> <jsp:useBean id="timeSeriesProducer" class="combine.TimeSeriesProducer"/> <cewolf:chart id="pieTest" type="pie" title="根据员工学历分类图"> <cewolf:data> <cewolf:producer id="pieProducer"/> </cewolf:data> </cewolf:chart> <cewolf:overlaidchart id="combineChart" title="员工生日与工资" type="overlaidxy" xaxistype="date" yaxistype="number" xaxislabel="员工工资" yaxislabel="员工生日"> <cewolf:plot type="xyline"> <cewolf:data> <cewolf:producer id="timeSeriesProducer"/> </cewolf:data> </cewolf:plot> <cewolf:plot type="xyverticalbar"> <cewolf:data> <cewolf:producer id="timeSeriesProducer"/> </cewolf:data> </cewolf:plot> <cewolf:plot type="xyline"> <cewolf:data> <cewolf:producer id="timeSeriesProducer"/> </cewolf:data> </cewolf:plot> <cewolf:plot type="scatter"> <cewolf:data> <cewolf:producer id="timeSeriesProducer"/> </cewolf:data> </cewolf:plot> </cewolf:overlaidchart> <table> <tr> <td> <cewolf:img chartid="pieTest" renderer="/cewolf" width="350" height="350"> <cewolf:map linkgeneratorid="pieProducer"/> </cewolf:img> </td> <td> <cewolf:img chartid="combineChart" renderer="/cewolf" width="630" height="350"> <cewolf:map linkgeneratorid="timeSeriesProducer"/> </cewolf:img> </td> </tr> </table> </body> </html>
步骤4:为viewmodel的onLoad事件写入如下代码:
var pageIndex=dataset1.getPageIndex(); var pageSize=dataset1.getPageSize(); var url="combine-chart.jsp?pageIndex="pageIndex"&pageSize="pageSize""; window.open(url,"charFrame");
步骤5:为dataset1的afterFlushData事件写入如下代码:
var pageIndex=dataset1.getPageIndex(); var pageSize=dataset1.getPageSize(); var url="combine-chart.jsp?pageIndex="pageIndex"&pageSize="pageSize""; window.open(url,"charFrame");
创建Jsp页面
为CombineView生成Jsp页面,并且编辑其内容,最后结果如下:
<%@ page contentType="text/html; charset=UTF-8" %> <%@ taglib uri="http://www.bstek.com/dorado" prefix="d" %> <html> <body style="margin: 0; overflow: hidden"> <d:View config="combine.CombineView"> <d:SplitPanel id="splitpanel2" orientation="vertical" position="230" width="100%" height="100%" showButtons="true"> <d:Layout type="border"> <d:Pane position="center"> <d:DataTable id="table1" /> </d:Pane> <d:Pane position="bottom"> <d:PagePilot id="pagepilot1" /> </d:Pane> </d:Layout> <d:Splitter /> <iframe name="charFrame" src="" width="100%" height="100%" marginheight="0" marginwidth="0" frameborder="0"></iframe> </d:SplitPanel> </d:View> </body> </html>
查看显示效果
启动浏览器后,浏览combine-view.jsp,效果如下:
上方的DataTable翻页以后,可以看到页面下方的图表进行变化。
知识点
本节知识点主要在于JFreeChart与Cewolf的相关知识。关于JFreeChart,可以查看如下链接:
关于Cewolf,可以查看如下链接:
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Map;
import org.jfree.data.general.DefaultPieDataset;
import com.bstek.dorado.common.DoradoContext;
import com.bstek.dorado.data.PagingHelper;
import com.bstek.dorado.data.db.DBStatement;
import com.bstek.dorado.utils.variant.VariantSet;
import de.laures.cewolf.DatasetProduceException;
import de.laures.cewolf.DatasetProducer;
import de.laures.cewolf.links.PieSectionLinkGenerator;
public class PieProducer implements DatasetProducer, PieSectionLinkGenerator {
public String getProducerId() {
return null;
}
public boolean hasExpired(Map params, Date since) {
return true;
}
public Object produceDataset(Map params) throws DatasetProduceException {
DefaultPieDataset pie = new DefaultPieDataset();
DoradoContext context = DoradoContext.getContext();
String pageIndex = context.getParameter("pageIndex");
String pageSize = context.getParameter("pageSize");
if (pageIndex != null && pageSize != null) {
DBStatement stmt = new DBStatement();
stmt.setDataSource("doradosample");
List result = new ArrayList();
List degreeResult = new ArrayList();
String sql = "select count(*) as c from employee";
stmt.setSql(sql);
PagingHelper page = new PagingHelper();
try {
VariantSet vs = stmt.query();
int recordCount = vs.getInt("c");
page.setPageIndex(Integer.parseInt(pageIndex));
page.setPageSize(Integer.parseInt(pageSize));
page.setTotalRow(recordCount);
sql = "select * from employee";
stmt.setSql(sql);
List list = stmt.queryForList();
for (int i = page.getFromIndex(); i < page.getFromIndex()
+ page.getPageSize(); i++) {
if (i > list.size() - 1) {
break;
}
VariantSet variantSet = (VariantSet) list.get(i);
String degree = variantSet.getString("degree");
if (!degreeResult.contains(degree)) {
degreeResult.add(degree);
}
result.add(variantSet);
}
} catch (Exception e) {
e.printStackTrace();
throw new IllegalArgumentException("数据处理异常.");
} finally {
stmt.close();
}
for (int i = 0; i < degreeResult.size(); i++) {
String degree = (String) degreeResult.get(i);
int count = 0;
for (int j = 0; j < result.size(); j++) {
VariantSet vs = (VariantSet) result.get(j);
String d = (String) vs.getString("degree");
if (d.equals(degree)) {
count++;
}
pie.setValue(degree + "学历员工数", count);
}
}
}
return pie;
}
public String generateLink(Object dataset, Object category) {
DefaultPieDataset pie = (DefaultPieDataset) dataset;
String value = pie.getValue(category.toString()).toString();
StringBuffer sb = new StringBuffer();
sb.append("javascript:alert('");
sb.append("" + category + "=" + value + "");
sb.append("');");
return sb.toString();
}
}