FusionCharts简单教程（一）---创建第一个FusionCharts图形

时间 2019-11-11

标签 fusioncharts 简单教程创建第一个图形繁體版

原文原文链接

由于项目需求需要作一个报表，选择FusionCharts做为工具使用。由于曾经没有接触过报表，网上也没有比較具体的fusionCharts教程，因此决定好好研究FusionCharts，同一时候作一个比較简单的教程提供參考。由于能力有限(应届毕业生的菜鸟而已)，因此教程(学习笔记而已)难免会有错误，望别喷，望指正。固然确定避免不了会參考其它资料的。javascript

1、FusionCharts简单介绍和安装使用

1．一、简单介绍

FusionCharts是InfoSoft Global公司的一个产品,而FusionCharts Free则是FusionCharts提供的一个免费版本号，尽管免费，功能依旧强大，图形类型依旧丰富。这里介绍了都是基于FusionCharts Free的。

FusionCharts free 是一个跨平台，跨浏览器的flash图表组件解决方式，能够被 ASP、.NET, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。咱们不需要知道不论什么Flash的知识，仅仅需要了解你所用的编程语言而已。html

FusionCharts功能强大，那么它究竟能够作什么呢？如下一一展现。java

3D/2D 柱形图编程

曲线图

3D/2D饼图、环图浏览器

区域图app

堆栈图编程语言

联合图工具

上面仅仅是一些功能的展现，FusionCharts还能够作不少其它的事情，这里就不一一介绍了。如下介绍怎样安装使用FusionCharts。学习

1.2 文档结构

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

Charts ：里面包括着所有的SWF文件，假设你的Web项目需要建立图像，则导入对应的SWF文件就能够。

Code ：里面包括了所有的演示样例代码。

Contents ：包括了文档，也就是API，包括了FusionCharts的用法。

Gallery ：包括了一些图像的建立样例。

JSClass：FusionCharts javascript文件就放在这个目录下，这些文件能够帮组咱们以一种友好的方式将图像插入到页面中。

1.3安装使用

在了解了FusionCharts的文档结构后，如下来解说怎样将FusionCharts应用到应用程序中。事实上FusionCharts的用法很是easy。仅仅需要三个步骤就行搞定。

一、导入你要建立图像相对应的SWF文件。

二、编写XML数据文件。

三、编写HTML文件，这个文件要包括显示图像的对应代码。

2、个人第一个FusionCharts

介绍了这么久，最终能够建立第一个图像了。我将以一种比較简单的方式来建立一个3D柱状的图形，用来显示每个月某件商品的销售状况。

2.一、建立project

新建目录，命名为FusionCharts，而后在新建两个目录分别命名为FusionCharts、datas。这两个文件分别用于存放SWF文件和xml数据文件。

2.二、导入文件

将对应的3D柱状图像的SWF：Column3D.swf拷贝到FusionCharts目录中。

2.三、建立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.四、编写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载入数据。