用cewolf+jFreeChart 开发WEB 图形报表
在使用cewolf 之前，首先来熟悉一下jFreeChart 。这里分三部分来介绍 jFreeChart 。第一部分介绍jFreeChart产生
图形的流程及相关的重要的类；第二部分介绍四种常用的报表图（饼图、柱状图、折线图、时间序列图）；第三部分
介绍在图形中增加Item Lable 。
jFreeChart 的版本是jfreechart-1.0.0-pre2(1)
cewolf 的最新版本是cewolf-0.12.0
一、jFreeChart产生图形的流程
1. 创建一个数据源（dataset）来包含将要在图形中显示的数据?
2. 创建一个 JFreeChart 对象来代表要显示的图形
3. 把图形输出
重要的类和接口：
org.jfree.data.general.Dataset 所有数据源类都要实现的接口
org.jfree.chart.ChartFactory 由它来产生 JFreeChart 对象
org.jfree.chart.JFreeChart 所有对图形的调整都是通过它噢！！
org.jfree.chart.plot.Plot 通过JFreeChart 对象获得它，然后再通过它对图形外部部分（例：坐标轴）调整
注意：它有很多子类，一般都下嗍造型到它的子类！
org.jfree.chart.renderer.AbstractRenderer 通过JFreeChart 对象获得它，然后再通过它对图形内部部分
（例：折线的类型）调整。同样，针对不同类型的报表图，它有
着不同的子类实现！在下面我们简称它为 Renderer
下面我们结合不同类型的图形来具体分析这个流程。
二、饼图
饼图的dataset 一般是用PieDataset 接口，具体实现类是 DefaultPieDataset
1、创建一个数据源（dataset）：
private static PieDataset createDataset() { DefaultPieDataset defaultpiedataset = new DefaultPieDataset(); //注意是DefaultPieDataset！！ defaultpiedataset.setValue("One", new Double(43.200000000000003D)); defaultpiedataset.setValue("Two", new Double(10D)); defaultpiedataset.setValue("Three", new Double(27.5D)); defaultpiedataset.setValue("Four", new Double(17.5D)); return defaultpiedataset; } 2、由ChartFactory 产生 JFreeChart 对象 private static JFreeChart createChart(PieDataset piedataset) { JFreeChart jfreechart = ChartFactory.createPieChart("Pie Chart Demo 1", //图形标题名称 piedataset, // dataset true, // legend? true, // tooltips? false); //URLs? PiePlot pieplot = (PiePlot)jfreechart.getPlot(); //通过JFreeChart 对象获得 plot：PiePlot！！ pieplot.setNoDataMessage("No data available"); // 没有数据的时候显示的内容 return jfreechart; } pieplot.setExplodePercent(0,0.3D) //把Lable 为"One" 的那一块”挖“出来30%
createDataset() { String series1 = "First"; String series2 = "Second"; String series3 = "Third"; String category1 = "Category 1"; String category2 = "Category 2"; String category3 = "Category 3"; String category4 = "Category 4"; String category5 = "Category 5"; DefaultCategoryDataset defaultcategorydataset = new DefaultCategoryDataset(); defaultcategorydataset.addValue(1.0D, series1, category1); defaultcategorydataset.addValue(4D, series1, category2); defaultcategorydataset.addValue(3D, series1, category3); defaultcategorydataset.addValue(5D, series1, category4); defaultcategorydataset.addValue(5D, series1, category5); defaultcategorydataset.addValue(5D, series2, category1); defaultcategorydataset.addValue(7D, series2, category2); defaultcategorydataset.addValue(6D, series2, category3); defaultcategorydataset.addValue(8D, series2, category4); defaultcategorydataset.addValue(4D, series2, category5); defaultcategorydataset.addValue(4D, series3, category1); defaultcategorydataset.addValue(3D, series3, category2); defaultcategorydataset.addValue(2D, series3, category3); defaultcategorydataset.addValue(3D, series3, category4); defaultcategorydataset.addValue(6D, series3, category5); return defaultcategorydataset; } 2、由ChartFactory 产生 JFreeChart 对象 private static JFreeChart createChart(CategoryDataset categorydataset) { JFreeChart jfreechart = ChartFactory.createBarChart("Bar Chart Demo", //图形标题名称 "Category",//domain 轴 Lable 这里先简单理解为横坐标Lable好了 "Value", //range 轴 Lable 这里也先简单理解为纵坐标Lable好了 categorydataset, // dataset PlotOrientation.VERTICAL, //垂直显示 true, // legend? true, // tooltips? false); //URLs? jfreechart.setBackgroundPaint(Color.white); //设定背景色为白色 CategoryPlot categoryplot = jfreechart.getCategoryPlot(); //获得 plot：CategoryPlot！！ categoryplot.setBackgroundPaint(Color.lightGray); //设定图表数据显示部分背景色 categoryplot.setDomainGridlinePaint(Color.white); //横坐标网格线白色 categoryplot.setDomainGridlinesVisible(true); //可见 categoryplot.setRangeGridlinePaint(Color.white); //纵坐标网格线白色 //下面两行使纵坐标的最小单位格为整数 NumberAxis numberaxis = (NumberAxis)categoryplot.getRangeAxis(); numberaxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits()); BarRenderer barrenderer = (BarRenderer)categoryplot.getRenderer(); //获得renderer 注意这里是下嗍造型 到BarRenderer！！ barrenderer.setDrawBarOutline(false); // Bar的外轮廓线不画 GradientPaint gradientpaint = new GradientPaint(0.0F, 0.0F, Color.blue, 0.0F, 0.0F, new Color(0, 0, 64)); //设定特定颜色 GradientPaint gradientpaint1 = new GradientPaint(0.0F, 0.0F, Color.green, 0.0F, 0.0F, new Color(0, 64, 0)); GradientPaint gradientpaint2 = new GradientPaint(0.0F, 0.0F, Color.red, 0.0F, 0.0F, new Color(64, 0, 0)); barrenderer.setSeriesPaint(0, gradientpaint); //给series1 Bar设定上面定义的颜色 barrenderer.setSeriesPaint(1, gradientpaint1); //给series2 Bar 设定上面定义的颜色 barrenderer.setSeriesPaint(2, gradientpaint2); //给series3 Bar 设定上面定义的颜色 CategoryAxis categoryaxis = categoryplot.getDomainAxis(); //横轴上的 Lable 45度倾斜 categoryaxis.setCategoryLabelPositions(CategoryLabelPositions.UP_45); return jfreechart; } 一些重要的方法：（增加一块标记） IntervalMarker intervalmarker = new IntervalMarker(4.5D, 7.5D); intervalmarker.setLabel("Target Range"); intervalmarker.setLabelFont(new Font("SansSerif", 2, 11)); intervalmarker.setLabelAnchor(RectangleAnchor.LEFT); intervalmarker.setLabelTextAnchor(TextAnchor.CENTER_LEFT); intervalmarker.setPaint(new Color(222, 222, 255, 128)); categoryplot.addRangeMarker(intervalmarker, Layer.BACKGROUND); 四、折线图 private static CategoryDataset createDataset() { String series1 = "First"; String series2 = "Second"; String series3 = "Third"; String type1 = "Type 1"; String type2 = "Type 2"; String type3 = "Type 3"; String type4 = "Type 4"; String type5 = "Type 5"; String type6 = "Type 6"; String type7 = "Type 7"; String type8 = "Type 8"; DefaultCategoryDataset defaultcategorydataset = new DefaultCategoryDataset(); defaultcategorydataset.addValue(1.0D, series1, type1); defaultcategorydataset.addValue(4D, series1, type2); defaultcategorydataset.addValue(3D, series1, type3); defaultcategorydataset.addValue(5D, series1, type4); defaultcategorydataset.addValue(5D, series1, type5); defaultcategorydataset.addValue(7D, series1, type6); defaultcategorydataset.addValue(7D, series1, type7); defaultcategorydataset.addValue(8D, series1, type8); defaultcategorydataset.addValue(5D, series2, type1); defaultcategorydataset.addValue(7D, series2, type2); defaultcategorydataset.addValue(6D, series2, type3); defaultcategorydataset.addValue(8D, series2, type4); defaultcategorydataset.addValue(4D, series2, type5); defaultcategorydataset.addValue(4D, series2, type6); defaultcategorydataset.addValue(2D, series2, type7); defaultcategorydataset.addValue(1.0D, series2, type8); defaultcategorydataset.addValue(4D, series3, type1); defaultcategorydataset.addValue(3D, series3, type2); defaultcategorydataset.addValue(2D, series3, type3); defaultcategorydataset.addValue(3D, series3, type4); defaultcategorydataset.addValue(6D, series3, type5); defaultcategorydataset.addValue(3D, series3, type6); defaultcategorydataset.addValue(4D, series3, type7); defaultcategorydataset.addValue(3D, series3, type8); return defaultcategorydataset; } B、由ChartFactory 产生 JFreeChart 对象 (与上面重复的部分就不再注释） private static JFreeChart createChart(CategoryDataset categorydataset) { JFreeChart jfreechart = ChartFactory.createLineChart("Line Chart Demo 1", "Type", "Value", categorydataset, PlotOrientation.VERTICAL, true, true, false); jfreechart.setBackgroundPaint(Color.white); CategoryPlot categoryplot = (CategoryPlot)jfreechart.getPlot(); categoryplot.setBackgroundPaint(Color.lightGray); categoryplot.setRangeGridlinePaint(Color.white); NumberAxis numberaxis = (NumberAxis)categoryplot.getRangeAxis(); numberaxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits()); numberaxis.setAutoRangeIncludesZero(true); //获得renderer 注意这里是下嗍造型到lineandshaperenderer！！ LineAndShapeRenderer lineandshaperenderer = (LineAndShapeRenderer)categoryplot.getRenderer(); lineandshaperenderer.setShapesVisible(true); //series 点（即数据点）可见 lineandshaperenderer.setSeriesStroke(0, new BasicStroke(2.0F, 1, 1, 1.0F, new float[] { 10F, 6F }, 0.0F)); //定义series为"First"的（即series1）点之间的连线 ，这里是虚线，默认是直线 lineandshaperenderer.setSeriesStroke(1, new BasicStroke(2.0F, 1, 1, 1.0F, new float[] { 6F, 6F }, 0.0F)); //定义series为"Second"的（即series2）点之间的连线 lineandshaperenderer.setSeriesStroke(2, new BasicStroke(2.0F, 1, 1, 1.0F, new float[] { 2.0F, 6F }, 0.0F)); //定义series为"Third"的（即series3）点之间的连线 return jfreechart; } 一些重要的方法： private static XYDataset createDataset() { XYSeries xyseries = new XYSeries("First"); //先产生XYSeries 对象 xyseries.add(1.0D, 1.0D); xyseries.add(2D, 4D); xyseries.add(3D, 3D); xyseries.add(4D, 5D); xyseries.add(5D, 5D); xyseries.add(6D, 7D); xyseries.add(7D, 7D); xyseries.add(8D, 8D); XYSeries xyseries1 = new XYSeries("Second"); xyseries1.add(1.0D, 5D); xyseries1.add(2D, 7D); xyseries1.add(3D, 6D); xyseries1.add(4D, 8D); xyseries1.add(5D, 4D); xyseries1.add(6D, 4D); xyseries1.add(7D, 2D); xyseries1.add(8D, 1.0D); XYSeries xyseries2 = new XYSeries("Third"); xyseries2.add(3D, 4D); xyseries2.add(4D, 3D); xyseries2.add(5D, 2D); xyseries2.add(6D, 3D); xyseries2.add(7D, 6D); xyseries2.add(8D, 3D); xyseries2.add(9D, 4D); xyseries2.add(10D, 3D); XYSeriesCollection xyseriescollection = new XYSeriesCollection(); //再用XYSeriesCollection添加入XYSeries 对象 xyseriescollection.addSeries(xyseries); xyseriescollection.addSeries(xyseries1); xyseriescollection.addSeries(xyseries2); return xyseriescollection; } B、由ChartFactory 产生 JFreeChart 对象 private static JFreeChart createChart(XYDataset xydataset) { JFreeChart jfreechart = ChartFactory.createXYLineChart("Line Chart Demo 2", "X", "Y", xydataset, PlotOrientation.VERTICAL, true, true, false); jfreechart.setBackgroundPaint(Color.white); XYPlot xyplot = (XYPlot)jfreechart.getPlot(); //获得 plot：XYPlot！！ xyplot.setBackgroundPaint(Color.lightGray); //设定图表数据显示部分背景色 xyplot.setAxisOffset(new RectangleInsets(5D, 5D, 5D, 5D)); //设定坐标轴与图表数据显示部分距离 xyplot.setDomainGridlinePaint(Color.white); //网格线颜色 xyplot.setRangeGridlinePaint(Color.white); //获得 renderer 注意这里是XYLineAndShapeRenderer ！！ XYLineAndShapeRenderer xylineandshaperenderer = (XYLineAndShapeRenderer)xyplot.getRenderer(); xylineandshaperenderer.setShapesVisible(true); //数据点可见 xylineandshaperenderer.setShapesFilled(true); //数据点被填充即不是空心点 NumberAxis numberaxis = (NumberAxis)xyplot.getRangeAxis(); numberaxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits()); return jfreechart; } XYLineAndShapeRenderer xylineandshaperenderer = new XYLineAndShapeRenderer(); xylineandshaperenderer.setSeriesLinesVisible(0, false); //第一个XYSeries数据点间连线不可见 xylineandshaperenderer.setSeriesShapesVisible(1, false); //第二个XYSeries数据点不可见 xyplot.setRenderer(xylineandshaperenderer);
private static XYDataset createDataset() { TimeSeries timeseries = new TimeSeries("L&G European Index Trust",Month.class); timeseries.add(new Month(2, 2001), 181.8D);//这里用的是Month.class，同样还有Day.class Year.class 等等 timeseries.add(new Month(3, 2001), 167.3D); timeseries.add(new Month(4, 2001), 153.8D); timeseries.add(new Month(5, 2001), 167.6D); timeseries.add(new Month(6, 2001), 158.8D); timeseries.add(new Month(7, 2001), 148.3D); timeseries.add(new Month(8, 2001), 153.9D); timeseries.add(new Month(9, 2001), 142.7D); timeseries.add(new Month(10, 2001), 123.2D); timeseries.add(new Month(11, 2001), 131.8D); timeseries.add(new Month(12, 2001), 139.6D); timeseries.add(new Month(1, 2002), 142.9D); timeseries.add(new Month(2, 2002), 138.7D); timeseries.add(new Month(3, 2002), 137.3D); timeseries.add(new Month(4, 2002), 143.9D); timeseries.add(new Month(5, 2002), 139.8D); timeseries.add(new Month(6, 2002), 137D); timeseries.add(new Month(7, 2002), 132.8D); TimeSeries timeseries1 = new TimeSeries("L&G UK Index Trust",Month.class); timeseries1.add(new Month(2, 2001), 129.6D); timeseries1.add(new Month(3, 2001), 123.2D); timeseries1.add(new Month(4, 2001), 117.2D); timeseries1.add(new Month(5, 2001), 124.1D); timeseries1.add(new Month(6, 2001), 122.6D); timeseries1.add(new Month(7, 2001), 119.2D); timeseries1.add(new Month(8, 2001), 116.5D); timeseries1.add(new Month(9, 2001), 112.7D); timeseries1.add(new Month(10, 2001), 101.5D); timeseries1.add(new Month(11, 2001), 106.1D); timeseries1.add(new Month(12, 2001), 110.3D); timeseries1.add(new Month(1, 2002), 111.7D); timeseries1.add(new Month(2, 2002), 111D); timeseries1.add(new Month(3, 2002), 109.6D); timeseries1.add(new Month(4, 2002), 113.2D); timeseries1.add(new Month(5, 2002), 111.6D); timeseries1.add(new Month(6, 2002), 108.8D); timeseries1.add(new Month(7, 2002), 101.6D); TimeSeriesCollection timeseriescollection = new TimeSeriesCollection(); timeseriescollection.addSeries(timeseries); timeseriescollection.addSeries(timeseries1); timeseriescollection.setDomainIsPointsInTime(true); //domain轴上的刻度点代表的是时间点而不是时间段 return timeseriescollection; } private static JFreeChart createChart(XYDataset xydataset) { JFreeChart jfreechart = ChartFactory.createTimeSeriesChart("Legal & General Unit Trust Prices", "Date", "Price Per Unit", xydataset, true, true, false); jfreechart.setBackgroundPaint(Color.white); XYPlot xyplot = (XYPlot)jfreechart.getPlot(); //获得 plot : XYPlot!! xyplot.setBackgroundPaint(Color.lightGray); xyplot.setDomainGridlinePaint(Color.white); xyplot.setRangeGridlinePaint(Color.white); xyplot.setAxisOffset(new RectangleInsets(5D, 5D, 5D, 5D)); xyplot.setDomainCrosshairVisible(true); xyplot.setRangeCrosshairVisible(true); org.jfree.chart.renderer.xy.XYItemRenderer xyitemrenderer = xyplot.getRenderer(); if(xyitemrenderer instanceof XYLineAndShapeRenderer) { XYLineAndShapeRenderer xylineandshaperenderer = (XYLineAndShapeRenderer)xyitemrenderer; xylineandshaperenderer.setDefaultShapesVisible(true); //数据点可见 xylineandshaperenderer.setDefaultShapesFilled(true); //数据点是实心点 } DateAxis dateaxis = (DateAxis)xyplot.getDomainAxis(); //对domain 轴上日期显示格式定义 dateaxis.setDateFormatOverride(new SimpleDateFormat("MMM-yyyy")); return jfreechart;} 一些重要的方法：xyplot.addRangeMarker(new ValueMarker(550D)); //数值轴 Quarter quarter = new Quarter(2, 2002); xyplot.addDomainMarker(new ValueMarker(quarter.getMiddleMillisecond())); //时间轴B、数据点的调整
XYLineAndShapeRenderer xylineandshaperenderer = (XYLineAndShapeRenderer)xyplot.getRenderer(); xylineandshaperenderer.setDefaultShapesVisible(true); //数据点可见 xylineandshaperenderer.setSeriesFillPaint(0, Color.red); //数据点填充为红色 xylineandshaperenderer.setSeriesFillPaint(1, Color.white); //数据点填充为白色 xylineandshaperenderer.setUseFillPaint(true); //应用C、平均值曲线
TimeSeries timeseries1 = MovingAverage.createMovingAverage(timeseries, "30 day moving average",
TimeSeriesCollection timeseriescollection = new TimeSeriesCollection(); timeseriescollection.addSeries(timeseries); timeseriescollection.addSeries(timeseries1); return timeseriescollection;
dataset plot renderer 饼图 PieDataset（DefaultPieDataset） PiePlot ------ 柱状图 CatagoryDataset（DefaultCategoryDataset） CategoryPlot BarRenderer 折线图 CatagoryDataset（DefaultCategoryDataset） CategoryPlot LineAndShapeRenderer XYDataset（XYSeriesCollection） XYPlot XYLineAndShapeRenderer 时间序列图 XYDataset （TimeSeriesCollection） XYPlot XYLineAndShapeRenderer
BarRenderer barrenderer = (BarRenderer)categoryplot.getRenderer(); GategoryLableGenerator generator =new StandardGategoryLableGenerator( "{2}", new DecimalFormat("0.00") //调整显示的数字和字符格式 ); barrenderer.setLableGenerator(generator); 2、使 Item Lable 可见barrenderer.setItemLableVisible(true);3、调整 Item Lable 的颜色、字体等
barrenderer.setItemLablePaint(Color.red); barrenderer.setItemLableFont(new Font("SansSerif",Font.PLAIN,10));public ItemLabelPosition(ItemLabelAnchor itemLabelAnchor, org.jfree.ui.TextAnchor textAnchor, org.jfree.ui.TextAnchor rotationAnchor, double angle) itemLabelAnchor - Item Lable 的位置 （最重要的！！） textAnchor - Item Lable里包含的正文相对于Item Lable 的位置 rotationAnchor - Item Lable里包含的正文旋转的位置 angle - 旋转的角度 ItemLabelPosition itemlabelposition = new ItemLabelPosition(ItemLabelAnchor.INSIDE12, TextAnchor.CENTER_RIGHT, TextAnchor.CENTER_RIGHT, -1.57D); barrenderer.setPositiveItemLabelPosition(itemlabelposition);
DatasetProducer timeData = new DatasetProducer() { public Object produceDataset(Map params) { //cewolf 对其重新进行了包装 TimeSeries ts = new TimeSeries("Cewolf Release Schedule", Month.class);//怎么样？和上面一样吧 ts.add(new Month(7, 2002), 0.1); ts.add(new Month(8, 2002), 0.4); ts.add(new Month(9, 2002), 0.9); ts.add(new Month(10, 2002), 1.0); return new TimeSeriesCollection(ts); } public String getProducerId() { //返回唯一的ID return "TimeDataProducer"; } public boolean hasExpired(Map params, Date since) { //默认就好 return false; } }; pageContext.setAttribute("timeData", timeData); //产生完以后要把它放到页面中保存以给 cewolf标签调用 2、<cewolf:chart/>标签 <cewolf:chart id="timeChart" //这个id要唯一，给下边<cewolf:img/>标签引用 title="TimeSeries" //图形的标题 type="timeseries" //图形的类型 xaxislabel="x-values" //横轴 Lable yaxislabel="y-values"> //纵轴Lable <cewolf:colorpaint color="#EEEEFF"/> //图形的背景色 <cewolf:data> <cewolf:producer id="timeData"/> //引用上面产生的数据 </cewolf:data> </cewolf:chart>
一些说明：
关于图形的背景色，还有两个选择，分别是
<cewolf:gradientpaint> //产生色彩倾斜的背景 <cewolf:point x="0" y="0" color="#AAAAFFEE" /> <cewolf:point x="300" y="0" color="#DDDDFF" /> </cewolf:gradientpaint>
和
<cewolf:texturepaint image="/img/bg.jpg" width="60" height="60" /> //加入背景图案
3、<cewolf:img/>标签
<cewolf:img chartid="timeChart" //就是上面那个 id
renderer="/cewolf" //这个是必需的！web.xml 中有配置
width="300" //宽
height="300" /> //高
还有一种图形输出方式：
<img src='<cewolf:imgurl chartid="foobar" renderer="/cewolf" width="100" height="100"/>'>
很明显，这种方式把图形包含到 Html 的<img/>中
4、进一步调整
看到上面的步骤，你可能会认为用 cewolf 输出图形是如此的简单，是这样的，但看了最开始的 jFreeChart 对图形
的一些调整，你会想我如何调整呢？我不想用默认值，我想输出更复杂的图形。很好，我是这样做的：
这里要介绍一个新的接口ChartPostProcessor 和一个标签<cewolf:chartpostprocessor/>
我们要写自己的类实现这个ChartPostProcessor 接口，然后再用标签<cewolf:chartpostprocessor/>调用我们所写
的类
ChartPostProcessor dataColor = new ChartPostProcessor() {
public void processChart(Object chart, Map params) { //这个接口就这一个方法
CategoryPlot plot = (CategoryPlot) ((JFreeChart) chart).getPlot(); //看到了什么？？！！对，获得了plot！
下面就可以通过plot 对图形进行调整！！
plot.setAxisOffset(new RectangleInsets(5D, 5D, 5D, 5D)); //一个实验，坐标轴与图分离
for (int i = 0; i < params.size(); i++) { //这里的params 是通过标签<cewolf:chartpostprocessor/>输入的！
String colorStr = (String) params.get(String.valueOf(i));
plot.getRenderer().setSeriesPaint(i, java.awt.Color.decode(colorStr));//看到 renderer了吧，又可以大
干一场了，嘿嘿！
}
}
};
pageContext.setAttribute("dataColor", dataColor); //记得要放起来噢
具体引用：
<cewolf:chart id="stackedHorizontalBar" title="StackedHorizontalBar" type="stackedHorizontalBar" xaxislabel="Fruit" yaxislabel="favorite"> <cewolf:data> <cewolf:producer id="categoryData" /> </cewolf:data> <cewolf:chartpostprocessor id="dataColor"> //在这里！！ <cewolf:param name="0" value='<%= "#FFFFAA" %>'/> <cewolf:param name="1" value='<%= "#AAFFAA" %>'/> <cewolf:param name="2" value='<%= "#FFAAFF" %>'/> <cewolf:param name="3" value='<%= "#FFAAAA" %>'/> </cewolf:chartpostprocessor></cewolf:chart>
我们当然也可以在实现ChartPostProcessor 接口的类里把一切都做好，然后这么用：
<cewolf:chartpostprocessor id="dataColor"/>