Cewolf使用小结

Cewolf使用小结

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);
http://cewolf.sourceforge.net/new/index.html