通过JFreeChart制作柱形图

先贴张图片让大家看下效果吧：

最近项目中需要用到图表相关的功能点，在网上找了一下资料，总结如下：

图表框架：JFREECHART/FLOT/FUSIONCHARTSFREE
报表引擎：BIRT

JFREECHART：开源项目，主要用来生成静态图表，如饼图、柱状图、曲线图、区域图等
纯JAVA应用与实现，可继承到WEB/SWING/SWT等，方便集成到报表中
性能不佳，不支持动态报表或交互式报表，开发靠编码，不适于做实时或数据量大的图表，对服务器资源消耗大，产品质量一般
URL:JFREE.ORG/JFREECHART
JAR包(放于lib下)：jfreechart-1.0.x.jar和

开源报表系统：
URL:reporting.pentaho.com

FLOT：客户端产品，纯JS实现
支持主流浏览器和手机浏览器
支持线图、点图、填充区域、柱状图、饼状图等
图表显示质量好、对服务器资源消耗小等

FusionCharts Free：用flash制作，纯客户端
开发较容易，不支持数据量大的图表

Birt:
开源工具：Eclipse插件Report、Birt Report Designer

最后，经过多方面考虑还是使用JFREECHART比较好，上面那幅图就是通过JFREECHART实现的，我们得需求是通过JSP页面上的按钮点击获取后台的柱形图，在JSP页面中先通过ajax获取数据库中的数据，若成功，再调用servlet中所形成的柱形图，代码如下：

JSP：

创建一个DIV：

<div id="images">
        <img src="${pageContext.request.contextPath}/images/proportionbg.jpg" width="90%" height="400" id="imgs">
</div>

然后通过页面上的按钮调用JS中的AJAX，实现图表引用：

if(res =="yes"){
        var imgNode = document.getElementById("imgs");
        imgNode.setAttribute('src','barChart');
        document.getElementById('images').appendChild(imgNode);
        hideScrollDiv();
 }else{
       hideScrollDiv();
       showTip("分析失败", 2);
 }

最后，编写制作柱形图的servlet，源码如下：

package cn.netjava.jFreeChart;

import java.awt.Color;
import java.awt.Font;
import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartUtilities;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.StandardChartTheme;
import org.jfree.chart.axis.ValueAxis;
import org.jfree.chart.labels.StandardCategoryItemLabelGenerator;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.chart.renderer.category.BarRenderer;
import org.jfree.data.category.CategoryDataset;
import org.jfree.data.category.DefaultCategoryDataset;
/**
 * 柱形图.
 * @Title:ClientStatServlet.java
 * @author: 周玲斌
 * @version: Mar 19, 2012 10:09:09 AM
 */
public class ClientStatServlet extends HttpServlet {
	
