使用JfreeChart开发图表经验总结(含源码)

最近,公司一项目要出很多的图表。由于项目是B/S架构的,所以生成的图表也要考虑能在浏览器上动态显示。

生成基于浏览器的图表方式比较多。据我所知道的,常用的有三种: 1、VML方式实现。这种方式是通过产生客户端的代码,由客户端根据代码生成相应的图表。但这种方式产生的图表有很多的局限性,如受限于浏览器,有些浏览器可能并不支持VML。另外,没有封装完整的图表开发包。 2、通过applet来产生图表。这种方式也对客户端要求比较高,必须要有JRE,而且通过applet生成的图表在加载过程中会有个Java的Log动画。用户看了可能会感觉不太舒服。 3、通过服务端直接生成图表的图片。这种方式对客户端几乎没有什么要求,缺点是加重了服务端的负担,对服务端要求就相对高了点。 经过比较,根据项目自身特点,我们打算采用第三种方式来开发图表。为了缩短开发周期、节约成本,我们选用了开源的JFreeChart(http://www.jfree.org/jfreechart/)。

jfreechart是一个免费创建图表的java工具,目前最新版本是JFreeChart-1.0.0-rc1。它可以生成各式各样的图表。这些图表包括饼图、柱状图、线形图、区域图、甘特图等等,基本可以满足各种项目的要求。但在开发过程中我也发现了JFreeChart的一些不足,或者说有些称得上是BUG。总体说来,JFreeChart还是个优秀的开源项目。

关于JFreeChart生成图表的文章比较多了,我主要谈谈使用JFreeChart的一些比较棘手问题以及解决方法。同时也会将问题所用到的源码(JFreeChart-1.0.0-rc1+Struts1.2.4)从项目中抽象出来一起提供给大家。

一、 图片上热点链接中文乱码的解决方法

这个问题是在我查阅关于JFreeChart相关资料时出现频率最高的一个问题。其实这个乱码问题不能怪罪于JFreeChart。有人甚至就因此认为JFreeChart对中文支持不太完善,JFreeChart可要叫了:我是冤枉的!

我们来找出问题产生的原因,这个问题也就不难解决了。

首先查看一下出现问题页面的Html源文件,你会发现在源文件的开头多出了一段map代码,代码类似于这样:

< map  id ="chart-30928.png"  name ="chart-30928.png" > < area  shape ="poly"  coords ="179,163,176,154,174,145"  title ="洗衣机=315(29.86%)"  alt ="" /> ………… </ map > < html > < head > …………

这部分map代码其实是JFreeChart产生的,是用来产生图片上的热点链接,这也是问题产生的根源所在。你的Jsp页面通过<%@ page contentType="text/html; charset=UTF-8" %>或者<%@ page contentType="text/html; charset=GBK" %>来设置contentType这无可厚非,但map并不是由这个jsp页面产生的。它是JFreeChart通过PrintWriter产生的。查看一下你生成图片的Chart源码,其中有ChartUtilities.writeImageMap(pw, filename, info, false)这样的语句。这是用来向页面写入map代码的。默认情况下,map代码会以服务器默认编码(ISO-8859-1)输出。这就和你的Jsp编码不一致,从而产生乱码。

原因找到了,问题也就不难解决的。设置PrintWriter的contentType与Jsp的contentType保存一致就可以了。代码如下(笔者的Web应用是基于Struts框架的):

// PieMothAciton.java      public  ActionForward execute(ActionMapping mapping, ActionForm form,             HttpServletRequest request, HttpServletResponse response)              throws  Exception  {                      //设置输出编码格式         response.setContentType("text/html;charset=UTF-8");          PrintWriter out = response.getWriter();                  …………                  String filename = chart.generatePieChart3D("月统计比例图"                session, out);                  String graphURL = request.getContextPath()                  + "/servlet/DisplayChart?filename=" + filename;                  request.setAttribute("filename",filename);         request.setAttribute("graphURL",graphURL);                  return mapping.findForward(SUCCESS);             }

重新部署你的Web应用,中文乱码文件就可以解决了。

二、 饼图显示百分比

在饼图中JFreeChart默认只显示选项和数值,没有显示各项所占比例。由于手头没有1.0版的JFreeChart Developer Guide(这可是要钱的,后来想想即使有,也未必能找到关于百分比这方面的说明),再加上DEMO中的饼图都没有显示百分比,无法参考。后来在网上找到了一个老版本的例子,其中能显示百分比。它是通过在PiePlot中设置的:

PiePlot pie; pie.setPercentFormatString( " #,###0.0#% " );

但1.0版本中根本就找不到setPercentFormatString这方法,JFreeChart各版本之间改动比较大,很难兼容。还好它是开源的,把它的源码都搜索了一遍,认真读了一些源码,终于理出了头绪。

原来在1.0.0-rc1版中显示百分比已经调整到StandardPieItemLabelGenerator构造函数中了,StandardPieItemLabelGenerator有三个构造函数。StandardPieItemLabelGenerator()不显示各项所占比例。另外两个可以显示比例。代码如下:

plot.setLabelGenerator( new  StandardPieItemLabelGenerator(StandardPieItemLabelGenerator.DEFAULT_TOOLTIP_FORMAT)); // 或者采用下面自定义样式显示,{0}表示选项,{1}表示数值,{2}表示所占比例 plot.setLegendLabelGenerator( new  StandardPieItemLabelGenerator( " {0}: ({1}M, {2}) " ));
效果如下图:

默认显示百分比是取整的,如果要让百分比保留二位小数,可以用第三个构造函数:
plot.setLabelGenerator( new  StandardPieItemLabelGenerator(“{ 0 } = { 1 }({ 2 })”,                     NumberFormat.getNumberInstance(),                      new  DecimalFormat( " 0.00% " )));

效果如下图:

三、 混合图表(不同类型的图混合显示)

我们经常用的是柱状图、曲线图、和饼图,这三类型图基本能满足大部分项目的需求。但有些项目比较特殊,可能需要在一张图上同时显示不同类型的图。这在JFreeChart中可以轻松实现。例如我们要做个流量监控的系统,该系统一天中在不同的时间段有不同的阀值(最大值),该阀值表示成阶梯线。而实际流量就是个曲线了。当流量在某个时段内超过阀值时就触发相应的事件(如限流)。要表示阀值和流量的对比关系就需要两种类型的图片在同一张图表上表示,如下图:

首先像创建普通图表一样来创建图片,笔者先创建了一个XYStep Chart。然后创建第二图表的Renderer,再分别将第二图表的Dataset、Renderer添加进第一图表的plot。实例代码如下:

// MultipleChart.java JFreeChart jfreechart  =  ChartFactory.createXYStepAreaChart( " 监控设置 " ,                   " 时刻 " ,                   " 流量 " ,                  xydataset,                  PlotOrientation.VERTICAL,                   true ,                   true ,                   false );                  XYPlot xyplot  =  jfreechart.getXYPlot(); …………          // 设置第二图表的Renderer         StandardXYItemRenderer standardxyitemrenderer  =   new  StandardXYItemRenderer();         standardxyitemrenderer.setToolTipGenerator( new  StandardXYToolTipGenerator( " {0}({1}) = {2} " ,                   new  SimpleDateFormat( " HH:mm " ),                   new  DecimalFormat( " #,##0 " )));                           // 将第二图表的Dataset、Renderer添加进xyplot         xyplot.setDataset( 1 , lineDataset);         xyplot.setRenderer( 1 ,standardxyitemrenderer); 

这样就创建了曲线和阶梯的混合图表。

四、 其它问题

1) 版本问题。 JFreeChart的各版本变动比较大,这在升级版本时是比较头疼的问题,升级时需要改动你代码的地方可能比较多。因此尽量采用最新的版本,新版本的文档可能比较少,但问题要相对少一些,在旧版中就出现过标注数值重叠在一起这样的问题。好的是JFreeChart是开源的,碰到解决不了的问题可以从源码中找到有参考价值的信息。

