【FusionCharts 介绍】

FusionCharts是InfoSoft Global公司的一个产品，InfoSoft Global 公司是专业的Flash图形方案提供商，他们还有几款其他的，基于Flash技术的产品，都非常的漂亮。 FusionCharts free 是一个跨平台，跨浏览器的flash图表组件解决方案，能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML页面甚至PPT调用。

 

FusionCharts是一个Flash的图表组件，它可以用来制作数据动画图表，其中动画效果用的是Adobe Flash 8 （原Macromedia Flash的）制作的flash ， FusionCharts可用于任何网页的脚本语言类似于HTML ， .NET，ASP ， JSP， PHP ， ColdFusion等，提供互动性和强大的图表。使用XML作为其数据接口， FusionCharts充分利用流体美丽的Flash创建紧凑，互动性和视觉逮捕图表。

 

 

动画和交互图

使用FusionCharts ，您可以快速方便地提供交互式动画图表给最终用户。不同的图表类型支持不同形式的动画和交互性，从而提供了一个不同的经验，最终用户。

 

简单易用且功能强大的AJAX/ JavaScript的一体化

FusionCharts提供先进的办法，将图表与AJAX应用程序或JavaScript模块结合。您可以随时更新海图在客户端，调用JavaScript函数的热点链接，或要求作出动态XML数据到服务器不涉及任何页面刷新。

易于使用

使用FusionCharts ，您不必安装任何东西在您的服务器上。您需要做的只是复制粘贴SWF文件（核心文件FusionCharts ）到您的服务器上，就像你会做任何图像文件-你已经准备好！因此，即使在这些服务器不允许安装ActiveX或任何其他形式的组成部分， FusionCharts都可以顺利运行。

FusionCharts使图表创建过程简易方便。因为它使用XML作为它的数据源，所有您需要做的是将您的数据转换为XML格式，再使用一种编程语言或使用可视化的GUI提供FusionCharts -而这一切所需要的建立互动和动画图表。

运行在各种平台

不论您使用的服务器端脚本语言还是客户端脚本语言， FusionCharts都可用于创建图表的。FusionCharts使用XML作为数据接口，可以运行在任何服务器和任何脚本语言。查看图表，用户只需要安装Adobe Flash Player ，而 Flash Player 几乎每个浏览器上都有嵌入。

降低您服务器的负载

在传统的基于图像的绘制系统，图表，图像生成的服务器端。因此，每个图表，您需要提供给用户，您可以

建立复杂的图像在服务器上，然后流给客户端。当需要时高，这可能是一项昂贵的资源在服务器上，作为形象创作需要很大的人数在服务器上。

FusionCharts为您带来极大的安慰-所有图表呈现在客户端的广泛安装使用的Adobe Flash平台。服务器只是负责流的预先建立的SWF文件和你的XML数据文件。从那里， Flash Player的需要的责任使图表。此外，图表SWF文件可以存储，让您可以只更新数据，而不是每次都发送图表SWF文件。

大量的图表类型

FusionCharts v3的为您提供了大量的图表类型。从基本的条形图，柱状图，线图，饼图等，以先进的组合和滚动图表，您可以建立所有图表以同样的易用性。Web & Enterprise应用程序支持超过90种图表类型和550种地图，JS支持各种实时图表、地图、可编辑图表和仪表。

向下钻取

用LinkedCharts在几分钟内就可以创建无限级的向下钻取图表，每一级都可以显示不同的图表类型和数据，要实现这些无需编写任何额外代码。

 

 

特殊字符

 

 在FCF里，一些特殊的编码都需要经过编码。如：

 

“€”欧元符号 ——— 需要用“%80”替换

 

“￡”英镑符号 ——— 需要用“%A3”替换

 

“￥”人名币符号—— 需要用“%A5”替换

 

“￠”分符号 ————需要用“%A2”替换 

 

“%”百分号 ———— 需要用“%25”替换

 

“&”连字符 ———— 需要用“&”替换

 

