Jsp FusionChar开发应用

简介

    图表是软件中,所必不可少的一项功能,图表开发是一种不可少的开发,现在有很多开源的报表开发组件,具体可以搜索一下,在实际开发中比较各个报表工具的优劣.       最近经常会看到ADOBE公司的各种新技术革新,比如FLASH,FLEX等,今天我介绍一个免费的Flash图表开发工具,可以通过AdobeFlash实现数据的图表化,动态化以及相互交互。而且显示的效果非常美观,这是FLASH用矢量图形显示的原因.              

    FusionChart是一个简单易用的图表工具,使用它可以显示丰富的柱状图和曲线图,而且完全免费。使用FusionChart可以方便的生成漂亮的柱状图、曲线图等图标,显示直观、清晰。

 

Jsp FusionChar开发应用  


    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>

最后,大家可以在附件里找到这个图表工具相关的文件。

你可能感兴趣的:(JavaScript,jsp,xml,Flex,Flash)