由于该项目需要的报告需要做的事情，选择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. MVVM Light须要注意的10个问题

    MVVM Light须要注意的10个问题 从使用XAML技术基础開始(实际上并非非常久曾经).我便关注MVVM(Model – View – ViewModel)模式.偶然接触到MVVM Light不 ...

  2. JMS的样例

    1.JMS是一个由AS提供的Message服务.它能接受消息产生者(Message Provider)所发出的消息,并把消息转发给消息消费者(Message  Consumer).2.JMS提供2种类 ...

  3. linux通过使用mail发送电子邮件

    通过外部方法发送的电子邮件 bin/mail默认为本地sendmail发送电子邮件,求本地的机器必须安装和启动Sendmail服务.配置很麻烦,并且会带来不必要的 资源占用.而通过改动配置文件能够使用 ...

  4. ZooKeeper安装与运行

    ZooKeeper安装与运行 首先从官网下载ZooKeeper压缩包,然后解压下载得到的ZooKeeper压缩包,发现有“bin,conf,lib”等目录.“bin目录”中存放有运行脚本:“conf目 ...

  5. C语言内存对齐

    转:http://blog.csdn.net/embeddedman/article/details/7429976 首先由一个程序引入话题:  1 //环境:vc6 + windows sp2 2  ...

  6. web开发性能优化---用户体验篇

    怎样从技术角度怎样增强用户体验.都是非常多平台都在做的事情,依据个人实际经验碰到几种体验做下总结. 1.降低页面刷新白屏 适当使用ajax技术.改善刷新白屏现象. 2.信息提醒,邮件.站内信.短信在购 ...

  7. Linux/UNIX之信号（2）

    信号(2) sigaction函数 sigaction函数的功能是检查或改动与制定信号相关联的处理动作.此函数代替了signal函数. #include <signal.h> int si ...

  8. iOS 单元測试之XCTest具体解释（一）

    原创blog,转载请注明出处 blog.csdn.net/hello_hwc 欢迎关注我的iOS-SDK具体解释专栏 http://blog.csdn.net/column/details/huang ...

  9. hdu 2838 Cow Sorting（树状数组）

    Cow Sorting Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  10. Java 使用AES/CBC/PKCS7Padding 加解密字符串

    介于java 不支持PKCS7Padding,只支持PKCS5Padding 但是PKCS7Padding 和 PKCS5Padding 没有什么区别要实现在java端用PKCS7Padding填充, ...