&chart yAxisName="Sales Figure" caption="Top 5 Sales Person" &&& numberPrefix="$" showBorder="1" imageSave="1"&&&& &set label="Alex" value="25000"& /& &&& &set label="Mark" value="35000" /& &&& &set label="David" value="42300" /& &&& &set label="Graham" value="35300" /& &&& &set label="John" value="31300" /&&/chart&&&&&4.编写index.html测试代码&html&&&& &head&&&&&&&& &title&My First chart using FusionCharts XT&/title&&&&&&&& &script type="text/javascript" src="FusionCharts/FusionCharts.js"&&/script& //引入的FunsionCharts脚本&&& &/head&&&& &body&&&&&&&& &div id="chartContainer"&&&&&&&&&&&& FusionCharts XT will load here!&&&&&&& &/div&&&&&&&& &script type="text/javascript"&&&&&&&& &!--&&&&&&&&&&& var myChart = new FusionCharts( "FusionCharts/Column3D.swf",& //设置swf文件路径&&&&&&&&&&&&&&&&&&& "myChartId", "400", "300", "0", "1" );&&&&&&&&&&& myChart.setXMLUrl("FusionCharts/Data.xml"); //设置xml文件路径&&&&&&&&&&& myChart.render("chartContainer");&//显示图表的容器ID，上面的div&&&&&&& // --&&&&&&&& &/script&&&& &/body&&/html&&&&&5.运行index.html，你将看到如下结果如何使用配置参数&&&&参数可以到百度搜索，有比较全面的中文介绍。&&&&&&&&在Gallery 路径下有很多例子供参考。而FusionCharts的参数设置都是在数据文件xml中完成，就是上例中的数据源Data.xml，在不同的标签中写入相应的属性及参数既能得到不同的效果，参数大致包括图表样式的修改、文字样式、数值显示方式、动态效果等。（参数中的布尔值用1或0代替true或false）动态XML数据（重点）&&&&上例中给出的是静态的XML文件，对于项目来说数据往往是由后台动态生成的。那么如何使用动态数据呢，例子如下：&&&&使用jquery ajax异步调用动态xml数据并展示&&&&js代码，不必理会其他部分，注意：&&&&&&&&&&&&&&&&1.dataType : 'text'，请求的返回数据类型一定是'text'字符串文本类型FusionCharts才能识别，json、xml格式都不可以。但返回的字符串必须是标准的xml格式，至于字符串形式的json格式是否能够识别我没有测试。&&&&&&&&&（苦于英文不好，所以我在这里调试了1个多小时，因为FusionCharts能够接收json、xml形式的静态数据源，所以一直没有想到在动态赋值只能接收字符串形式的数据源）&&&&&&&&2.chart.setDataXML(data)，对于动态数据源不能使用上例中的setXMLUrl()方法。$.ajax( {&&&&&&& type : 'POST',&&&&&&& contentType: "application/ charset=utf-8",& &&&&&&& url : 'year.action',&&&&&&& data : parameters,&&&&&&& dataType : 'text',&&&&&&& success : function(data) {&&&&&&&&&&& var chart = new FusionCharts("js/compare/MSColumn3D.swf", "ChartId", "560", "400", "0", "0");&&&&&&&&&&& chart.setDataXML(data);&&&&&&&&&&& chart.render("chartContainer");&&&&&&& },&&&&&&& error : function(xhr) {&&&&&&&&&&& alert('页出错\n\r' + xhr.responseText);&&&&&&& }&&& });&&&&&&&&3.数据源格式阐述FusionCharts Free与ExtJs结合的实现过程-阿里云资讯网
阐述FusionCharts Free与ExtJs结合的实现过程
发布时间：
更新时间：
来源：网络
作者：Tammywl
FusionCharts
本文先介绍 /zixun/aggregation/2014.html&&FusionCharts Free 及其特性，紧接着详细说明使用 FusionCharts Free 创建图表的过程，以及介绍 ExtJs 在图表展示方面的优缺点，详细阐述 FusionCharts Free 与 ExtJs 结合的实现过程，通过具体的实例进行展示，并对实践中遇到的一些问题进行解析。
FushionCharts Free 是开源的免费的以
为支撑来制作数据动画图表的图表组件解决方案，它最大的特性是跨平台、跨浏览器、兼容主流的 Web 技术，通过 XML 作为其数据接口，利用绚丽的 Flash，创建交互式、数据驱动的动态图表。
FusionCharts Free
FushionCharts Free 拥有自身很多的优点：
大量的图表类型
FushionCharts Free 给用户提供多种不同的 2D 或 3D 图表类型，包括柱状图、直方图、直线图、饼图、圆环图、甘特图、漏斗图、堆栈图表、组合图表等，提供用户多种选择，可以很好地满足用户的需求。
良好的动画和交互
FusionCharts Free 在图表设置方面为用户提供了多种选项，：是否显示动画效果，透明度，色彩主题，热点选区、盘旋标题，倾斜度，字体，字体显示位置，字体背景，饼图半径 和各饼瓣颜色等，很多属性用户都可以进行个性化设置，使得制作出的图表表现形式，光滑、栩栩如生的动态图像效果与用户有良好的交互。
兼容主流 Web 技术、网络技术，平台和设备
FusionCharts Free 可运行在 Windows、Linux、Unix 等操作系统上。通过 XML 作为数据接口，可兼容 HTML、JavaScript、ASP、ASP.NET、PHP、JSP、ColdFusion 等主流 Web 技术和数据库。充分利用 Flash 和 Javascript，可无缝地在 PC 机、Macs、iPad、iPhone 和其他移动设备上实现。
降低服务器的负载
通 常情况下，显示的图表都是在服务器端生成后再传给客户端，这消耗了服务器的资源和网络带宽。 而 FusionCharts Free 只是将预构建的 SWF 文件和数据文件传给浏览器（客户端），图片渲染等工作由客户端的 Flash 插件完成，极大地减少了服务器端计算负荷和网络传输量。与此同时，浏览器会将 SWF 文件缓存起来，以后只需更新数据，而不是每次都发送图表 SWF 文件。
使用简单，免安装
使用 FusionCharts Free 不需了解太多关于 Flash 的知识，创建图表过程非常便捷，只需拷贝所需的模板 SWF 文件，将显示的数据转换成特定的 XML 格式，最后使用语句通过 Flash 进行展示。
创建 FusionCharts Free 图表
FushionCharts Free 使用 XML 作为数据接口，其制图流程如图 1 所示。
图 1. FusionCharts Free 制作图表流程图
包 含 SWF 文件的图表显示页面向数据提供页面发送数据请求，数据提供页面接收到请求后根据条件连接数据库查询源数据，然后返回数据给数据提供页面，数据提供页面 根据具体情况将数据转换成 XML 格式并传送到图表显示界面，图表显示界面通过 Fash 插件对 XML 数据进行解析并展示图表。FusionCharts Free 制作简便，广泛应用在 Web 应用中，下面通过一个基于 Java 的 Web 工程（FusionChartsDemo）创建多柱状图为例（某超市 2012 年度啤酒、尿布和纸巾的销售额）来说明图表的创建过程。
首先，下载 FusionCharts 后解压，找到 FusionCharts.js 文件和需要的.swf 文件（本例以多个 3D 柱状图：MSColumn3D.swf 为例）放到工程 WebRoot 目录下。
其次，在页面中引入 js 文件，代码如下所示：&script language=&JavaScript& src=&FusionCharts/JS/FusionCharts.js&&&/script&
再 次，创建数据源（以 XML 格式为例），分为静态数据和动态数据，静态数据可在工程目录下直接进行创建，动态数据指从服务器端或进行换算获取数据进行字符串拼接，无论静态数据还是动 态数据，创建好的 XML 数据格式如清单 1 所示（本例采用文件名为 DataMulti.xml 静态数据来实现）：
清单 1. XML 数据格式&graph palette='3' caption='季度销售对比表' xAxisName='季度' yAxisName='销售额（单位：千）' baseFont='Arial' baseFontSize ='14' baseFontColor ='000000' ShowAboutMenuItem='0' decimals='0' formatNumberScale='0' useRoundEdges='1'& &categories& &category label='第 1 季度'/& &category label='第 2 季度'/& &category label='第 3 季度'/& &category label='第 4 季度'/& &/categories& &dataset seriesName='啤酒'& &set value='1240' link='chartDemo/detail.do?value=a1'/& &set value='1920' link='chartDemo/detail.do?value=a2'/& &set value='2080' link='chartDemo/detail.do?value=a3'/& &set value='910' link='chartDemo/detail.do?value=a4'/& &/dataset&&dataset seriesName='尿布'& ......//格式参照“啤酒”设定 &/dataset& &dataset seriesName='纸巾'& ......//格式参照“啤酒”设定 &/dataset&&/graph &
如清单 1 所示每个 XML 以&graph &开始，以&/graph &结束，&categories&&/categories&这个标签包含多个子标 签&category&&&/&category&，用来设置图片横坐标的元素。&dataset&&标签代表横坐 标一个元素中拥子元素（如本例中，横坐标的第一个元素“第 1 季度”包含啤酒、尿布和纸巾 3 个子元素，就有 3 个&dataset&&标签），标签中 seriesName&属性将在横坐标下面形成一组图例。&dataset&里的子节点&set&可以用来设置每个具体元素的 属，可见每个标签都拥有自己特有的一些属性。
最后，在页面（FusionCharts.jsp）中调用生成的 XML 格式数据生成图表，代码如清单 2 所示。
清单 2. 调用静态数据源生成图表&script type=&text/javascript&& //本例采用静态数据 DataMulti.xml 为数据源 function showFusionCharts(){ // 用四个参数构建一个 FusionCharts 对象，第 1 个参数是 SWF 文件的地址， //第 2 个是图形的 id，唯一即可，第 3 个是图表的宽，第 4 个是图表的高 var myChart = new FusionCharts(&FusionCharts/Charts/MSColumn3D.swf&, \ &myChartId&, &1000&, &800&); //采用静态数据时，设置数据文件的地址 url myChart.setDataURL(&DataMulti.xml&); //把图表渲染到指定的容器 myChart.render(&chartdiv&); }&/script&&body onload=&showFusionCharts();&&&div id=&chartdiv&&&/div&&/body&
部署项目，启动服务器在网页中输入 http://127.0.0.1:8080/FusionChartsDemo/FusionCharts.jsp 就可以访问创建好的多个柱状图。
图 2. 季度销售对比图
本站所有文章全部来源于互联网，版权归属于原作者。本站所有转载文章言论不代表本站观点，如是侵犯了原作者的权利请发邮件联系站长（yanjing@），我们收到后立即删除。
网站主机空间
摘要： 我们知道搜索引擎蜘蛛在访问网站的时候，有个判断因素就是网站打开速度是否快速，所以站长们在选择网站主机空间就要注意了。如果网站主机空间不稳定也会给seo带来一定影响的。 我们知道搜索引擎蜘蛛在访问网站的时候，有个判断因素就是网站打开速度是否快速，所以站长们在选择网站主机空间就要注意了。如果网站主机空间不稳定也会给seo带来一定影响的。 当搜索引擎蜘蛛来访问网站的时候，发现主机死机，无法...
摘要： 心态篇 其实做个人站长自己的心态很重要，不论你是新手站长还是经验丰富的老站长。都该把自己的心态摆正了，网上有很多什么月收入过万的软文，其实真正有几个呢。多数高手都是 心态篇 其实做个人站长自己的心态很重要，不论你是新手站长还是经验丰富的老站长。都该把自己的心态摆正了，网上有很多什么月收入过万的软文，其实真正有几个呢。多数高手都是低调赚钱的。那么个人站长要具备那些心态呢? 第一： 学会...
产品网站订单
摘要： 企业营销已经不再是传统的模式，越来越多的企业英雄通过seo优化的方法做行业关键字排名，希望可以通过关键词获得流量和订单销量，不过很多企业网站的IP流量上涨，订单销量却不 企业营销已经不再是传统的模式，越来越多的企业英雄通过seo优化的方法做行业关键字排名，希望可以通过关键词获得流量和订单销量，不过很多企业网站的IP流量上涨，订单销量却不尽如人意。 很多卖产品的网站存在的一个问题是有流...
2012年的苏宁正面临着同样的挑战。做了二十多年零售的张近东，其面临的现实挑战已经不是让苏宁如何避免撞上冰山，而是已经撞上了冰山，如何让这艘巨轮前行，而不是坐等沉没。 “泰坦尼克号”是如何沉没的? 泰坦尼克号设计中，如果船上的16个防水舱只有4个进水的话，船还可以浮在水上，但不幸的是有5个底舱的外壁被冰山撕裂了，弃船是必然的选择。 苏宁作为中国最优秀的连锁零售商，如果在线零售只是占所有社会商...
网站策划方案
摘要： 要建立一个网站，需要从网站定位，到设计、网站结构、内容准备、内外链的建设等等，是一个复杂繁琐的过程，需要准备一份网站的策划方案。本文将简要描述，从网站的定位到最终 要建立一个网站，需要从网站定位，到设计、网站结构、内容准备、内外链的建设等等，是一个复杂繁琐的过程，需要准备一份网站的策划方案。本文将简要描述，从网站的定位到最终的网站建成，整个过程。 一、网站的定位 分析：给网站定位，策...
行业网站编辑
摘要： 我们需要做一个什么样的网站?很多时候大家感觉做行业网站比较简单容易，于是越来越多的朋友涉足行业网站这一块，加上一些传统行业慢慢向互联网转移，一批批的行业网站建立起来 我们需要做一个什么样的网站?很多时候大家感觉做行业网站比较简单容易，于是越来越多的朋友涉足行业网站这一块，加上一些传统行业慢慢向互联网转移，一批批的行业网站建立起来了。然而不少朋友都问到守护一个很重要的问题是：行业网站到...
服务与支持
售前咨询：400-118-）
账号与支付
关注阿里云9290人阅读
开始学习前准备
类库下载：
Demo下载：
理解FusionCharts的用处
FusionCharts是InfoSoft Global公司的一个产品，InfoSoft Global公司是专业的Flash图形方案提供商，他们还有几款其他的基于flash技术的产品，都非常的漂亮
FusionCharts是一个基于Flash的图表组件，可以用来提供数据驱动的动态图标，FusionCharts可用于任何网页脚本语言如，&HTML格式，JSP, Asp.Net, PHP技术等等。提供交互式和强大的动态图标，FusionCharts充分利用流体美丽的Flash为模板，使用XML作为其数据接口，创造紧凑，互动和真正的动态图表
下载的安装包的文件说明
1.Charts文件夹下放的主要是swf文件和js文件
2.Code文件夹下存放的是源代码
3.&Gallery文件夹下存放的是创建的图形例子
4.&Contents文件夹存放的是文档
安装使用的方法
1、在你的web应用根目录下新建一个叫FusionCharts的文件夹。当然，并不是说它一定要叫这个名字，也不是一定要在根目录下。
　2、把所有的SWF文件都拷贝到这个FusionCharts里。
　　这就完成安装了，不再需要其他多余的步骤。
　　当然，有些情况下，并不需要与服务器的交互（比如，你直接使用JavaScript来嵌入，而不用jsp或php。数据也是直接写死在你的JavaScript代码里或xml文件里。），为了学习方便，你也可以把它安装在你的电脑上随便一个地方，比如d:\test下。安装步骤和上面的安装一样。
　　接下来介绍SWF文件都分别对应哪种图形。
Single Series Charts
Column3D.swf
Column2D.swf
Area2D.swf
Doughnut 2D
Doughnut2D.swf
Multi-series Charts
Multi-series Column 2D
MSColumn2D.swf
Multi-series Column 3D
MSColumn3D.swf
Multi-series Line 2D
MSLine.swf
Multi-series Bar 2D
MSBar2D.swf
Multi-series Area 2D
MSArea2D.swf
Stacked Charts
Stacked Column 3D
StackedColumn3D.swf
Stacked Column 2D
StackedColumn2D.swf
Stacked Bar 2D
StackedBar2D.swf
Stacked Area 2D
StackedArea2D.swf
Combination Charts
Multi-series Column 3D + Line - Dual Y Axis
MSColumn2DLineDY.swf
Multi-series Column 3D + Line - Dual Y Axis
MSColumn3DLineDY.swf
Financial Charts
Candlestick Chart
Candlestick.swf
Funnel Chart
Funnel Chart
Funnel.swf
Gantt Chart
Gantt Chart
开始书写Demo
　&1.选择好你要创建的图形类型对应的SWF文件。例如，我们现在要创建的是3D柱状图形，那么我们的SWF文件就是Column3D.swf。上篇文章已经介绍过了，所有的SWF文件都放在FusionCharts--&Charts文件夹里。
　　2.XML数据文件。FCF只接受基于XML格式的数据。因此，你需要把你的数据转成XML格式。
　　3.HTML文件。这个HTML文件将包含用来嵌入图形的代码。
FusionCharts对象共有四个方法：
&&&&初始化方法：FusionCharts（swf，id，w，h）
例如：FusionCharts(&../FCF_Column3D.swf&, &chart1&, &850&, &370&)
&&&&Swf：swf文件的url
&&&&Id：用以标示该对象
&&&&W：宽度
&&&&H：高度
&&&&利用XML文件填充FusionCharts对象：dataURL（url）
例如：dataURL（&../data.xml &）
&&&&url:XML文件所在的URL
&&&&利用XML字符串填充FusionCharts对象：dataXML（str）
例如：chart1.setDataURL(&&graph&&set name='A供电公司' value='14' /&&/graph&&)
&&&&Str：匹配格式的字符串
&&&&将FusionCharts对象填充到指定的div标签处：render（div）
例如：render（&divid&）
&&&&Div：div标签的id
&&&&利用XML文件填充并刷新FusionCharts对象：updateChartURL（url）
例如：updateChartURL（&../data.xml &）
&&&&url:XML文件所在的URL
&&&&chart.setDataXML(AngularGaugeXmlStr);
&&&&chart.setDataURL(&data/Data.xml&);//xml文件
&&&&chart.setJSONData(JsonStr);
&&&&利用XML字符串填充并刷新FusionCharts对象：updateChartXML（str）
例如：updateChartXML（&&graph&&set name='A供电公司' value='14' /&&/graph&&）
&&&&Str：匹配格式的字符串
现在创建一个完整的Demo
第一步：拷贝需要的库文件
第二步：创建模拟数据
&&&&&&&&&包括xml文件和js文件中创建xml数据对象和json数据对象两种格式
3.书写html绑定页面
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&script type=&text/javascript& src=&js/FusionCharts.js&&&/script&&!--引入主类库--&
&script type=&text/javascript& src=&data/data.js&&&/script&
&div id=&mzl&&在这加载图形&/div&&!--定义一个div用于存放图形--&
&script type=&text/javascript&&
var chart = new FusionCharts(&swf/Column2D.swf&, &ChartId&, &450&, &300&, &0&, &0&);
//创建一个FusionCharts对象，第一个参数为swf文件的路径，第二个为id用来标识这个对象，第三个为宽度，第四个为高度
//chart.setDataURL(&data/data.xml&);//xml文件
// &chart.setDataXML(xmldata);
chart.setJSONData(json);
chart.render(&mzl&);//将FusionCharts对象填充到指定的div标签处：render（div）
4.书写数据文件
var json= '{&chart&: {&yaxisname&: &Sales Figure&,&caption&: &Top 5 Sales Person&,&numberprefix&: &$&,&useroundedges&: &1&,&bgcolor&: &FFFFFF,FFFFFF&,&showborder&: &0&},&data&: [{&label&: &Alex&,&value&: &25000&},{&label&: &Mark&,&value&: &35000&},{&label&:
&David&,&value&: &42300&},{&label&: &Graham&,&value&: &35300&},{&label&: &John&,&value&: &31300&}]}';
数据文件的格式在帮助文档中能够找到
5.文件夹组织
data：数据文件夹
js：脚本文件夹（）
swf：从类库中copy出的swf文件
打开页面测试即可，尽量使用火狐进行测试，使用ie需要进行安全确认添加
版权声明：本文为博主原创文章，未经博主允许不得转载。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：24329次
排名：千里之外
原创：23篇
(2)(2)(1)(3)(1)(3)(4)(1)(2)(2)(1)(2)(3)& , All Rights Reserved.