Index.jsp代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My First FusionCharts</title>
</head>
<body bgcolor="#ffffff">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="900" height="300" id="Column3D" >
<param name="movie" value="FusionCharts/Column3D.swf" />
<param name="FlashVars" value="&dataURL=Data/Data.xml">
<param name="quality" value="high" />
<embed src="FusionCharts/Column3D.swf" flashVars="&dataURL= Data/Data.xml" quality="high" width="900" height="300" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
只用了解标记的参数就可以了。其中Column3D.swf是显示flash需要用到的文件,在Fusion Charts的资源包中,Data.xml是flash显示数据的数据源。
要导入的文件:
Data.xml文件如下:
<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
<set label='January' value='17400' />
<set label='February' value='19800' />
<set label='March' value='21800' />
<set label='April' value='23800' />
<set label='May' value='29600' />
<set label='June' value='27600' />
<set label='July' value='31800' />
<set label='August' value='39700' />
<set label='September' value='37800' />
<set label='October' value='21900' />
<set label='November' value='32900' />
<set label='December' value='39800' />
</chart>
向项目中加入以上代码后生成的flash报表如下:
2.示例二
Index2.jsp代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My First FusionCharts</title>
<script language="JavaScript" src="FusionCharts/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="chartdiv" align="center">
<script type="text/javascript">
var chart = new FusionCharts("FusionCharts/Bar2D.swf", "ChartId", "500", "350", "0", "0");
chart.setDataURL("Data/Data2.xml");
chart.render("chartdiv");
</script>
</div>
</body>
</html>
Data2.xml如下:
<chart caption="zjshuai" xAxisName="Month" yAxisName="Units" showValues="0" decimals="0" formatNumberScale="0" chartRightMargin="30">
<set label="Jan" value="462" />
<set label="Feb" value="857" />
<set label="Mar" value="671" />
<set label="Apr" value="494" />
<set label="May" value="761" />
<set label="Jun" value="960" />
<set label="Jul" value="629" />
<set label="Aug" value="622" />
<set label="Sep" value="376" />
<set label="Oct" value="494" />
<set label="Nov" value="761" />
<set label="Dec" value="960" />
</chart>
生成的flash报表如下:
//myChart.setDataXML(strChart);
myChart.render("chartdiv");
</script></td>
</tr>
<tr>
<td align="center">
<%
String strChart = "";
strChart += "<?xml version='1.0' encoding= 'gb2312'?>";
strChart += "<chart dateFormat='yyyy/mm/dd'ganttWidthPercent='85' canvasBorderColor='999999' canvasBorderThickness='0' gridBorderColor='4567aa' gridBorderAlpha='20' showSlackAsFill='1' slackFillColor='eeeeee' ganttPaneDuration='30' ganttPaneDurationUnit='d'>";
strChart += "<categories bgColor='ffffff' fontColor='1288dd' fontSize='12' align='center'>";
strChart += "<category start='2011/10/17' end='2011/11/01' label='October'/>";
strChart += "<category start='2011/11/01' end='2011/11/05' label='November'/>";
strChart += "</categories>";
strChart += "<categories bgColor='ffffff' fontColor='1288dd' isBold='0'>";
strChart += "<category start='2011/10/17' end='2011/10/18' label='17' />";
strChart += "<category start='2011/10/18' end='2011/10/19' label='18' />";
strChart += "<category start='2011/10/19' end='2011/10/20' label='19' />";
strChart += "<category start='2011/10/20' end='2011/10/21' label='20' />";
strChart += "<category start='2011/10/21' end='2011/10/22' label='21' />";
strChart += "<category start='2011/10/22' end='2011/10/23' label='22' />";
strChart += "<category start='2011/10/23' end='2011/10/24' label='23' />";
strChart += "<category start='2011/10/24' end='2011/10/25' label='24' />";
strChart += "<category start='2011/10/25' end='2011/10/26' label='25' />";
strChart += "<category start='2011/10/26' end='2011/10/27' label='26' />";
strChart += "<category start='2011/10/27' end='2011/10/28' label='27' />";
strChart += "<category start='2011/10/28' end='2011/10/29' label='28' />";
strChart += "<category start='2011/10/29' end='2011/10/30' label='29' />";
strChart += "<category start='2011/10/30' end='2011/10/31' label='30' />";
strChart += "<category start='2011/10/31' end='2011/11/01' label='31' />";
strChart += "<category start='2011/11/01' end='2011/11/02' label='1' />";
strChart += "<category start='2011/11/02' end='2011/11/03' label='2' />";
strChart += "<category start='2011/11/03' end='2011/11/04' label='3' />";
strChart += "<category start='2011/11/04' end='2011/11/05' label='4' />";
strChart += "</categories>";
strChart += "<processes headerText='里程碑' fontColor='000000' fontSize='12' isAnimated='1' bgColor='4567aa' headerVAlign='middle' headerAlign='left' headerbgColor='4567aa' headerFontColor='ffffff' headerFontSize='12' align='left' isBold='1' bgAlpha='25'>";
strChart += "<process label='张三' id='1134' />";
strChart += "<process label='李四' id='1135' />";
strChart += "</processes>";
strChart += "<dataTable showProcessName='1' nameAlign='left' fontColor='000000' fontSize='10' vAlign='right' align='center' headerVAlign='bottom' headerAlign='left' headerbgColor='4567aa' headerFontColor='ffffff' headerFontSize='10'>";
strChart += "</dataTable>";
strChart += "<tasks >";
strChart += "<task label='Plan' toolText='Progress:100.00%;TaskTime:2011/10/18To2011/10/19' processId='1134' start='2011/10/18' end='2011/10/20' id='1134-1' color='ffc20e' height='32%' topPadding='12%'percentComplete='100.00' /> ";
strChart += "<task label='Actual' toolText='Progress:10.0%;TaskTime:2011/10/18To2011/10/25' processId='1134' start='2011/10/18' end='2011/10/26' id='1134' color='ff938e'alpha='100' topPadding='56%' height='32%'percentComplete='10.0' />";
strChart += "<task label='Plan' toolText='Progress:100.00%;TaskTime:2011/10/18To2011/10/19' processId='1135' start='2011/10/18' end='2011/10/20' id='1135-1' color='ffc20e' height='32%' topPadding='12%'percentComplete='100.00' />";
strChart += "<task label='Actual' toolText='Progress:100.0%;TaskTime:2011/10/18To2011/10/18' processId='1135' start='2011/10/18' end='2011/10/19' id='1135' color='92d5ff' alpha='100' topPadding='56%' height='32%' percentComplete='100.0' /> ";
strChart += "</tasks>";
strChart += "<legend>";
strChart += "<item label='Plan' color='ffc20e' />";
strChart += "<item label='Normal' color='#bdebac' />";
strChart += "<item label='Advance' color='#92d5ff' />";
strChart += "<item label='Lag' color='#ff938e' />";
strChart += "</legend>";
strChart += "<styles>";
strChart += "<definition>";
strChart += "<style type='Font' name='legendFont' size='12' />";
strChart += "</definition>";
strChart += "<application>";
strChart += "<apply toObject='LEGEND' styles='legendFont' />";
strChart += "</application>";
strChart += "</styles>";
strChart += "</chart>";
FusionChartsCreator fusionChartsCreator = new FusionChartsCreator();
fusionChartsCreator.strToXml(strChart);
//String chartHTMLCode=FusionChartsCreator.createChartHTML("FusionCharts/Gantt.swf", "", strChart, "myFirst", 800, 300, false);
%>
<%--
<%=chartHTMLCode%>
--%>
<div id="chartdiv1" align="center" class="text">
</div>
<script type="text/javascript">
var myChart = new FusionCharts("FusionCharts/Gantt.swf", "myChartId", "800", "300", "0", "0");
myChart.setDataURL("Data/Gantt1.xml");
//myChart.setDataXML(strChart);
myChart.render("chartdiv1");
</script>
</td>
</tr>
</table>
</body>
</html>
----------------------------------------------------------
附:
一个学习fusioncharts很好的blog
http://blog.sina.com.cn/s/articlelist_1463420203_7_1.html
-----------------------
附件为一些swf文件,相对比较全(gallery.rar为甘特图的swf文件)
示例是随便以前写的,不怎么好,但是附件可能会对你有帮助!
相关推荐
FusionCharts是一款强大的数据可视化工具,专为生成各种报表而设计。它以其便捷性、高效性和灵活性著称,使得创建专业级别的报表变得轻而易举。这款工具支持多种图表类型,能够满足用户在数据分析和展示时的各种需求...
标题中的"FusionCharts.dll"文件是FusionCharts Free软件的核心组件,这是一款强大的图表生成工具,专门用于在Web页面上创建交互式、视觉效果丰富的图表。这个控件以单一的动态链接库(DLL)文件形式提供,使得集成...
FusionCharts是一种制图组件,可以帮您为您的Web应用创建交互式的、数据驱动的图表、仪表盘和地图。它具有智能化、用户友好和创新等特点,可以将单调的数据转化为栩栩如生的图像,从而使您的Web应用更加的生动。它...
FusionCharts是一款强大的JavaScript图表库,它允许开发者创建交互式且富有视觉吸引力的数据可视化图表。在Web应用中,数据图表的展示是传达信息、分析数据和做出决策的关键工具。FusionCharts支持多种图表类型,...
FusionCharts是一款强大的JavaScript图表库,它提供了丰富的图表类型和高度自定义的选项,用于创建交互式的、数据可视化效果。本压缩包中的“fusionCharts导出相关资料打包”集成了关于如何实现FusionCharts图表自动...
FusionCharts是一款强大的数据可视化工具,专为创建交互式、丰富多彩的图表而设计。它广泛应用于Web应用程序中,帮助用户以图形方式展示复杂的数据。在深入探讨FusionCharts的知识点之前,先简单介绍一下标题和描述...
FusionCharts是一款强大的JavaScript图表库,它提供了丰富的可视化图表类型,用于展示各种复杂的数据。在本文中,我们将探讨如何利用FusionCharts实现下钻功能以及单击图表节点调用JavaScript函数。 1. **从JSONURL...
**FusionCharts XT Evaluation** 是一个强大的数据可视化工具,专为开发者设计,便于构建互动式、丰富多彩的图表。它能够将结构化的数据,无论是JSON格式还是XML格式,转化为直观易懂的图形,如饼状图、条形图、折线...
FusionCharts Free V2.1是一款专为网页开发者设计的免费Flash图形报表工具,它能够帮助用户轻松创建出美观、互动且数据丰富的图表。这款软件以其出色的数据可视化能力,为网站和应用程序添加了动态和直观的展示效果...
FusionCharts是InfoSoft Global公司的一个产品,InfoSoft Global 公司是专业的Flash图形方案提供商,他们还有几款其他的,基于Flash技术的产品,都非常的漂亮。 FusionCharts free 是一个跨平台,跨浏览器的flash...
FusionCharts是一款强大的图表库,它能够帮助开发者在网页中创建出丰富多样的交互式图表。这个库通过结合Flash技术和JavaScript来实现图表的渲染和功能交互。以下将详细阐述FusionCharts在网页呈现图表的过程: 1. ...
在IT领域,FusionCharts是一款强大的JavaScript图表库,它提供了丰富的图表类型,包括甘特图。甘特图是一种常用于项目管理和任务调度的图形表示工具,可以清晰地展示任务的开始时间、结束时间以及进度。在这个...
**FusionCharts完整资料集详解** FusionCharts是一款强大的JavaScript图表库,用于创建交互式的、丰富的数据可视化解决方案。本资料集全面涵盖了FusionCharts的各个方面,包括基础使用、实例演示、XML数据源生成、...
**FusionCharts ASP 类库详解** FusionCharts是一款强大的数据可视化工具,它使用Flash技术来创建交互式的图表和图形。在ASP(Active Server Pages)环境中,为了方便开发者集成FusionCharts,FusionCharts公司提供...
FusionCharts,则是一款功能丰富的JavaScript图表库,可以用于创建交互式且视觉效果丰富的图表。在这个例子中,我们将深入探讨如何在Spring MVC项目中集成并使用FusionCharts来展示从后台数据库获取的数据。 首先,...