日期:2014-05-16 浏览次数:20426 次
??? 图表是软件中,所必不可少的一项功能,图表开发是一种不可少的开发,现在有很多开源的报表开发组件,具体可以搜索一下,在实际开发中比较各个报表工具的优劣.?????? 最近经常会看到ADOBE公司的各种新技术革新,比如FLASH,FLEX等,今天我介绍一个免费的Flash图表开发工具,可以通过AdobeFlash实现数据的图表化,动态化以及相互交互。而且显示的效果非常美观,这是FLASH用矢量图形显示的原因.??????????????
??? FusionChart是一个简单易用的图表工具,使用它可以显示丰富的柱状图和曲线图,而且完全免费。使用FusionChart可以方便的生成漂亮的柱状图、曲线图等图标,显示直观、清晰。
?
??? 1:在JSClass目录里复制FusionCharts.js到你的项目
??? 2:在Charts目录里复制相应xxxx.swf到你的项目,看你自己要生成什么样的图形了,这里我选择的是FCF_Column3D.swf
??? 3:把相关的数据生成到一个jsp页面中,如(xx.jps),如果有中文,charset应为GBK,每种图形的数据格式有所不同,最好自己看看Gallery->Data里面xml的应格式的写法,因为我前面选择的是FCF_Column3D.swf,所以生成的格式就是Column3D.xml里头的格式了。
<%@ page language="java" contentType="text/xml; charset=GBK"%> <% String xmlStr = "<graph caption='我的第一个测试用例' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>" + "<set name='主月' value='462' color='AFD8F8' />" + "<set name='Feb' value='857' color='F6BD0F' />" + "<set name='Mar' value='671' color='8BBA00' />" + "<set name='Apr' value='494' color='FF8E46' />" + "<set name='May' value='761' color='008E8E' />" + "<set name='Jun' value='960' color='D64646' />" + "<set name='Jul' value='629' color='8E468E' />" + "<set name='Aug' value='622' color='588526' />" + "<set name='Sep' value='376' color='B3AA00' />" + "<set name='Oct' value='494' color='008ED6' />" + "<set name='Nov' value='761' color='9D080D' />" + "<set name='Dec' value='960' color='A186BE' />" + "</graph>"; out.write(xmlStr); %>
?
4:在你的页面上引入相应数据
<%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>Insert title here</title> <script language="JavaScript" src="js/FusionCharts.js"></script> </head> <body> <div id="chartDiv" align="center">First Chart Container Pie 3D</div> <script type="text/javascript"> var myChart1 = new FusionCharts("./FusionCharts/FCF_Column3D.swf", "myChartId", "600", "350"); myChart1.setDataURL("xx.jsp"); myChart1.render("chartDiv"); </script> </body> </html>
最后,大家可以在附件里找到这个图表工具相关的文件。