【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"> |
方法二:字符串加载法
(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"> |
解析:操作步骤:
<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里。