由于该项目需要的报告需要做的事情，选择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. Android消息循环分析

    我们的经常使用的系统中,程序的工作一般是有事件驱动和消息驱动两种方式,在Android系统中,Java应用程序是靠消息驱动来工作的. 消息驱动的原理就是: 1. 有一个消息队列.能够往这个队列中投递消 ...

  2. MVC Json 回报

    /// <summary> /// 获取评论列表 /// </summary> /// <param name="pageIndex">< ...

  3. make工具与Makefile文件

    make工具与Makefile文件 阅读目录 1. make工具 2. Makefile文件 3. Makefile的简单示例 4. 伪目标 5. Makefile 自动化变量 6. 编译生成多个可执 ...

  4. [C++]函数指针与指针函数

    函数指针与指针函数,之前总是分不清,今天就好好把它两认认清楚. 先从概念说起,简单是理解. 函数指针:是指针.一个指向某一个函数入口地址的指针. 指针函数:是函数.一个返回值是指针的函数. 记忆: 从 ...

  5. SmartDraw2008破解过程总结

    SmartDraw2008破解过程总结作者:chszs  原创转载请保留作者名. 按下列步骤完毕,保证能够支持中文. 一.所需软件:1)SmartDraw2008安装软件:2)SmartDraw200 ...

  6. C++ Primer 学习笔记_61_重载操作符与转换 --自增/自减操作符

    重载操作符与转换 --自增/自减操作符 引言: 自增,自减操作符常常由诸如迭代器这种类实现,这种类提供相似于指针的行为来訪问序列中的元素.比如,能够定义一个类,该类指向一个数组并为该数组中的元素提供訪 ...

  7. Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。

    Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等. Cordova还提供了一组统一的JavaScript类库,以及为这 ...

  8. Fashion Meets Finance聚会来袭-7月19日 北京

    http://mp.weixin.qq.com/mp/appmsg/show?__biz=MjM5NjEzMjMyMQ%3D%3D&appmsgid=10000704&itemidx= ...

  9. Android开发系列（二十二）：AdapterViewFlipper的功能和使用方法

    AdapterViewFlipper继承了AdapterViewAnimator,它会显示一个View组件,能够通过showPrevious()和showNext()方法控制组件显示上一个.下一个组件 ...

  10. cocos2d_x_05_Box2D物理引擎

    一.认识Box2D 帮助文档,共69页 二.创建一个物理世界 先导入主头文件 #include <Box2D/Box2D.h> 三.物理世界一览 像素转成米 的比例因子 就是32 三.运动 ...