cewolf 图表生成 2

最新推荐文章于 2021-03-21 09:00:32 发布

talentkep

最新推荐文章于 2021-03-21 09:00:32 发布

阅读量240

点赞数

CC 4.0 BY-SA版权

文章标签： jfreechart UI

本文链接：https://blog.youkuaiyun.com/talentkep/article/details/83470540

本文详细介绍了使用JFreeChart库绘制折线图和时间序列图的方法，并展示了如何利用Cewolf在Web环境中生成并自定义图表。

B、由ChartFactory 产生 JFreeChart 对象

private static JFreeChart createChart(XYDataset xydataset)

{

JFreeChart jfreechart = ChartFactory.createXYLineChart("Line Chart Demo 2",

"X",

"Y",

xydataset,

PlotOrientation.VERTICAL,

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);

五、时间序列图
    时间序列图和折线图很相似，不同的是它在 domain轴的数据是时间而不是数字。时间序列图的dataset 是
    XYDataset 接口，具体实现类是TimeSeriesCollection ，和上面类似，有TimeSeries 对象，它被添加入
    TimeSeriesCollection 。
  1、创建一个数据源（dataset）：

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;

}

2、由ChartFactory 产生 JFreeChart 对象

private static JFreeChart createChart(XYDataset xydataset)

{

JFreeChart jfreechart = ChartFactory.createTimeSeriesChart("Legal & General Unit Trust Prices",

"Date",

"Price Per Unit",

xydataset,

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;

}

       一些重要的方法：
     A、增加标记线：
        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 timeseries = createEURTimeSeries();  //就是以半年每天为单位的数据
        TimeSeries timeseries1 = MovingAverage.createMovingAverage(timeseries,
                                                                   "30 day moving average",
                                                                   30, //30天为一个周期
                                                                   30); //最开始的30天跳过
        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

七、Item Lable
   这里以柱状图为例说明，具体来说就是在每个柱状上显示它的数据，具体有下面内容：
   A、使 Item Lable 可见
   B、调整 Item Lable 的颜色、字体等
   C、调整 Item Lable 的位置
   D、定制 Item Lable 的内容
   1、分配一个 Lable Generator 给 renderer
      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));
   4、调整 Item Lable 的位置
      这里涉及到一个新的对象 ItemLablePosition , ItemLablePosition的构造函数有两个或四个参数
      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);
   这样就可以每个柱状上显示它的数据了，当然可以定制 Item Lable 的内容，比如 Item Lable text 超过100的才
   显示，这样就需要定制自己的类，它要实现GategoryLableGenerator 接口，实现generateItemLable()方法。

了解了jFreeChart ，现在要使用cewolf 。具体在web 中如何配置，就不说了。首先也是了解cewolf 工作的流程，然后对
它的标签进行说明.

一、cewolf 产生图形的流程
   创建一个数据源（dataset）来包含将要在图形中显示的数据?????>><cewolf:chart/>标签对图形进行调整
   ??????>><cewolf:img/>标签把图形输出
1、创建一个数据源（dataset）
   创建数据源基本上和上面一样，所不同的是 cewolf 对其重新进行了包装，它提供了一个DatasetProducer 接口，你需要
   实现这一接口，下面是一个例子
  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"/>

cewolf 图表 生成 2

cewolf 图表生成 2