由于该项目需要的报告需要做的事情，选择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. JEECG开源团队招募新成员 2014年

    JEECG开源团队招募新成员 2014年 截止日期:2014-06-01        JEECG开源项目 是一款基于代码生成器的微云高速开发平台.提供企业高速开发和採用微信实现移动应用的解决方式.J ...

  2. make 2>&1 | tee log.txt之小析

    前言 接触过linux的人,或多或少都会了解一点make 2>&1 | tee log.txt这个命令. 1. make是什么? make是linux下一个非常强大的命令,简单点就是你要 ...

  3. Struts2中指定的校验文件不起作用的原因

    转载请注意出处:http://blog.csdn.net/bettarwang/article/details/39801733 我们知道,假设要为某个Action指定校验文件.那么就要将" ...

  4. spark的action和transformations汇集

    汇总了Spark支持的Transformations 和Actions 用于备忘! 參考 http://spark.apache.org/docs/latest/programming-guide.h ...

  5. [Java聊天室server]实战之五 读写循环（服务端)

    前言 学习不论什么一个稍有难度的技术,要对其有充分理性的分析,之后果断做出决定---->也就是人们常说的"多谋善断":本系列尽管涉及的是socket相关的知识,但学习之前,更 ...

  6. zend framework将zip格式的压缩文件导入并解压到指定文件

    html代码 <pre class="php" name="code"><fieldset> <legend>批量导入学生照 ...

  7. BGP拓扑错误模拟配置

    R1配置 --------------------------------------------- version 5.20, ESS 2207P45# sysname RT1# super pas ...

  8. 第1次实验——NPC问题(回溯算法、聚类分析)

    题目:八皇后问题,是一个古老而著名的问题,是回溯算法的典型案例.该问题是国际西洋棋棋手马克斯·贝瑟尔于1848年提出:在8X8格的国际象棋上摆放八个皇后,使其不能互相攻击,即随意两个皇后都不能处于同一 ...

  9. 新 Netflix 开源门户

    Netflix 开源改革计划:新 Netflix 开源门户 http://www.oschina.net/news/67555/evolution-of-open-source-at-netflix ...

  10. Redis在win7上的安装与可视化应用

    Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...