FusionCharts free 是一个跨平台，跨浏览器的flash图表组件解决方案，能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。你不需要知道任何关于flash编程的知识，你只需要知道你所用的编程语言就可以了，最近项目里要用到图表工具，本来是打算用struts2的Jfreechart来实现，但是需要写太多代码，本人不喜欢，就在网上搜了很多相关出图的工具和方法，最终选择了FusionChart Free！FusionCharts Free是通过xml作为图表的数据来源，我这里写了两种把xml当做数据提供者的方式，一种是写死的xml数据文件，另一种是在页面通过数组拼凑的xml数据，因为很多数据都是动态的不可能写死在xml文件里，这也不便于数据操作。
下载FusionCharts Free
SWF文件（创建图形主要靠它们了）
所有的SWF文件（共22个）都在FusionChartsFree>Charts文件夹。如果你需要在你的web应用里创建图形，那么就把这些SWF文件都拷到你的应用下面。
FusionCharts JavaScript文件
FusionCharts JavaScript文件放在FusionChartsFree>JSClass文件夹。这些文件能够帮你用一种友好的方式把图形嵌入到html页面。
示例代码
所有的代码都放在FusionChartsFree>Code文件夹。
图形例子
我们创建了一些图形例子，放在FusionChartsFree>Gallery文件夹。你也可以通过文档左边的菜单Sample Charts来访问它。
文档
文档就放在FusionChartsFree>Contents文件夹，你可以直接点击FusionChartsFree下面的index.html来访问。
示例1：写死的xml文件
第一步：先建立一个文件夹chart，把你需要的创建的图表的swf都放到chart文件里
第二步：编写xml数据文件data.xml，内容如下：
<graph caption="Monthly Sales Summary" subcaption="For the year 2004" xAxisName="Month" yAxisMinValue="15000" yAxisName="Sales" decimalPrecision="0" formatNumberScale="0" numberPrefix="$" showNames="1" showValues="0" showAlternateHGridColor="1" AlternateHGridColor="ff5904" divLineColor="ff5904" divLineAlpha="20" alternateHGridAlpha="5">
<set label="Jan" value="17400" hoverText="January" />
<set name="Feb" value="19800" hoverText="February" />
<set name="Mar" value="21800" hoverText="March" />
<set name="Apr" value="23800" hoverText="April" />
<set name="May" value="29600" hoverText="May" />
<set name="Jun" value="27600" hoverText="June" />
<set name="Jul" value="31800" hoverText="July" />
<set name="Aug" value="39700" hoverText="August" />
<set name="Sep" value="37800" hoverText="September" />
<set name="Oct" value="21900" hoverText="October" />
<set name="Nov" value="32900" hoverText="November" />
<set name="Dec" value="39800" hoverText="December" />
</graph>
第三步：创建html页面Demo.html用来显示
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>第一个Flash图表页面</title>
<!-- 引入FusionCharts 需要的JS脚本文件 -->
<script language="JavaScript" src="chart/FusionCharts.js"></script>
</head>
<body>
<div id="chartDiv" align="center">First Chart Container Line 3D</div>
<script type="text/javascript">
var myChart1 = new FusionCharts("chart/FCF_Line.swf", "myChartId", "600", "350");
myChart1.setDataURL("Data.xml");
myChart1.render("chartDiv");
</script>
</body>
</html>
效果：
示例2：结合jsp实现，由于其他步骤跟示例1基本一样，就只看重点了，也就是xml数据的获取
text.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ page import="com.opensymphony.xwork2.ActionContext" %>
<%@ page import="java.util.List" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHR健康信息中心</title>
<script>
if(navigator.userAgent.indexOf("MSIE")>0){
if(navigator.userAgent.indexOf("MSIE 6.0")>0){
document.write('<link rel="stylesheet" type="text/css" href="css/main_ie6.css" />',
'<link rel="stylesheet" type="text/css" href="css/view_table_ie6.css" />')
}
if(navigator.userAgent.indexOf("MSIE 7.0")>0){
document.write('<link rel="stylesheet" type="text/css" href="css/main_ie6.css" />',
'<link rel="stylesheet" type="text/css" href="css/view_table_ie6.css" />') }
if(navigator.userAgent.indexOf("MSIE 8.0")>0){
document.write('<link rel="stylesheet" type="text/css" href="css/main_ie8.css" />',
'<link rel="stylesheet" type="text/css" href="css/view_table_ie8.css" />')
}
}else{
document.write('<link rel="stylesheet" type="text/css" href="css/main.css" />',
'<link rel="stylesheet" type="text/css" href="css/view_table.css" />' )
}
</script>
<script LANGUAGE="javascript">
function openwin() {
window.open ("tendreport_print.jsp", "newwindow", "height=600, width=750, toolbar=no, menubar=no, scrollbars=auto, resizable=yes,location=no,top=40,left=120, , status=no")
}
</script>
<script language="JavaScript" src="FusionCharts/FusionCharts.js"></script>
</head>
<body>
<div id="top">
<jsp:include page="webtop.jsp"></jsp:include>
</div> <!--top END-->
<div class="clear"></div>
<div class="cross"></div>
<div id="content">
<div id="left">
<jsp:include page="selectbox_account.jsp"></jsp:include>
</div> <!-- left End! -->
<div id="right">
<div class="location">您现在的位置: <a href="pageview.action">报表管理</a></div>
<div class="right_table">
<div id="account_tab"><p>报表管理</p></div>
<div class="search_y">
<li><input type="button" onClick="openwin();" value="打印预览" /></li>
</div>
<form action="sumbytendwithfloor.action" method="post">
<table id="mytable" class="sortable_y" cellspacing="0" >
<thead><tr>
<th class="nosort" colspan="2" width="70" height="50">楼层:
<select name="floor" id="floor" >
<option value="1">1楼</option>
<option value="2">2楼</option>
<option value="3">3楼</option>
<option value="4">4楼</option>
<option value="5">5楼</option>
<option value="6">6楼</option>
<option value="7">7楼</option>
<option value="8">8楼</option>
</select> 护理级别
<select name="tend" id="tend" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="0">全部</option>
</select>
</th>
<th class="nosort" width="60" height="50"><input type="submit" value="搜索"/></th>
</tr></thead>
<thead><tr>
<th class="nosort" width="60">楼层</th>
<th class="nosort" width="70">护理级别</th>
<th class="nosort" width="70">人数</th>
</tr></thead>
<tbody>
<s:if test="#session.choice==0">
<%
String caption="护理级别统计报表";
StringBuffer sb=new StringBuffer();
sb.append("<graph caption='"+caption+"' numberSuffix='人' showNames='1' decimalPrecision='0' baseFontSize='12'>");
String[][] tendreport =(String[][])ActionContext.getContext().getSession().get("tendreport");
for(int i=0;i<tendreport.length;i++)
{
String[] line = tendreport[i];
String tendtype ="护理级别"+line[1].toString();
sb.append("<set name='"+tendtype+"' value='"+line[2].toString()+"' />");
%>
<tr>
<%
for(int j=0;j<line.length;j++)
{
%>
<td><%=line[j].toString() %></td>
<% } %>
</tr>
<% }
sb.append("</graph>");
String Dataxml=sb.toString();
%>
<tr>
<td colspan="3">
<div id="chartDiv" align="center"> Chart Container Pie 2D</div>
<script type="text/javascript">
var xmlData ="<%=Dataxml%>";
var myChart1 = new FusionCharts("FusionCharts/FCF_Pie3D.swf", "myChartId", "350", "300");
myChart1.setDataXML(xmlData);
myChart1.render("chartDiv");
</script>
</td>
</tr>
</s:if>
</tbody>
</table>
</form>
</div><!-- right_table END -->
</div><!-- right END -->
</div><!--content END-->
<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>
这里是从session里先取出tendreport二维数组，然后再取出值放到特定位置，拼凑成xml文件格式的字符串xmlData，在通过setDataXML(xmlData)最终得到数据，生成图表.
此处效果如图：
2011-06-08 15:59:38
1203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
