先贴张图片让大家看下效果吧:
最近项目中需要用到图表相关的功能点,在网上找了一下资料,总结如下:
图表框架: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