“>”大于号 ———— 需要用“>”替换

 

“'”单引号 ———— 需要用“'”替换

 

如果要显示双引号，直接使用就可以了，前提是属性值是用单引号括起来的。如果属性值是用双引号括起来的，要显示单引号，也可以直接使用，而不必用“'”来替换它。

 

 

安装使用

1. 在web项目目录下新建一个文件夹( 如FusionCharts)，并把所有的SWF 文件都拷贝到这个文件夹里。

2. 在页面导入FusionCharts.js 文件，如：

<script type="text/javascript" src="FusionCharts.js"></script>

3. js加载数据生成报表(有两种方法)

方法一：xml文件引用法

(1)定义一个固定格式的xml文件（以Data.xml为例）

Date.xml的内容如下：

<graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>　　

　　 <set name='一月' value='462' color='AFD8F8' />　　

　　 <set name='二月' value='857' color='F6BD0F' />　　

　　 <set name='三月' value='671' color='8BBA00' />　　

　　 <set name='四月' value='494' color='FF8E46' />　　

　　 <set name='五月' value='761' color='008E8E' />　　

　　 <set name='六月' value='960' color='D64646' />　　

　　 <set name='七月' value='629' color='8E468E' />　　

　　 <set name='八月' value='622' color='588526' />　　

　　 <set name='九月' value='376' color='B3AA00' />　　

　　 <set name='十月' value='494' color='008ED6' />　　

<set name='十一月' value='761' color='9D080D' />　　

　　 <set name='十二月' value='960' color='A186BE' />　　

</graph>　

(2) js加载方法，代码如下：

<div id=”chartdiv1”></div>

<script type="text/javascript">　　
    var myChart2 = new FusionCharts("../FusionCharts/FCF_Column3D.swf","myChartId2", "600","300");　　　　
    　myChart2.setDataURL("Data.xml");　　　　
    　myChart2.render("chartdiv1");　　　
 </script>　

 

方法二：字符串加载法

（1） 定义一个有固定格式的字符串，即可以将上述xml文件组合成字符串

var dataXml = “<graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'><set name='一月' value='462' color='AFD8F8' /><set name='二月' value='857' color='F6BD0F' /><set name='三月' value='671' color='8BBA00' /><set name='四月' value='494' color='FF8E46' /><set name='五月' value='761' color='008E8E' /><set name='六月' value='960' color='D64646' /><set name='七月' value='629' color='8E468E' /><set name='八月' value='622' color='588526' /><set name='九月' value='376' color='B3AA00' /><set name='十月' value='494' color='008ED6' /><set name='十一月' value='761' color='9D080D' /><set name='十二月' value='960' color='A186BE' /></graph>”;

（2）js加载方法，代码如下：

<div id=”chartdiv1”></div>

<script type="text/javascript">　　
    var myChart2 = new FusionCharts("../FusionCharts/FCF_Column3D.swf","myChartId2", "600","300");　　　　
    　myChart2.setDataURL(dataXml);　　　　
    　myChart2.render("chartdiv1");　　　
 </script>

 

 解析：操作步骤：

<1>建立对象：

用四个参数建立了一个FusionCharts对象，

    var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");　

    　　第一个参数是SWF文件的地址。

    　　第二个是图形的id。这个id可以随便叫什么，但是要注意，当一个页面里有多个图形的时候，这个id一定要是唯一的。

    　　第三个参数是图形的宽。

    　　第四个参数是图形的高。

<2> 加载数据：

第一种加载方法需要设置数据文件的地址。如：

        myChart.setDataURL("Data.xml");　　

第二种加载方法需要设置对应的字符串。如：

    myChart2.setDataURL(dataXml); //dataXml为字符串

 <3> 把图形渲染在指定的地方。

myChart.render("chartdiv");　　

   "chartdiv"就是前面的DIV的id，这就表示把图形render到"chartdiv"，即Flash图形就出现在这个id为"chartdiv1"的DIV里。