由于该项目需要的报告需要做的事情，选择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图形的更多相关文章

  1. FusionCharts简单教程(七)-----使用FusionCharts实现下钻功能

          前面介绍的FusionCharts都是对FusionCharts的基本属性进行操作,下面几篇博文就FusionCharts的高级特性做一个介绍,包括:添加下钻链接.使用Style样式定制图 ...

  2. FusionCharts简单教程(三)-----如何自定义图表上的工具提示

    最近有蛮多人总是问我这个FusionCharts制表的问题,帮助他们解决之后,在昨晚发现以前整理的笔记中有这个简单教程,而且以前也发表了几篇这个博文,所以就将其全部上传上来供别人参考.如有不正确之处望 ...

  3. FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据

          前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...

  4. FusionCharts简单教程(八)-----使用网格组件

            有时候我们会觉得使用图像不够直接,对于数据的显示没有表格那样直接明了.所以这里就介绍如何使用网格组件.将网格与图像结合起来.网格组件能够将FusionCharts中的单序列数据以列表的 ...

  5. Docker简明教程

    Docker简明教程 [编者的话]使用Docker来写代码更高效并能有效提升自己的技能.Docker能打包你的开发环境,消除包的依赖冲突,并通过集装箱式的应用来减少开发时间和学习时间. Docker作 ...

  6. ArcGIS Pro 简明教程（4）工具和模型构建器

    ArcGIS Pro 简明教程(4)工具和模型构建器 by 李远祥 工具箱中的工具 ArcGIS Pro 在1.3版本基本上已经继承了ArcMap的所有工具,而且会不断加入一些它自身才有的工具,例如适 ...

  7. ArcGIS Pro 简明教程（3）数据编辑

    ArcGIS Pro 简明教程(3)数据编辑 by 李远祥 数据编辑是GIS中最常用的功能之一,ArcGIS Pro在GIS数据编辑上使用习惯有一定的改变,因此,本章可以重点看看一些编辑工具的使用和使 ...

  8. Mac安装Windows 10的简明教程

    每次在Mac上安装Windows都是一件非常痛苦的事情,曾经为了装Win8把整台Mac的硬盘数据都弄丢了,最后通过龟速系统恢复模式恢复了MacOSX(50M电信光纤下载了3天才把系统下载完),相信和我 ...

  9. Lisp简明教程

    此教程是我花了一点时间和功夫整理出来的,希望能够帮到喜欢Lisp(Common Lisp)的朋友们.本人排版很烂还望多多海涵! <Lisp简明教程>PDF格式下载 <Lisp简明教程 ...

随机推荐

  1. Chrome App远程控制

    現在google app連上chrome就能遠控了出了幾年了, 能用觸控控制mouse https://chrome.google.com/webstore/detail/chrome-remote- ...

  2. ORACLE常用数据库类型(转)

    oracle常用数据类型 1.Char 定长格式字符串,在数据库中存储时不足位数填补空格,它的声明方式如下CHAR(L),L为字符串长度,缺省为1,作为变量最大32767个字符,作为数据存储在ORAC ...

  3. 使用Seam Framework + JBoss 5.0 开发第一个Web应用 - 简单投票程序

    Seam这个单词的本意是缝合.连接,因而,Seam的作用即是把Java EE 规范里的JSF 和 EJB技术完美融合在一起,免去了很多胶合代码,并增强了JSF 和 EJB的很多功能.Seam的设计目标 ...

  4. Android中的跨进程通信方法实例及特点分析(二):ContentProvider

    1.ContentProvider简单介绍 在Android中有些数据(如通讯录.音频.视频文件等)是要供非常多应用程序使用的.为了更好地对外提供数据.Android系统给我们提供了Content P ...

  5. fragment Trying to instantiate a class com.example.testhuanxindemo.MyFragment that is not a Fragmen

    在使用fragment的时候,先创建了一个fragment,然后为他创建布局,并在oncreateview中返回载入该视图的后返回的view,在activity的布局文件里,使用xml布局,用frag ...

  6. Eclipse下Android编程代码自动提示

    在用Eclipse进行Android编程,为了代码自动提示,需要进行如下操作: 1.设置 java 文件的代码提示功能 打 开 Eclipse 依次选择 Window > Preferences ...

  7. 使用VS插件在VS2012/2013上编辑和调试Quick-Cocos2d-x的Lua代码

    vs 也能够做lua 开发,并进行代码调试 依照以下文档,调试没问题. 參考文档: 点击打开链接

  8. 浅谈OCR之Onenote 2010

    原文:浅谈OCR之Onenote 2010 上一次我们讨论了Tesseract OCR引擎的用法,作为一款老牌的OCR引擎,目前已经开源,最新版本3.0中更是加入了中文OCR功能,再加上Google的 ...

  9. poj3642 Charm Bracelet(0-1背包)

    题目意思: 给出N,M,N表示有N个物品,M表示背包的容量.接着给出每一个物品的体积和价值,求背包可以装在的最大价值. http://poj.org/problem? id=3624 题目分析: o- ...

  10. Datameer for Hadoop Solution

    Hadoop promises to become a ubiquitous framework for largescale business intelligence, but right now ...