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简明教程 ...
随机推荐
- Chrome App远程控制
現在google app連上chrome就能遠控了出了幾年了, 能用觸控控制mouse https://chrome.google.com/webstore/detail/chrome-remote- ...
- ORACLE常用数据库类型(转)
oracle常用数据类型 1.Char 定长格式字符串,在数据库中存储时不足位数填补空格,它的声明方式如下CHAR(L),L为字符串长度,缺省为1,作为变量最大32767个字符,作为数据存储在ORAC ...
- 使用Seam Framework + JBoss 5.0 开发第一个Web应用 - 简单投票程序
Seam这个单词的本意是缝合.连接,因而,Seam的作用即是把Java EE 规范里的JSF 和 EJB技术完美融合在一起,免去了很多胶合代码,并增强了JSF 和 EJB的很多功能.Seam的设计目标 ...
- Android中的跨进程通信方法实例及特点分析(二):ContentProvider
1.ContentProvider简单介绍 在Android中有些数据(如通讯录.音频.视频文件等)是要供非常多应用程序使用的.为了更好地对外提供数据.Android系统给我们提供了Content P ...
- fragment Trying to instantiate a class com.example.testhuanxindemo.MyFragment that is not a Fragmen
在使用fragment的时候,先创建了一个fragment,然后为他创建布局,并在oncreateview中返回载入该视图的后返回的view,在activity的布局文件里,使用xml布局,用frag ...
- Eclipse下Android编程代码自动提示
在用Eclipse进行Android编程,为了代码自动提示,需要进行如下操作: 1.设置 java 文件的代码提示功能 打 开 Eclipse 依次选择 Window > Preferences ...
- 使用VS插件在VS2012/2013上编辑和调试Quick-Cocos2d-x的Lua代码
vs 也能够做lua 开发,并进行代码调试 依照以下文档,调试没问题. 參考文档: 点击打开链接
- 浅谈OCR之Onenote 2010
原文:浅谈OCR之Onenote 2010 上一次我们讨论了Tesseract OCR引擎的用法,作为一款老牌的OCR引擎,目前已经开源,最新版本3.0中更是加入了中文OCR功能,再加上Google的 ...
- poj3642 Charm Bracelet(0-1背包)
题目意思: 给出N,M,N表示有N个物品,M表示背包的容量.接着给出每一个物品的体积和价值,求背包可以装在的最大价值. http://poj.org/problem? id=3624 题目分析: o- ...
- Datameer for Hadoop Solution
Hadoop promises to become a ubiquitous framework for largescale business intelligence, but right now ...