FusionCharts简单教程(一)---建立第一个FusionCharts图形

摘要:
因为项目需要生成报告,所以选择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 柱形图

FusionCharts简单教程(一)---建立第一个FusionCharts图形第1张

FusionCharts简单教程(一)---建立第一个FusionCharts图形第2张

曲线图

FusionCharts简单教程(一)---建立第一个FusionCharts图形第3张

3D/2D饼图、环图

FusionCharts简单教程(一)---建立第一个FusionCharts图形第4张

FusionCharts简单教程(一)---建立第一个FusionCharts图形第5张

区域图

FusionCharts简单教程(一)---建立第一个FusionCharts图形第6张

堆栈图

FusionCharts简单教程(一)---建立第一个FusionCharts图形第7张

联合图

FusionCharts简单教程(一)---建立第一个FusionCharts图形第8张

上面仅仅是一些功能的展示,FusionCharts还可以做很多其它的事情,这里就不一一介绍了。以下介绍怎样安装使用FusionCharts。

1.2 文档结构

将下载的FusionCharts解压到随意目录,得到的解压目录里面会包括相似于此的文档结构。

FusionCharts简单教程(一)---建立第一个FusionCharts图形第9张

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"       >   
	         <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="http://t.zoukankan.com/FusionCharts/Column3D.swf" flashVars="&dataURL=../datas/Data.xml&chartWidth=600&chartHeight=500" quality="high"     name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />   
	      </object>   
	</body>   
</html> 

生成的图像:

FusionCharts简单教程(一)---建立第一个FusionCharts图形第10张

下篇将介绍怎样使用js来载入FusionCharts和使用dataXML载入数据。

免责声明:文章转载自《FusionCharts简单教程(一)---建立第一个FusionCharts图形》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇CPF 入门教程二、Apache MPM三种工作模式下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

【转】Android Drawable Resource学习(十一)、RotateDrawable

对另一个drawable资源,基于当前的level,进行旋转的drawable。 文件位置: res/drawable/filename.xml文件名即资源名 编译数据类型: 指向 RotateDrawable的指针。 资源引用: In Java: R.drawable.filenameIn XML: @[package:]drawable/filen...

检验多个xsd的xml是否合法

Java - 使用 XSD 校验 XML https://www.cnblogs.com/huey/p/4600817.html 这种方法不支持多个xsd文件,会报错 可以使用XMLBeans Tools来验证,3.1的版本用起来有问题,后来用2.6版本的就OK了 利用xmlbeans工具对xml格式进行验证(需要xsd文件) https://blog....

java web开发入门九(Maven使用&amp;amp;idea创建maven项目)基于intellig idea

Maven 1.解决的问题 jar包的依赖和管理:版本、依赖关系等 自动构建项目 2.maven介绍  1、Maven是什么?  Apache Maven是一个软件项目管理的综合工具。基于项目对象模型(POM)的概念,提供了帮助管理构建、文档、报告、依赖、发布等方法,Maven简化和标准化项目建设过程。处理编译,分配,文档,团队协作和其他任务的无缝连接。...

Android菜单详解(五)——使用XML生成菜单

回顾前面的几篇,我们都是直接在代码中添加菜单项,给菜单项分组等,这是比较传统的做法,它存在着一些不足。比如说,为了响应每个菜单项,我们需要用常量来保存每个菜单项的ID等。为此,Android提供了一种更好的方式,就是把menu也定义为应用程序的资源,通过android对资源的本地支持,使我们可以更方便地实现菜单的创建与响应。这一篇就介绍如何使用XML文件来...

在.xml文件中模糊查询的常用的3种方法

我经常使用的模糊查询的方法是: <!-- ******************** 模糊查询的常用的3种方式:********************* --> <select parameterType="User" resultType="User"> select <include refid...

XML常用标签的介绍

1、引言   在使用Java时经常遇到使用XML的情况,而因为对XML不太了解,经常配置时粘贴复制,现在对它进行总结,以备以后使用。 2、XML常见的定义  (1)XML(Extensible Markup Language):即可扩展标记语言,它的特性如下: 可扩展标记语言是一种很像超文本标记语言的标记语言。 它的设计宗旨是传输数据,而不是显示数据。...