针对项目中图表显示,在JFreeChart使用一段时间后,针对图表显示效果来看,flash图表流体美丽,视觉性好,界面友好性更强一些,因此在一些flash组件中选择,最后尝试使用FusionCharts free,作为项目插件。
初识FusionCharts free
FusionCharts free 是一个跨平台,跨浏览器的flash图表组件解决方案,可以用来制作数据动画图表,其中动画效果用的是Adobe Flash 8 (原Macromedia Flash的)制作的flash ,FusionCharts可用于任何网页的脚本语言,类似于HTML , .NET,ASP , JSP技术的, PHP , ColdFusion等,提供互动性和强大的图表。使用XML作为其数据接口,这些XML文件是用虚拟方式生成和传递到FusionCharts, FusionCharts充分利用流体美丽的Flash创建紧凑,互动性和视觉逮捕图表。而且FusionCharts将图表与AJAX应用程序或JavaScript模块,可以随时更新海图在客户端,调用JavaScript函数的热点链接,或要求作出动态XML数据到服务器不涉及任何页面刷新。
FusionCharts Free优点如下:
1.动画可交互的图表
2.简单但强大的Javascript集成
3.无需安装
4.简单易用
5.与服务器端语言独立(或说无关)
6.减少服务器端负荷
7.多种图表类型支持
8.完全免费(注明:FusionCharts free 为免费版本,另外Funsion还有收费商用版本,两者区别显示在文章最后。)
其中易于使用可体现在下面两方面:
在服务器端,使用FusionCharts ,不必安装任何在服务器上。需要做的只是复制粘贴的SWF文件(核心文件FusionCharts )到服务器!
在客户端:可以运行在任何服务器和反对任何脚本语言,查看图表,用户只需要安装Adobe Flash Player 8。
FusionCharts大概的执行流程:
1.我们先从数据库取数据;
2.用代码做一个生成xml的函数,把数据生成xml;
3.用一段js读取xml,送到FusionCharts,生成统计图表。
FusionCharts在java中应用,具体为折线图:
(具体环境,java中使用structs1框架,将22个swf图表模板文件放在目录<%=path%>/js/flashChart/Charts下,将/FusionCharts.js放在目录<%=path%>/js/flashChart)
public ActionForward Test(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
StringBuffer strXml = new StringBuffer();
strXml.append("<graph baseFont='SunSim' baseFontSize='12' caption='" +
"折线图" +"' subcaption='" + "" + "' " +
"yAxisMinValue='" + (-maxValue) + "' yAxisMaxValue='" + maxValue + "' " +
"xAxisName='" + "年份" + "' yAxisName='" + "数字" + "' hovercapbg='FFECAA' " +
"hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='" + 2 + "' " +
"showValues='" + 1 + "' numdivlines='10' numVdivlines='0' " +
"showNames='" + 1 + "' rotateNames='" + 1 + "' " +
"rotateYAxisName='0' showAlternateHGridColor='1'>");
//填数 name-x值,value-y值,hoverText为鼠标放上去显示内容
for (int i=10;i>-1;i--) {
strXml.append("<set name='" + (2013-i) + "' value='" + i + "' hoverText='x,y,"+(analysis_year_int-i)+"' color='AFD8F8' />");
}
}
strXml.append("</graph>");
String str = strXml.toString();
request.setAttribute("str", str);
return mapping.findForward("success");
}
对应的jsp页面:先引用FusionCharts.js
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>hello chart</title>
<script language="JavaScript" src='<%=path%>/js/flashChart/FusionCharts.js '></script>
</head>
<body>
<form >
<div id="chartdiv" align="center">
<script type="text/javascript">
var chart = new FusionCharts('<%=path%>/js/flashChart/Charts/FCF_Line.swf', "ChartId", "600", "400");
chart.setDataXML("${str}");
chart.render('chartdiv');
</script>
</div>
</form>
</body>
</html>
最后
fusionCharts free和fusionCharts正式版之间的区别
1. 能绘制的图形种类不同。 free支持22种 而正式版是很多。
2. free不支持图片导出。
3. 正式版和free版使用的标签不一样,正式版使用<chart></chart>或<graph></graph>,而free版使用<graph></graph>,功能更局限,chart标签很多功能不能用在graph中。
参考资料:
free和正式版区别:http://www.fusioncharts.com/goodies/fusioncharts-free/compare/
fusionCharts free下载:http://www.fusioncharts.com/goodies/fusioncharts-free/