2) 设置背景透明度的BUG 不知道这是不是JFreeChart的一个BUG。利用chart.setBackgroundImageAlpha(0.5f)来设置背景透明度,ServletUtilities.saveChartAsPNG保存图片。将chart.setBackgroundImageAlpha(0.5f)注释掉再生成图片,发现两张图片是一样的。也就是说setBackgroundImageAlpha方法无效,具体原因笔者还不太清楚,读者大家可以自己测试看看。

以上是笔者在项目开发中总结出来的,希望大家多提宝贵意见! 附源码:JFeeChartProject_src.rar

<script type="text/javascript"> // </script>

Feedback

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-10-25 22:28 by 展昭
很不错~我前一段时间将JfreeChart用在SWT框架的程序里,用了一种比较笨的方法,使用了一个AWT-SWT的桥,是SWT-Designer里面自带的一个工具类,感觉有些傻傻的。

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-10-26 10:12 by 千山鸟飞绝
不错的文章。 如果在结尾部分,加上一些比较基础的文章的连接更好。 这样大家如果对jfreechar不了解的话,可以先看看那些基础的文章。

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-10-26 10:37 by thoth
写的不错,我们的项目中也正在使用jfreechart生成图表,不过我们采用的是applet的方式,主要是考虑到服务器负载的问题。另外,我们的项目中并没有直接使用jfreechart,而是按照我们的需要重新封装了一套接口。这样,起码在业务层可以保证代码的稳定

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-10-26 10:37 by thinkbase.net
确认两张图片是一样的吗? 因为 IE 不支持透明的 PNG 图片的显示, 所以我猜想可能不是 JFreeChart 的 bug, 你用别的浏览器试试看

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-10-26 10:42 by 风人园
能不能把你的有关map部分的演示源代码发给我,map部分一直没有测试成功。谢谢 wuxufeng@ivo.com.cn

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-10-26 11:21 by 风人园
现有就这个问题了,我在jsp或者 用javabean调用都可以实现链接 ,但是在action中就没有办法把map的资料传到页面 下面是我action的代码 public ActionForward list(ActionMapping actionMapping, ActionForm actionForm, HttpServletRequest request, HttpServletResponse response) throws Exception { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); HttpSession session = request.getSession(); DefaultPieDataset data = new DefaultPieDataset(); data.setValue("高中以下", 370); data.setValue("高中", 1530); data.setValue("大专", 5700); data.setValue("本科", 8280); data.setValue("硕士", 4420); data.setValue("博士", 80); JFreeChart chart = ChartFactory.createPieChart3D("月统计比例图", data, true, true, true); PiePlot3D plot = (PiePlot3D)chart.getPlot(); plot.setURLGenerator(new StandardPieURLGenerator("barview.jsp")); chart.setBackgroundPaint(java.awt.Color.white); plot.setToolTipGenerator(new StandardPieToolTipGenerator()); StandardEntityCollection sec = new StandardEntityCollection(); ChartRenderingInfo info = new ChartRenderingInfo(sec); String filename = ServletUtilities.saveChartAsJPEG(chart, 500, 300, info, session); //FileOutputStream fos_jpg = new FileOutputStream("d://fruit.jpg"); //ChartUtilities.writeChartAsJPEG(out,100, chart, 500, 300, info); ChartUtilities.writeImageMap(out, "map0", info, false); String graphURL = request.getContextPath() + "/servlet/DisplayChart?filename=" + filename; request.setAttribute("filename", filename); request.setAttribute("graphURL", graphURL); return actionMapping.findForward("list"); }

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-10-26 11:22 by keith
@thinkbase.net IE支持PNG显示,我这里显示没有任何问题。本文原来是个Word文档,我导成HTML的,发现里面附图PNG的要比JPG的要清晰,就把PNG帖了上来。

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-10-26 11:22 by keith
@风人园 本文结尾有源码提供下载: http://dev2dev.bea.com.cn/bbs/servlet/D2DServlet/download/121-28066-168127-1963/JFeeChartProject_src.rar。 是基于Struts的,对应action产生map可以参考一演示源码。

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-10-26 16:37 by 冰川
辛苦老!

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-10-27 07:50 by 风人园
对不起,你那里面没有源代码啊 ,只有发布的程序,你再看一下

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-10-27 09:52 by keith
@风人园 有的,在WEB-INF/src

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-10-28 14:57 by 风人园
再请问一个问题,除了 pie可以,其他的可以吗? 我用的是jfreechart 1.01,我通过设定 plot.setURLGenerator(new StandardPieURLGenerator("barview.do?from=xxx")); 可以实现链接,但是,其他的图好像没有这个方法,只有piePlot才有这个方法

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-10-30 10:33 by keith
@风人园 应该都有,可能方法名称不叫setURLGenerator,仔细研究一下源码。 可以到这里 http://homepage.ntlworld.com/richard_c_atkinson/jfreechart/下载个war参考一下,不过版本有点老

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-11-01 13:55 by honglei
在struts框架中实现map,我也一直没有成功过. 我下载了您的例子,按照你的想法做了实验,在我的项目中仍然不能显示. 我注意到map已经显示到页面中了,但是页面上的其他内容没有了,生成了一个空页面.不大明白,为什么我的输出流没有封装原页面的内容呢?

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-11-01 13:57 by honglei
user guide我有1.0.1版本的,需要的话可以联系我,yuhonglei4025@hotmail.com

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-11-01 14:16 by keith
@honglei 这是我一年前写的文章,发布在dev2dev,刚才我重新下载试验了一下,一切正常。鼠标放在图片上效果请看: o_TestChart.JPG 注意demo.chart.WebChart.java类

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-11-02 08:12 by honglei
@keith 其实很感谢你的例子.现在是8点,我整整花了一宿时间来查找原因. 你的例子肯定是正确的,但是我我是用eclipse按照普通的步骤来创建一个struts项目,就能不能够将map加入到页面中. 总是使用response.getWriter().flush()输出map信息后,将我需要输出的<input>标签替换掉. 我对比了你的例子,并逐渐尝试.我发现这个跟struts-config.xml中的tiles配置有关系.如果配置了tiles就可以正常显示,不配置就不行.

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-11-02 10:21 by keith
@honglei 应该跟tiles有关,因为<controller processorClass="org.apache.struts.tiles.TilesRequestProcessor"/>

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-11-04 17:24 by firehero
您好: 冒昧的打扰您,我用的是JFreeChart1.0.2,在生成柱状图的时候,无法显示每一个Item的Label,我在网上搜到了一些关于这个问题的求助,但是都没有太好的解决办法。希望您不吝赐教。 DecimalFormat decimalformat1 = new DecimalFormat("$##,###.00"); renderer.setItemLabelGenerator(new StandardCategoryItemLabelGenerator("{2}", decimalformat1)); renderer.setItemLabelGenerator(new StandardCategoryItemLabelGenerator()); renderer.setItemLabelFont(new Font("宋体", Font.LAYOUT_RIGHT_TO_LEFT, 120)); renderer.setItemLabelsVisible(true); renderer.setBaseItemLabelsVisible(true);

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-11-13 16:14 by keith
@firehero 反编译它的demo,看一下主要代码,我经常这么做。

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2006-11-20 11:56 by honglei
@firehero new Font("宋体", Font.LAYOUT_RIGHT_TO_LEFT, 120) 应该是120号字体太大了吧.换成12或者14号试试.

