下载文档原格式
fusioncharts总结FusionCharts学习总结一、简介FusionCharts 是InfoSoft Global 公司的一个产品，InfoSoft Global 公司是专业的Flash 图形方案提供商，他们还有几款其他的，基于Flash 技术的产品，都非常的漂亮。
FusionCharts Free 则是FusionCharts 提供的一个免费版本，虽然免费，功能依然强大，图形类型依然丰富。
FusionCharts free 是一个跨平台，跨浏览器的flash 图表组件解决方案，能够被, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单HTML 页面甚至PPT 调用。
FusionCharts free新版本中所做的改动：增加了使用jsp 和Ruby on Rails 来集成FusionCharts 的代码和文档。
FusionCharts DOM 更加容易地把图表加载到页面上。
修改了.Net 的使用代码和文档。
增加了新的PHP API ,并修复了一些BUG。
修改了FusionCharts.js ，以便可以支持双引号。
增加了在FusionCharts 使用UTF-8 编码的示例。
二、报表图形分类1. 3D/2D柱形图2. 曲线图3. 3D/2D饼形图和环形图4. 区域图5. 堆栈图6. 联合图7. 蜡烛图8. 漏斗图9. 甘特图三、报表图形对应的swf文件分类四、安装使用1. 在web项目目录下新建一个文件夹( 如FusionCharts)，并把所有的SWF 文件都拷贝到这个文件夹里。
2. 在页面导入FusionCharts.js文件，如：<script type="text/javascript" src="FusionCharts.js"></script>3. js加载数据生成报表(有两种方法)方法一：xml文件引用法(1)定义一个固定格式的xml文件（以Data.xml为例）Date.xml的内容如下：(2) js加载方法，代码如下：方法二：字符串加载法（1）定义一个有固定格式的字符串，即可以将上述xml文件组合成字符串（2）js加载方法，代码如下：解析：操作步骤：<1>建立对象：用四个参数建立了一个FusionCharts对象，var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");第一个参数是SWF文件的地址。
fusionCharts真实导出图片fusionCharts导出图片请记住以下步骤：1：下载相关文件要想导出图片必须下载fusionCharts 3.1以上的破解版，除了自己需要的swf 文件外(包括FCExporter.swf) 还要两个js文件：相信各位应该很清楚FCExporter.swf和这两个js的用途，在这我就不做多解释了！将两个js导入jsp页面：2：生成报表实现报表很简单，只需要一下几行代码即可：columnChart = new FusionCharts("FCF_Column3D.swf","Report", "400", "300", "0", "1");//其他参数不做解释，最后一个参数设置为1 表示非debug模式显示报表columnChart.setDataXML(data);//data为数据源加载数据columnChart.render("ReportDiv");//需要显示在哪个div里绑定div的id属性OK各位，当说到这里的时候，我要插入一点，fusionCharts加载数据有三种方式：Xml文件格式加载，Javascript的json格式加载，字符串拼凑加载。
但不管哪一种加载方式，最终的长相都是如下图：不过因为我是用java后台查询数据的，所以我这里讲述的是字符串拼凑加载方法。
3：右键导出当你的界面能看到超炫的报表了，而且确保是fusionCharts 3.1以上的版本，此时您在报表上右键是绝对可以看到导出菜单的：呵呵，到了这里，奉劝各位别高兴太早！尽管你现在导出jpg、png、或pdf 都没用的，根本就没导出。
别急，我们回到最开始的数据源代码，想要导出图片必须加上以下参数：exportEnabled='1'(开启导出模式)exportAtClient='1'(确定客户端导出)exportHandler='fcExporter1' (对应前台导出处理程序的标识，网络说是写一个jsp、asp或php的路径，那是服务端导出，在这里不用) exportDialogMessage='正在生成,请稍候...' (导出时的提示语) exportFormats='JPG=生成JPG图片|PDF=生成PDF文件'(右键菜单格式化成中文)。
FusionCharts free 使用手册一、概述FusionCharts是InfoSoft Global公司的一个产品，InfoSoft Global 公司是专业的Flash图形方案提供商，他们还有几款其他的,基于Flash技术的产品，都非常的漂亮.FusionCharts Free则是FusionCharts提供的一个免费版本,虽然免费，功能依然强大，图形类型依然丰富.不得不感叹技术发展的真快，99年的时候，flash刚刚在互联网上流行，那时还只是一个简单的动画软件，编程能力有限。
但现在flash几乎无所不能了，图形报表则是它大展手脚的一个领域。
FusionCharts free 是一个跨平台，跨浏览器的flash图表组件解决方案，能够被 ASP。
NET， ASP, PHP, JSP， ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。
你不需要知道任何关于flash编程的知识,你只需要知道你所用的编程语言就可以了.FusionCharts free 目前最新版本是v2.1,主要做了以下改动：•增加了使用jsp和Ruby on Rails来集成FusionCharts的代码和文档。
•F usionCharts DOM更加容易地把图表加载到你的页面上。
•修改了.Net的使用代码和文档。
•增加了新的PHP API ,并修复了一些BUG.•修改了FusionCharts.js ，以便可以支持双引号。
(那就是说以前不支持？）•增加了在FusionCharts使用UTF-8编码的示例。
FusionCharts到底能做什么呢？下面就给大家展示一下。
3D/2D 柱形图图片1图片2 曲线图图片3 图片43D/2D饼图、环图图片5图片6 区域图图片7图片8 堆栈图图片9 图片10联合图图片11图片12 蜡烛图图片13图片14 漏斗图图片15 图片16甘特图图片17图片18看了这么多漂亮的图形以后，是不是有点感到兴奋呢?如果把这么漂亮专业的图形放到用户面前，相信他们也会满意的。
当你利用FusionCharts创建图表时报错，原因是多方面的。
本文总结了报错的多种原因及调试方法供大家参考，希望对大家有帮助。
>>>FusionCharts使用教程如果你无法看到任何图表：如果浏览器中的进度条一直加载，或者右键菜单显示"Movie not loaded"，请检查下列内容：1、是否已将SWF图表和JavaScript文件(FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js和jquery.min.js)复制到所需文件夹中？2、代码中是否为图表提供了正确的名称和路径？如果你获取"Error in Loading Data."提示信息，请检查下列内容：1、代码中是否提供了正确的XML/JSON数据路径2、将Data URL粘贴到浏览器中，查看浏览器中是否返回一个有效的XML/JSON。
若没有脚本或者超时错误，则返回一个有效的XML / JSON。
此外，请确保XML/JSON 没有和HTML 内容混合在一起。
数据源提供器页返回一个整洁的XML / JSON - 甚至没有HTML<HEAD>或<body>标签。
3、XML/JSON文件命名是否正确，是否包含了.txt扩展名。
4、如果你使用的是文件系统名需要区分大小写的操作系统，请检查你的XML/JSON名称和图表文件。
5、检查你的图表文件(SWF和JavaScript)和XML/JSON 数据是否在同一个域名或相同的子域名。
因为无法进行跨域名的数据加载。
如果你获取"Invalid Data."提示信息，这意味着，XML/JSON数据格式不正确。
常见错误如下：1、XML/JSON中存在重复的属性。
2、标签不一致。
<chart>的结尾标签应该为</chart>，不是</Chart>或者</CHART>。
FusionCharts图表控件中文版使用手册根据网上资料编辑以及个人经验并汇总前言 (3)先谈谈我对FUSIONCHARTS的看法： (3)一、构成FUSION C HARTS的三要素：SWF、DATA.XML、承载图表的载体 (3)二、对于我们还未使用的功能：图表转换成图片或者PDF导出、热点链接 (3)三、重点 (4)FUSIONCHARTS的基本知识部分： (4)一、SWF动画文件 (4)二、XML数据文件 (4)三、HTML（当然也可以使用JSP）嵌入CHARTS文件 (5)四、结合JAVASCRIPT 的应用： (5)五、热点链接：LINK=’’ (5)六、图表数据导出 (6)七、图表导出为PDF或者图片（JPEG和PNG）形式 (6)八、中文编码解决方法： (7)附注FUSION C HARTS详细属性： (7)1、边框及整个背景的属性： (8)2、图表背景属性： (8)3、外部引入LOGO: (9)4、图表名称和轴属性： (9)5、data plot属性 (9)6、数据横纵轴属性 (10)7、图表上的数据显示 (10)8、图表调色板 (10)9、横轴坐标最大值、最小值属性 (10)10、图表内部的div线相关属性 (11)11、图表内部垂直div线的相关属性 (11)12、Zero plan相关属性 (11)13、Anchors相关属性（针对线图） (11)14、tool-tip 属性 (11)15、padding属性 (12)16、数据格式相关属性 (12)17、legend相关属性 (12)18、3D图表属性 (13)19、自定义菜单属性 (13)20、趋势线： (13)21、Styles属性：（eg）定义自定义效果属性，然后在一个对象上进行使用。
(14)按照编程xml构造结构分：（只列举出了几种主要属性，主要用于xmlBuiler） (16)前言先谈谈我对fusionCharts的看法：一、构成fusionCharts的三要素：swf、data.xml、承载图表的载体1、Swf：按照你所设计的图表类型加载相应的.swf文件到你的工程即可(eg：若你想生成一张二维柱状图，那么在你的工程里就必须包含Column2D.swf文件)2、Data.xml：方法一：直接用data.jsp文件替代data.xml文件，写法格式同xml。
FusionCharts free 使用手册一、概述FusionCharts是InfoSoft Global公司的一个产品，InfoSoft Global 公司是专业的Flash图形方案提供商，他们还有几款其他的，基于Flash技术的产品，都非常的漂亮。
FusionCharts Free则是FusionCharts提供的一个免费版本，虽然免费，功能依然强大，图形类型依然丰富。
不得不感叹技术发展的真快，99年的时候，flash刚刚在互联网上流行，那时还只是一个简单的动画软件，编程能力有限。
但现在flash几乎无所不能了，图形报表则是它大展手脚的一个领域。
FusionCharts free 是一个跨平台，跨浏览器的flash图表组件解决方案，能够被 , ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。
你不需要知道任何关于flash编程的知识，你只需要知道你所用的编程语言就可以了。
FusionCharts free 目前最新版本是v2.1，主要做了以下改动：∙增加了使用jsp和Ruby on Rails来集成FusionCharts的代码和文档。
∙F usionCharts DOM更加容易地把图表加载到你的页面上。
∙修改了.Net的使用代码和文档。
∙增加了新的PHP API ,并修复了一些BUG。
∙修改了FusionCharts.js ，以便可以支持双引号。
（那就是说以前不支持？）∙增加了在FusionCharts使用UTF-8编码的示例。
FusionCharts到底能做什么呢？下面就给大家展示一下。
3D/2D 柱形图图片1图片2 曲线图图片3图片43D/2D饼图、环图图片5图片6 区域图图片7图片8 堆栈图图片9图片10联合图图片11图片12 蜡烛图图片13图片14 漏斗图图片15图片16甘特图图片17图片18看了这么多漂亮的图形以后，是不是有点感到兴奋呢？如果把这么漂亮专业的图形放到用户面前，相信他们也会满意的。
FusionCharts使用说明一、FusionCharts简介FusionCharts是InfoSoft Global的一个产品，InfoSoft Global 公司是专业的Flash图形方案提供商，他们还有几款其他的，基于Flash技术的产品，都非常的漂亮。
FusionCharts free 是一个跨平台，跨浏览器的flash图表组件解决方案，能够被, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单HTML 页面甚至PPT调用。
你不需要知道任何关于flash编程的知识，你只需要知道你所用的编程语言就可以了。
旗下共有如下产品：FusionCharts V3：主打产品，包含44种常用的报表图形；FusionCharts FREE：免费，包含22中常用的报表图形；FusionWidgets V3：小部件，包括仪表盘，刻度尺等；FusionMaps V3：地图；PowerCharts V3：预览版，提供更强大图形展示功能，但可能存在一定的缺陷；二、FusionCharts商用性说明据官方网站介绍，目前FusionCharts在全球110个国家中有超过12000个客户以及250000用户，其中不乏微软、谷歌、IBM等知名IT厂商。
三、FusionCharts使用说明安装：在当前工程中新建一个文件夹，命名为：FusionCharts，压缩包中的swf文件、js文件全部放入该文件夹，安装完成（以上为官方介绍的方法，实际使用中，可以将js文件放入js文件夹，swf文件单独建一个swf的文件夹即可）。
原理：官方提供了44中不同的图形种类，每种图形以swf文件的形式提供。
另外官方提供了一组js脚本文件，通过这些脚本文件可以将按照规定格式的xml数据传递给相应的swf文件，从而展示不同的图表。
具体xml格式见fusioncharts XML api。
使用：使用FusionCharts进行绘制报表最重要的环节就是如何把XML数据传送给FusionCharts。
Setting up the charts for use在我们的代码中，我们已经使用在Download Package > Code > FusionCharts文件夹中包含的图表。
当你运行你的样品，你需要确保的SWF文件，在适当的位置。
我们所有的JSP样品现在使用的自定义标签库和JSTL！所以，你会需要JSTL罐子，部署和测试这些应用程序。
JSTL JAR文件在Download Package > Code > J2EE > Web-Inf > lib 文件夹中。
请浏览在Download Package > Code > J2EE的Readme 文件夹。
Plotting a chart from data contained in Data.xml让我们建立我们的第一个例子。
在这个例子中，我们将创建一个“单位每月销售”图表，使用数据URL的方法。
一开始，我们将手动编码在一个物理XML文件data.xml中的我们的XML数据，然后利用它在我们的图表包含在JSP页面中（SimpleChart.jsp）。
要绘制图表，消耗的这个数据，你需要包含的HTML代码嵌入Flash对象，然后提供必要的参数。
为了让事情变得简单，我们已经创建了一个标签库，所有这些功能。
所以，当你需要工作FusionCharts的XT在JSP中，只需在您的网页上，包括这个标签库，然后你可以FusionCharts XT的工作很容易。
让我们来看看如何使用FusionCharts render标签。
SimpleChart.jsp<%@ taglib prefix="c" uri="/jsp/jstl/core"%><%@ taglib prefix="c" uri="/jsp/jstl/core"%><%@ taglib uri="/jsp/core" prefix="fc"%><%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%><jsp:useBean id="chartData"class="com.fusioncharts.sampledata.BasicRenderData"/>（获取数据）<c:set var="folderPath"value="../../FusionCharts/"/><c:set var="title"value="FusionCharts - Simple Column 3D Chart"scope="request"/><c:set var="header1"value="FusionCharts - Examples"scope="request"/><c:set var="header2"value="Basic example using pre-built Data.xml"scope="request"/><c:set var="jsPath"value="${folderPath}"scope="request"/><c:set var="assetCSSPath"value="../assets/ui/css/"scope="request"/><c:set var="assetJSPath"value="../assets/ui/js/"scope="request"/><c:set var="assetImagePath"value="../assets/ui/images/"scope="request"/><%--chartId="myFirst";filename ="../../FusionCharts/Column3D.swf";url="Data/Data.xml";width="600";height="300";--%><%--Create the chart -Column3D Chart with data from Data/Data.xml --%><tags:template2><c:catch var="fcTagError"><fc:render chartId="${chartData.chartId}" swfFilename="${folderPath}${chartData.swfFilename}"width="${chartData.width}"height="${chartData.height}"debugMode="false"registerWithJS="false"xmlUrl="${chartData.url}"/></c:catch><c:if test="${not empty fcTagError}">Tag Error: <br/>${fcTagError}</c:if></tags:template2>正如你可以在上面看到的那样，我们有：1 用BasicRenderData组件得到图表所需的数据。
FusionCharts free 使用手册一、概述FusionCharts是InfoSoft Global公司的一个产品，InfoSoft Global 公司是专业的Flash图形方案提供商，他们还有几款其他的，基于Flash技术的产品，都非常的漂亮。
FusionCharts Free则是FusionCharts提供的一个免费版本，虽然免费，功能依然强大，图形类型依然丰富。
不得不感叹技术发展的真快，99年的时候，flash刚刚在互联网上流行，那时还只是一个简单的动画软件，编程能力有限。
但现在flash几乎无所不能了，图形报表则是它大展手脚的一个领域。
FusionCharts free 是一个跨平台，跨浏览器的flash图表组件解决方案，能够被 , ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。
你不需要知道任何关于flash编程的知识，你只需要知道你所用的编程语言就可以了。
FusionCharts free 目前最新版本是v2.1，主要做了以下改动：∙增加了使用jsp和Ruby on Rails来集成FusionCharts的代码和文档。
∙F usionCharts DOM更加容易地把图表加载到你的页面上。
∙修改了.Net的使用代码和文档。
∙增加了新的PHP API ,并修复了一些BUG。
∙修改了FusionCharts.js ，以便可以支持双引号。
（那就是说以前不支持？）∙增加了在FusionCharts使用UTF-8编码的示例。
FusionCharts到底能做什么呢？下面就给大家展示一下。
3D/2D 柱形图图片1图片2 曲线图图片3图片43D/2D饼图、环图图片5图片6 区域图图片7图片8 堆栈图图片9图片10联合图图片11图片12 蜡烛图图片13图片14 漏斗图图片15图片16甘特图图片17图片18看了这么多漂亮的图形以后，是不是有点感到兴奋呢？如果把这么漂亮专业的图形放到用户面前，相信他们也会满意的。
FusionCharts使用JavaScript 加载图形本文我们直接在HTML里使用JavaScript语言<OBJECT>和<EMBED>标记来加载图形的。
<html>...<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=/pub/shockwave/cabs/flash/swflash.cab#version=6, 0,0,0" width="600" height="500" id="Column3D" ><param name="movie" value="../FusionCharts/FusionCharts_Column3D.swf" /><param name="FlashVars" value="&dataURL=Data.xml&chartWidth=600&chartHeight=500"><param name="quality" value="high" /><embed src="../FusionCharts/FusionCharts_Column3D.swf" flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="/go/getflashplayer" /></object>...</html>实际上，我们还可以使用FusionCharts提供的一个JavaScript类来加载图形。
使用JavaScript 的方式有几个好处，一是代码量大大减少，特别是当一个页面上有几个图形时。
二是代码更加直观。
三是可以避免IE出现“单击以激活使用这个控件”的提示。
使用JS加载这个JS类文件就在FusionCharts>JSClass文件夹下，我们把它拷贝到c:\FusionCharts\FusionCharts下面。
现在，我们把原来的Chart.html复制一份，命名为JSChart.html。
这样做是为了避免直接在Chart.html上进行修改，因为以后还要用到Chart.html，下面就是JSChart.html的代码。
<html><head><script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script></head><body bgcolor="#ffffff"><div id="chartdiv" align="center">图形将出现这个DIV里，到时这里的字将被图形替代。
</div> <script type="text/javascript">varmyChart = new FusionCharts("../FusionCharts/FusionCharts_Column3D.swf", "myChartId", "600", "500");myChart.setDataURL("Data.xml");myChart.render("chartdiv");</script></body></html>我们对上面的代码进行以下解释。
首先，我们用下面的语句来加载FusionCharts.js文件。
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>然后，我们定义了一个DIV，它还有个id。
<div id="chartdiv" align="center">图形将出现这个DIV里，到时这里的字将被图形替代。
</div>我们的图形就出现在这个DIV里。
接着，我们用四个参数建立了一个FusionCharts对象，varmyChart = new FusionCharts("../FusionCharts/FusionCharts_Column3D.swf", "myChartId", "600", "500");第一个参数是SWF文件的地址。
第二个是图形的id。
这个id你可以随便叫什么，但是要注意，在后面我们讲到一个页面里有多个图形的时候，这个id一定要是唯一的。
第三个参数是图形的宽。
第四个参数是图形的高。
我们还要设置数据文件的地址。
myChart.setDataURL("Data.xml");最后，我们把图形渲染在指定的地方。
myChart.render("chartdiv");"chartdiv"就是前面的DIV的id，这就表示把图形render到"chartdiv"。
现在你运行JSChart.html，你会看到同Chart.html一样的效果。
很显然使用JavaScript加载图形，更方便，更直观。
多图形有时候我们需要在一个页面里显示多个图形，例如，我们同时以饼图、柱状图、曲线图、区域图四中形式来表现每个月的销售情况，让用户想看哪个就看哪个。
怎么加载多个图形呢？很简单，看下面。
<html><head><title>多图形</title><script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script></head><body bgcolor="#ffffff"><div id="chartdiv1" align="center">First Chart Container Pie 3D</div><script type="text/javascript">var myChart1 = new FusionCharts("../FusionCharts/FusionCharts_pie3D.swf", "myChartId1", "600", "400");myChart1.setDataURL("Data.xml");myChart1.render("chartdiv1");</script><div id="chartdiv2" align="center">Second Chart Container Column 3D</div><script type="text/javascript">var myChart2 = new FusionCharts("../FusionCharts/FusionCharts_Column3D.swf","myChartId2", "600","300");myChart2.setDataURL("Data.xml");myChart2.render("chartdiv2");</script><div id="chartdiv3" align="center">Third Chart Container Line 2D</div><script type="text/javascript">var myChart3 = new FusionCharts("../FusionCharts/FusionCharts_line.swf", "myChartId3", "600", "300");myChart3.setDataURL("Data.xml");myChart3.render("chartdiv3");</script><div id="chartdiv4" align="center">Fourth Chart Container Area 2D</div><script type="text/javascript">var myChart4 = new FusionCharts("../FusionCharts/FusionCharts_area2D.swf", "myChartId4", "400", "250");myChart4.setDataURL("Data.xml");myChart4.render("chartdiv4");</script></body></html>仔细对比上面的四个图形代码，其实就是div的id，FusionCharts对象的名称,图形的id，还有图形的SWF地址这些地方发生了变化。
