Cewolf使用小结

来源:互联网 发布:50 量子计算机 知乎 编辑:程序博客网 时间:2024/05/16 06:13

原文:http://kimfly.iteye.com/blog/38162
jfreechartServletJSPWeb嵌入式 

Cewolf可以在一个基于Servlet/JSP的Web应用程序内部使用,基于JFreechart的,利用JFreechart的绘制引擎的开源项目。以在Web页中嵌入各种复杂的图形图表(如,直方图、饼图、棒图等等)。它提供了一个功能完备的标签库来定义图表的所有属性(颜色、笔画、图例等),这样嵌入了图表的JSP就不用使用任何Java代码。

为了配置你的web工程,你必须编辑 /WEB-INF/web.xml,添加下列行。
<servlet></servlet>
  <servlet-name></servlet-name>CewolfServlet
  <servlet-class></servlet-class>de.laures.cewolf.CewolfRenderer

另外你要提供一个servlet-mapping来告诉容器URL与Cewolf绘图servlet的映射关系.
Additionally you should provide a servlet-mapping to tell the container which URL maps to your Cewolf rendering servlet.
<servlet-mapping></servlet-mapping>
   <servlet-name></servlet-name>CewolfServlet  
   <url-pattern></url-pattern>/cewolf/ *

你还需要告诉CeWolf的启动:
 <load-on-startup></load-on-startup>1

下载标签库jar包:
将jar包下/Lib文件内容放在工程的/WEB-INF/lib 下面,/Lib文件内容:
jfreechart-*-demo.jar 
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浏览器需要/example目录下的overlib.js,放入webapps根目录下。
在用Cewolf标签出现问题时,例如:"No Tags" is displayed in your containers console。你可以将cewolf.tld或cewolf-1.1.tld  文件放入你在WEB项目根目录下的新建的文件夹中,就能在JSP中使用这些标签咯。

 1、创建一个数据源(dataset)
   创建数据源基本上和上面一样,所不同的是 cewolf 对其重新进行了包装,它提供了一个DatasetProducer 接口,你需要实现这一接口,下面是一个例子
  DatasetProducer pieData = new DatasetProducer() {
    public Object produceDataset(Map params) {
      //cewolf?对其重新进行了包装
      final String[] categories = { "apples", "pies", "bananas", "oranges" };
      DefaultPieDataset ds = new DefaultPieDataset();
      //怎么样?和上面一样吧
      for (int i = 0; i < categories.length; i++) {
        int y = (int) (Math.random() * 10 + 1);
        ds.setValue(categories[i], new Integer(y));
      }
      return ds;
    }

一个DatasetProducer需要实现3个方法,最重要的一个是produceDataset()方法,它实际上生成了一个用于画图的数据。这个方法用一个map作参数,这个map由许多指定的JSP标签填充,这个一会再介绍。
在当前生数据成器确实生成数据对象后,方法hasExpired()被才被Cewolf框架调用。当返回TRUE时,产生器将释放以前的数据。
Cewolf框架通过 getProducerId()方法提生成的一个唯一ID来标识一个生成者。2个具有相同ID生成实例将被认为时生成相同的数据。

public String getProducerId() {
      return "PieDataProducer";//返回唯一的ID
    }
    public boolean hasExpired(Map params, Date since) {
      return false;
    }
  };
  pageContext.setAttribute("pieData", pieData);//产生完以后要把它放到页面中保存以给?cewolf标签调用

2、<cewolf:chart></cewolf:chart>标签
  <cewolf:chart id="pieChart"></cewolf:chart>  //这个id要唯一,给下边<cewolf:img>标签引用
    title="Pie“//图形的标题
    type="pie" //图形的类型 >
    <cewolf:gradientpaint>
        <cewolf:point color="#FFFFFF" y="0" x="0"></cewolf:point>
        <cewolf:point color="#DDDDFF" y="0" x="300"></cewolf:point>
    </cewolf:gradientpaint>
    <cewolf:data>
        <cewolf:producer id="pieData"></cewolf:producer>
 //</cewolf:data>

<!---->
<!---->引用上面产生的数据


 一些说明:
  关于图形的背景色,还有两个选择,分别是
    <cewolf:gradientpaint>   //</cewolf:gradientpaint>
  产生色彩倾斜的背景
        <cewolf:point color="#AAAAFFEE" y="0" x="0"></cewolf:point>
        <cewolf:point color="#DDDDFF" y="0" x="300"></cewolf:point>
    和
    <cewolf:texturepaint height="60" width="60" image="/img/bg.jpg"></cewolf:texturepaint>//加入背景图案

3、<cewolf:img>标签
   

4、看到上面的步骤,你可能会认为用 cewolf 输出图形是如此的简单,是这样的,但看了最开始的 jFreeChart 对图形的一些调整,你会想我如何调整呢?我不想用默认值,我想输出更复杂的图形。很好,我是这样做的:
   这里要介绍一个新的接口ChartPostProcessor  和一个标签<cewolf:chartpostprocessor></cewolf:chartpostprocessor>我们要写自己的类实现这个ChartPostProcessor 接口,然后再用标签<cewolf: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></cewolf:chartpostprocessor>输入的!
        String colorStr = (String) params.get(String.valueOf(i));
        plot.getRenderer().setSeriesPaint(i, java.awt.Color.decode(colorStr));//看到 renderer了吧,
      }
    }
  };
  pageContext.setAttribute("dataColor", dataColor); //记得要放起来噢

 具体引用:
              type="stackedHorizontalBar" xaxislabel="Fruit" yaxislabel="favorite">
    <cewolf:data>
        
    </cewolf:data>
    
  
 在这里!!
        我们当然也可以在实现ChartPostProcessor 接口的类里把一切都做好,然后这么用:
       

生成ImageMap和Tooltip信息是很简单的事情,
首先要实现接口CategoryItemLinkGenerator和CategoryToolTipGenerator (因为生成的是CategoryDataset). 别的数据类型请参见cewolf java api:http://cewolf.sourceforge.net/new/apidoc/index.html
de.laures.cewolf.tooltips下有4个接口:
CategoryToolTipGenerator 
PieToolTipGenerator 
ToolTipGenerator 
XYToolTipGenerator
为了能让你的类能在图片上生成ImageMap和Tooltip,你必须对<cewolf:img>做如下修改:
<cewolf:img height="300" width="400" renderer="cewolf" chartid="line">   
 <cewolf:map id="pageViews"></cewolf:map>
</cewolf:img>

CategoryToolTipGenerator catTG = new CategoryToolTipGenerator() {
    public String generateToolTip(CategoryDataset dataset, int series, int index) {
      return String.valueOf(dataset.getValue(series, index));
    }
  };
  pageContext.setAttribute("categoryToolTipGenerator", catTG);

PieToolTipGenerator pieTG = new PieToolTipGenerator() {
    public String generateToolTip(PieDataset dataset, Comparable section, int index) {
      return String.valueOf(index);
    }
  };
  pageContext.setAttribute("pieToolTipGenerator", pieTG);

<cewolf:img height="300" width="300" renderer="/cewolf" chartid="horizontalBarChart">
    <cewolf:map tooltipgeneratorid="categoryToolTipGenerator"></cewolf:map>
</cewolf:img>

LinkGenerator xyLG = new XYItemLinkGenerator() {
    public String generateLink(Object data, int series, int item) {
      return "#Series " + series;
    }
  };
  pageContext.setAttribute("xyLinkGenerator", xyLG);