# JfreeChart页面超链接问题  回复  更多评论   

2007-02-02 18:18 by cruise_tan
public class ReportModel { public static String generateBarChart(PrintWriter pw, HttpSession session) { String filename = null; try { String title = "柱状图分析"; DefaultCategoryDataset dataset = new DefaultCategoryDataset(); //dataset赋值开始 String kindId = null; String kindName = null; String accountId = null; String accountName = null; double amt = 0; kindId = "k1"; kindName = "交通"; amt = 1000; accountId = "a1"; accountName = "测试帐户1"; dataset.addValue(amt,accountName,kindName); kindId = "k2"; kindName = "娱乐"; amt = 2000; accountId = "a2"; accountName = "测试帐户2"; dataset.addValue(amt,accountName,kindName); kindId = "k3"; kindName = "住房"; amt = 3000; accountId = "a3"; accountName = "测试帐户3"; dataset.addValue(amt,accountName,kindName); /* dataset赋值结束,其中kindId和accountId没用到 我很想要的链接是 http://localhost/mytest/xyChart.jsp?accountId=a1&kindId=k1 但现在的出来的链接是 http://localhost/mytest/xyChart.jsp?accountId=测试帐户1&kindId=交通 因为在图片上需要显示:测试帐户1和交通,而不能是a1和k1 */ BarRenderer3D renderer = new BarRenderer3D(); renderer.setItemURLGenerator(new StandardCategoryURLGenerator("xyChart.jsp","accountId","kindId")); renderer.setToolTipGenerator(new StandardCategoryToolTipGenerator()); JFreeChart chart = ChartFactory.createBarChart3D(title, "类别", "金额", dataset, PlotOrientation.VERTICAL, true, true, true); chart.setBackgroundPaint(java.awt.Color.white); CategoryPlot plot = chart.getCategoryPlot(); plot.setForegroundAlpha(1); plot.setRenderer(renderer); CategoryAxis axis = plot.getDomainAxis(); CategoryLabelPositions p = axis.getCategoryLabelPositions(); CategoryLabelPosition left = new CategoryLabelPosition(RectangleAnchor.LEFT, TextBlockAnchor.CENTER_LEFT, TextAnchor.CENTER_LEFT, 0, CategoryLabelWidthType.RANGE, 0.3F); axis.setCategoryLabelPositions(CategoryLabelPositions.replaceLeftPosition(p, left)); ChartRenderingInfo info = new ChartRenderingInfo(new StandardEntityCollection()); filename = ServletUtilities.saveChartAsJPEG(chart, 460, 320, info, session); ChartUtilities.writeImageMap(pw, filename, info); pw.flush(); } catch (Exception e) { LogUtil.THS_LOG.debug(e); filename = "public_error.jpg"; } return filename; } }

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2007-02-05 15:35 by keith
你添加的是dataset.addValue(amt,accountName,kindName); 这当然会显示accountName,kindName的值

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2007-02-09 14:33 by niaodj
您好! 打扰您了,想请教您一个问题。我在使用jfreechart1.0.2生成柱状图的时候,无法修饰柱子下标的字体。代码如下: DefaultCategoryDataset dataset = new DefaultCategoryDataset(); dataset.addValue(double,string1,string2) 我想修饰的是string1和string2的字体。希望您不吝赐教。感谢之至!

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2007-03-23 10:21 by keith
@firehero 还要加句 renderer.setItemLabelGenerator(new StandardCategoryItemLabelGenerator()); renderer.setSeriesItemLabelsVisible(0, Boolean.TRUE);

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2007-03-23 10:32 by keith
@niaodj 没有找到方法

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2007-04-18 17:28 by shengdianjisi
你好,做地很好,但是我在测试的时候提示错误找不到数据源,是为什么哦?

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2007-05-04 10:30 by 郁闷中
我是用struts来做的甘特图,现在想要能在图片上有ToolTip,可是出现了状况 在ChartUtilities.writeImageMap(out, filename, info, false);这句话以后,如果用out.flush的话,一执行到return mapping.findForward("success");时就会出错(Cannot forward after response has been committed)。 而,我不out.flush,页面上又得不到map。请问我该怎么办呢?我看您的例子里都可以out.flush的啊? PS:PrintWriter out = response.getWriter();

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2007-05-10 10:17 by keith
@shengdianjisi 数据源没有配置正确

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2007-05-10 10:28 by keith
@郁闷中 是这么处理的啊。 <forward name="success" redirect="false" ……/> redirect不能为ture

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2007-09-26 13:52 by iolinux
是这么处理的啊。 <forward name="success" redirect="false" ……/> redirect不能为ture 加入这个也不行啊

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2007-09-26 13:59 by iolinux
我是用struts来做的甘特图,现在想要能在图片上有ToolTip,可是出现了状况 在ChartUtilities.writeImageMap(out, filename, info, false);这句话以后,如果用out.flush的话,一执行到return mapping.findForward("success");时就会出错(Cannot forward after response has been committed)。 而,我不out.flush,页面上又得不到map。请问我该怎么办呢?我看您的例子里都可以out.flush的啊? PS:PrintWriter out = response.getWriter(); <forward name="success" redirect="false" ……/> redirect不能为ture 加入这个也不行啊 谁搞定了,发个email给我iolinux@163.com

# re: [原创]使用JfreeChart开发图表经验总结(含源码) [未登录]  回复  更多评论   

2007-09-26 16:21 by Aaron
@firehero 字体太大了。

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2008-04-06 17:53 by zhangzheng
hao

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2008-05-09 16:20 by congcong
在ChartUtilities.writeImageMap(out, filename, info, false);这句话以后,如果用out.flush的话,一执行到return mapping.findForward("success");时就会出错(Cannot forward after response has been committed)。 而,我不out.flush,页面上又得不到map。请问我该怎么办呢?我看您的例子里都可以out.flush的啊? PS:PrintWriter out = response.getWriter(); <forward name="success" redirect="false" ……/> redirect不能为ture 加入这个也不行啊 大家谁解决了赶快发上来啊,急急急

# re: [原创]使用JfreeChart开发图表经验总结(含源码)   回复  更多评论   

2008-05-11 13:45 by jsp
无法显示每个柱的数值
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值