FusionCharts简明教程（一）---建立FusionCharts图形
由于该项目需要的报告需要做的事情，选择FusionCharts作为一种工具。
由于该报告没有任何接触，网上有没有更具体fusionCharts课程，所以我们决定做一个彻底的研究FusionCharts，同一时候做一个比較简单的教程提供參考。
因为能力有限(应届毕业生的菜鸟而已)，所以教程(学习笔记而已)不免会有错误，望别喷，望指正。当然肯定避免不了会參考其它资料的。
一、FusionCharts简单介绍和安装使用
1．1、简单介绍
FusionCharts是InfoSoft Global公司的一个产品,而FusionCharts Free则是FusionCharts提供的一个免费版本号，尽管免费，功能依旧强大，图形类型依旧丰富。
这里介绍了都是基于FusionCharts Free的。
FusionCharts free 是一个跨平台，跨浏览器的flash图表组件解决方式。可以被 ASP、.NET, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。我们不须要知道不论什么Flash的知识，仅仅须要了解你所用的编程语言而已。
FusionCharts功能强大，那么它究竟可以做什么呢？以下一一展示。
3D/2D 柱形图
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hlbnNzeQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
曲线图
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hlbnNzeQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
3D/2D饼图、环图
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hlbnNzeQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hlbnNzeQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
区域图
堆栈图
联合图
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hlbnNzeQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
上面仅仅是一些功能的展示，FusionCharts还可以做很多其它的事情，这里就不一一介绍了。以下介绍怎样安装使用FusionCharts。
1.2 文档结构
将下载的FusionCharts解压到随意目录，得到的解压目录里面会包括相似于此的文档结构。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hlbnNzeQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
Charts ：里面包括着全部的SWF文件，假设你的Web项目须要创建图像。则导入对应的SWF文件就可以。
Code ：里面包括了全部的演示样例代码。
Contents ：包括了文档，也就是API，包括了FusionCharts的用法。
Gallery ：包括了一些图像的创建样例。
JSClass：FusionCharts javascript文件就放在这个目录下。这些文件可以帮组我们以一种友好的方式将图像插入到页面中。
1.3安装使用
在了解了FusionCharts的文档结构后。以下来解说怎样将FusionCharts应用到应用程序中。事实上FusionCharts的用法非常easy。仅仅须要三个步骤就行搞定。
1、 导入你要创建图像相对应的SWF文件。
2、 编写XML数据文件。
3、 编写HTML文件。这个文件要包括显示图像的对应代码。
二、我的第一个FusionCharts
介绍了这么久。最终可以创建第一个图像了。我将以一种比較简单的方式来创建一个3D柱状的图形，用来显示每一个月某件商品的销售情况。
2.1、创建project
新建目录，命名为FusionCharts。然后在新建两个目录分别命名为FusionCharts、datas。
这两个文件分别用于存放SWF文件和xml数据文件。
2.2、导入文件
将对应的3D柱状图像的SWF：Column3D.swf拷贝到FusionCharts目录中。
2.3、创建XML数据文件
创建XML文件：Data1.xml。并将其放入到datas目录中。文件内容例如以下：
<chart yAxisName='销售个数' caption='2012年年度销售情况统计分析' useRoundEdges='1' bgColor='FFFFFF,FFFFFF' showBorder='0'>
<set label='一月' value='25000' />
<set label='二月' value='35000' />
<set label='三月' value='42300' />
<set label='四月' value='35300' />
<set label='五月' value='31300' />
<set label='六月' value='25000' />
<set label='七月' value='35000' />
<set label='八月' value='42300' />
<set label='九月' value='35300' />
<set label='10月' value='31300' />
<set label='11月' value='25000' />
<set label='12月' value='35000' />
</chart>
对于这个XML文件这里简单介绍一下。
<chart>元素作为root元素，他有一些基本属性。如：设置x、y轴名称，报表标题、数值格式。
在<chart>元素中有非常多的<set>元素。这个元素用来描写叙述设定的数据，label表示名称、value表示值。
2.4、编写HTML文件代码
<html>
<head>
<title>My First FusionCharts</title>
</head>
<body bgcolor="#ffffff">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Column3D" >
<param name="movie" value="../FusionCharts/Column3D.swf" />
<param name="FlashVars" value="&dataURL=../datas/Data.xml&chartWidth=600&chartHeight=500">
<param name="quality" value="high" />
<embed src="../FusionCharts/Column3D.swf" flashVars="&dataURL=../datas/Data.xml&chartWidth=600&chartHeight=500" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
生成的图像：
第二部分介绍了如何使用js加载FusionCharts和使用dataXML加载数据。
FusionCharts简明教程（一）---建立FusionCharts图形的更多相关文章
- FusionCharts简单教程(七)-----使用FusionCharts实现下钻功能
前面介绍的FusionCharts都是对FusionCharts的基本属性进行操作,下面几篇博文就FusionCharts的高级特性做一个介绍,包括:添加下钻链接.使用Style样式定制图 ...
- FusionCharts简单教程(三)-----如何自定义图表上的工具提示
最近有蛮多人总是问我这个FusionCharts制表的问题,帮助他们解决之后,在昨晚发现以前整理的笔记中有这个简单教程,而且以前也发表了几篇这个博文,所以就将其全部上传上来供别人参考.如有不正确之处望 ...
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...
- FusionCharts简单教程(八)-----使用网格组件
有时候我们会觉得使用图像不够直接,对于数据的显示没有表格那样直接明了.所以这里就介绍如何使用网格组件.将网格与图像结合起来.网格组件能够将FusionCharts中的单序列数据以列表的 ...
- Docker简明教程
Docker简明教程 [编者的话]使用Docker来写代码更高效并能有效提升自己的技能.Docker能打包你的开发环境,消除包的依赖冲突,并通过集装箱式的应用来减少开发时间和学习时间. Docker作 ...
- ArcGIS Pro 简明教程（4）工具和模型构建器
ArcGIS Pro 简明教程(4)工具和模型构建器 by 李远祥 工具箱中的工具 ArcGIS Pro 在1.3版本基本上已经继承了ArcMap的所有工具,而且会不断加入一些它自身才有的工具,例如适 ...
- ArcGIS Pro 简明教程（3）数据编辑
ArcGIS Pro 简明教程(3)数据编辑 by 李远祥 数据编辑是GIS中最常用的功能之一,ArcGIS Pro在GIS数据编辑上使用习惯有一定的改变,因此,本章可以重点看看一些编辑工具的使用和使 ...
- Mac安装Windows 10的简明教程
每次在Mac上安装Windows都是一件非常痛苦的事情,曾经为了装Win8把整台Mac的硬盘数据都弄丢了,最后通过龟速系统恢复模式恢复了MacOSX(50M电信光纤下载了3天才把系统下载完),相信和我 ...
- Lisp简明教程
此教程是我花了一点时间和功夫整理出来的,希望能够帮到喜欢Lisp(Common Lisp)的朋友们.本人排版很烂还望多多海涵! <Lisp简明教程>PDF格式下载 <Lisp简明教程 ...
随机推荐
- 当Scheduler拿不到url的 时候，不能立即退出
在webmagic的多线程抓取中有一个比较麻烦的问题:当Scheduler拿不到url的 时候,不能立即退出,需要等到没抓完的线程都运行完毕,没有新url产生时,才能退出.之前使用Thread.sle ...
- JAVA NIO 选择器
为什么要使用选择器 通道处于就绪状态后,就可以在缓冲区之间传送数据.可以采用非阻塞模式来检查通道是否就绪,但非阻塞模式还会做别的任务,当有多个通道同时存在时,很难将检查通道是否就绪与其他任务剥离开来, ...
- OCP读书笔记(11) - 使用闪回技术II
闪回归档 1. 什么是闪回数据归档? 闪回归档是用来保存一个或多个表的历史数据的新数据库对象,以及该数据的存储保留和清除策略.归档只是保存数据库中一个或多个表的所有事务处理的变化的一个或多个表空间,数 ...
- VSTO 学习笔记（六）在 Excel 2010中使用RDLC报表
原文:VSTO 学习笔记(六)在 Excel 2010中使用RDLC报表 Excel具有强大的图表显示.分析功能,这点毋庸置疑,但是如果将常规MIS系统中的数据以报表的形式在Excel中显示,却并不那 ...
- 祖国版SoloWheel：Airwheel爱尔威火星车 拆箱&上手经验_运动户外_晒物广场_什么值得买
http://m.baidu.com/from=844b/bd_page_type=1/ssid=0/uid=3151E6C0905477A13653132D762BB6FB/pu=sz%401320 ...
- Linux Shell脚本入门－－grep命令详解
grep简介<摘自鸟哥,并加以整理.> grep (global search regular expression(RE) and print out the line,全面搜索正则表达 ...
- POJ 2002 点hash
Squares Time Limit: 3500MS Memory Limit: 65536K Total Submissions: 15489 Accepted: 5864 Descript ...
- JqGrid 显示表
JqGrid 下表显示了前台图书馆.使用起来非常方便. 我在这里分享使用中遇到的问题及解决方案 ** 一.rowNum属性 ** 1.假设不设置,默认显示数是20,也就是说超过20以后的数据.不再显示 ...
- Cocos2d-x Layout简单使用
1. Text* alert = Text::create("Layout", "fonts/Marker Felt.ttf", 30 ); alert-> ...
- js中 正則表達式
正則表達式使用具体解释 简单介绍 简单的说,正則表達式是一种能够用于模式匹配和替换的强有力的工具.其作用例如以下: 測试字符串的某个模式.比如,能够对一个输入字符串进行測试,看在该字符串是否存在一个电 ...