	private static final long serialVersionUID = 1L;
	protected void service(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("image/jpeg");
		CategoryDataset dataset =null;
		JFreeChart chart = null;
		// 创建主题样式  
		StandardChartTheme standardChartTheme = new StandardChartTheme("CN");  
		// 设置标题字体  
		standardChartTheme.setExtraLargeFont(new Font("华文行楷", Font.BOLD, 20));  
		// 设置图例的字体  
		standardChartTheme.setRegularFont(new Font("宋体", Font.PLAIN, 12));  
		// 设置轴向的字体  
		standardChartTheme.setLargeFont(new Font("宋体", Font.PLAIN, 12));  
		// 应用主题样式  
		ChartFactory.setChartTheme(standardChartTheme); 
		dataset=imageTypeHis();
		 chart = ChartFactory.createBarChart( "比例分析柱状图", // 图表标题
		 "模块类型", // 目录轴的显示标签
		 "使用次数", // 数值轴的显示标签
		 dataset, // 数据集
		 PlotOrientation.VERTICAL, // 图表方向：水平、垂直
		 true, // 是否显示图例(对于简单的柱状图必须是 false)
		 false, // 是否生成工具
		 false // 是否生成 URL 链接
		 );
		 CategoryPlot plot = chart.getCategoryPlot(); 
		 //CategoryAxis domainAxis = plot.getDomainAxis();     domainAxis.setVerticalCategoryLabels(false);   
		 //plot.setDomainAxis(domainAxis);     
		  ValueAxis rangeAxis = plot.getRangeAxis();   
		 rangeAxis.setUpperMargin(0.1);  //设置最高的一个 Item 与图片顶端的距离     
		  rangeAxis.setLowerMargin(10);   //设置最低的一个 Item 与图片底端的距离 
		  plot.setRangeAxis(rangeAxis);
		//显示每个柱的数值，并修改该数值的字体属性 
		 BarRenderer renderer = new BarRenderer(); 
		 renderer.setBaseItemLabelGenerator(new StandardCategoryItemLabelGenerator());
		 //设置显示
		 renderer.setBaseItemLabelsVisible(true);
		 //设置字体样式
		 renderer.setBaseItemLabelFont(new Font("微软雅黑",Font.PLAIN,10));
		//设置字体颜色
                 renderer.setBaseItemLabelPaint(Color.red);
		 //默认的数字显示在柱子中，通过如下两句可调整数字的显示 
		 //注意：此句很关键，若无此句，那数字的显示会被覆盖
		 //renderer.setBasePositiveItemLabelPosition(new ItemLabelPosition(ItemLabelAnchor.OUTSIDE12, TextAnchor.BASELINE_LEFT)); 
		 renderer.setItemLabelAnchorOffset(0.5D); 
		 //设置每个柱子之间的距离 
		 renderer.setItemMargin(0.05); 
		 //设置数值为0时柱子的长度
		 renderer.setMinimumBarLength(1);
		//使用我们设计的效果
		 plot.setRenderer(renderer); 
		if(chart!=null){
			ChartUtilities.writeChartAsJPEG(response.getOutputStream(), 1f, chart,550, 350,null);
		}
	}
	/**
	 * 柱状图
	 * @return
	 */
	private CategoryDataset imageTypeHis(){
		DefaultCategoryDataset dataset = new DefaultCategoryDataset(); 
		// row keys...
	      String series1 = "试算";
	      String series2 = "转投保";

	      // column keys...
	      String category1 = "一月份";
	      String category2 = "二月份";
	      String category3 = "三月份";
	      String category4 = "四月份";
	      String category5 = "五月份";
	      //第一根柱子
	      //一月份
	      dataset.addValue(0, series1, category1);
	      //二月份
	      dataset.addValue(40, series1, category2);
	      //三月份
	      dataset.addValue(30, series1, category3);
	      //四月份
	      dataset.addValue(50, series1, category4);
	      //五月份
	      dataset.addValue(50, series1, category5);
	      //第二根柱子
	      dataset.addValue(55, series2, category1);
	      dataset.addValue(78, series2, category2);
	      dataset.addValue(60, series2, category3);
	      dataset.addValue(80, series2, category4);
	      dataset.addValue(40, series2, category5);
		return dataset;
	}
}

哦，对了，你还得引入两个jar包，我用的是：jcommon-1.0.16.jar、jfreechart-1.0.13.jar。最后，在web.xml中对此servlet进行配置即可！！！
可是，运行之后却有个问题，图片居然不能显示，效果如图：

可是，直接通过URL访问却能够显示图片，所以，这肯定不是柱形图没制作成功的原因。纠结许久，究其原因可能就是柱形图形成了，只是可能没有传递到JSP中，所以，应该是路径有问题。最后，加上了下面这句话，就大功告成了！

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

然后，再引入：

<base href="<%=basePath%>">

切记切记啊！！！

同时你也可以通过J2SE来实现柱形图，在此就不展开讨论了，有兴趣的朋友，可以去下载。里面包含了许多JFreeChart资料，还有JFreeChart的源码，如图：

希望对大家有帮助！！！

最后，再分享一个通过JS绘制图表的网址：http://www.oschina.net/news/26702/awesome-javascript-plugins?from=20120318