FusionCharts_free_使用手册
电商是做什么的
FusionCharts free 使用手册
一、概述
FusionChartsInfoSoft Global公司的一个产品,InfoSoft Global 公司是专业的Flash图形方案提供商,他们还有几款其他的,基于Flash技术的产品,都非常的漂亮。FusionCharts Free则是FusionCharts提供的一个免费版本,虽然免费,功能依然强大,图形类型依然丰富。
不得不感叹技术发展的真快,99年的时候,flash刚刚在互联网上流行,那时还只是一个简单的动画软件,编程能力有限。但现在flash几乎无所不能了,图形报表则是它大展手脚的一个领域。
FusionCharts free 是一个跨平台,跨浏览器的flash图表组件解决方案,能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。你不需要知道任何关于flash编程的知识,你只需要知道你所用的编程语言就可以了。
FusionCharts free 目前最新版本是v2.1,主要做了以下改动:
增加了使用jspRuby on Rails来集成FusionCharts的代码和文档。
FusionCharts DOM更加容易地把图表加载到你的页面上。
修改了.Net的使用代码和文档。
增加了新的PHP API ,并修复了一些BUG
修改了FusionCharts.js ,以便可以支持双引号。(那就是说以前不支持?)
增加了在FusionCharts使用UTF-8编码的示例。
FusionCharts到底能做什么呢?下面就给大家展示一下。
3D/2D 柱形图

图片1

图片2

曲线图

图片3

图片4

3D/2D饼图、环图

图片5

图片6

区域图

图片7

图片8

堆栈图

图片9

图片10

联合图

图片11

图片12

蜡烛图

图片13

图片14

漏斗图

图片15

图片16

甘特图

图片17

图片18
看了这么多漂亮的图形以后,是不是有点感到兴奋呢?如果把这么漂亮专业的图形放到用户面前,相信他们也会满意的。事实上,上面的图形,只是本道的截图,真正的flash图表,在显示时还有优美的动画。
好了,就不在多 说了,下篇文章,本道将介绍如何安装使用FusionCharts
二、下载及安装
下载
你可以在下面的地址下载它。
免费漂亮的Flash图形报表-FusionCharts Free V2.1下载
文件不大,共4.22M。将FusionCharts Free(以下简称FCF)解压到任意一个目录后,点击目录下的index.html,就可以打开FCF的文档。
这份文档我们的网站上也有,地址是/demo/fusionchartsfree/昨日重现英文歌词。
目录结构
现在我们就来看看这个下载包里面都有些什么东西。
SWF文件(创建图形主要靠它们了)
所有的SWF文件(共22个)都在FusionChartsFree>Charts文件夹。如果你需要在你的web应用里创建图形,那么就把这些SWF文件都拷到你的应用下面。
FusionCharts JavaScript文件
FusionCharts JavaScript杨幂与胡歌文件放在FusionChartsFree>JSClass文件夹。这些文件能够帮你
用一种友好的方式把图形嵌入到html页面。
示例代码
所有的代码都放在FusionChartsFree>Code文件夹。
图形例子
我们创建了一些图形例子,放在FusionChartsFree>Gallery文件夹。你也可以通过文档左边的菜单Sample Charts来访问它。
文档
文档就放在FusionChartsFree>Contents文件夹,你可以直接点击FusionChartsFree下面的index.html来访问。
安装
了解了下载包的目录结构以后,我们再来看看如何安装FCFweb应用里。

只需要两个步骤即可完成安装。


1音悦v榜年度盛典exo、在你的web应用根目录下新建一个叫FusionCharts的文件夹。当然,并不是说它一定要叫这个名字,也不是一定要在根目录下。
2、把所有的SWF文件都拷贝到这个FusionCharts里。

这就完成安装了,不再需要其他多余的步骤。
当然,有些情况下,并不需要与服务器的交互(比如,你直接使用JavaScript来嵌入,而不用jspphp。数据也是直接写死在你的JavaScript代码里或xml文件里。),为了学习方便,你也可以把它安装在你的电脑上随便一个地方,比如d:\test下。安装步骤和上面的安装一样。
SWF
接下来介绍SWF文件都分别对应哪种图形。
图形类型
文件名 
Single Series Charts
Column 3D
FCF_Column3D.swf
Column 2D
FCF_Column2D.swf
Line 2D
FCF_Line.swf
Area 2D
FCF_Area2D.swf
Bar 2D
FCF_Bar2D.swf
Pie 2D
FCF_Pie2D.swf
Pie 3D
FCF_Pie3D.swf
Doughnut 2D
FCF_Doughnut2D.swf
 
Multi-series Charts
Multi-series Column 2D
FCF_MSColumn2D.swf
Multi-series Column 3D
FCF_MSColumn3D.swf
Multi-series Line 2D
FCF_MSLine.swf
Multi-series Bar 2D
FCF_MSBar2D.swf
Multi-series Area 2D
FCF_MSArea2D.swf
 
Stacked Charts
厦门景点排行榜Stacked Column 3D
FCF_StackedColumn3D.swf
Stacked Column 2D
FCF_StackedColumn2D.swf
Stacked Bar 2D
FCF_StackedBar2D.swf
Stacked Area 2D
FCF_StackedArea2D.swf
 
Combination Charts
Multi-series Column 3D + Line - Dual Y Axis
FCF_MSColumn2DLineDY.swf
Multi-series Column 3D + Line - Dual Y Axis
FCF_MSColumn3DLineDY.swf
 
Financial Charts
Candlestick Chart
FCF_Candlestick.swf
 
 
Funnel Chart
 
Funnel Chart
FCF_Funnel.swf
 
 
Gantt Chart
 
Gantt Chart
FCF_Gantt.swf
FCF支持上面的22种图形,对于大部分人来说,都足够了。
好了,到现在为止还没有开始真正的编程,大家可能有点急了吧,下篇文章我们就来创建我们的第一个Flash图形报表。
三、我的第一个图形
在介绍完了FCF的下载安装以后,现在,我们终于要开始创建我们的第一个图表了。我们将要创建一个简单的3D柱状图形,用它来展示每月销售情况摘要。
要使用FCF来创建图形,你需要做下面三件事情:
1.选择好你要创建的图形类型对应的SWF文件。例如,我们现在要创建的是3D柱状图形,那么我们的SWF文件就是FCF_Column3D.swf。上篇文章已经介绍过了,所有的SWF文件都放在FusionChartsFree>Charts文件夹里。
2.XML数据文件。FCF只接受基于XML格式的数据。因此,你需要把你的数据转成XML格式。
3.HTML文件。这个HTML文件将包含用来嵌入图形的代码。
在我们进行上面的工作之前,我们先要新建一个文件夹。例如,我们创建一个叫c:\FusionCharts 的文件夹。以后我们的例子都放到这个里面。
对于我们的第一个例子来说,我们将在c:\FusionCharts下再建一个叫MyFirstChart的文件夹。
设置SWF文件
我们还要在c:\FusionCharts下建一个叫FusionCharts的文件夹。现在,我们把所有的SWF文件都拷贝到到这个文件下面(c:\FusionCharts\FusionCharts\)。以后,我们所有例子的代码,都要引用这个文件夹下面的SWF文件。
好了,SWF文件就设置好了。
创建XML数据文档

要做报表,当然要有数据了。在这个例子里,我们准备展示一年里每个月的销售情况。所有数据看起来就像下面的表格中的一样。
我们知道,FCF只接受XML格式的数据,其他如ExcelCSVtext等都不行。
现在我们按照上表中的数据,做成一个叫lXML文件,保存在c:\FusionCharts\MyFirstChart文件夹下。这个文件的内容如下:
1. <graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'> 
2.    鱼儿在水里游来游去<set name='一月' value='462' color='AFD8F8' /> 
3.    <set name='二月' value='857' color='F6BD0F' /> 
4.    <set name='三月' value='671' color='8BBA00' /> 
5.    <set name='四月' value='494' color='FF8E46' /> 
6.    <set name='五月' value='761' color='008E8E' /> 
7.    <set name='六月' value='960' color='D64646' /> 
8.    <set name='七月' value='629' color='8E468E' /> 
9.    <set name='八月' value='622' color='588526' /> 
10.    <set name='九月' value='376' color='B3AA00' /> 
11.    <set name='十月' value='494' color='008ED6' /> 
12.    <set name='十一月' value='761' color='9D080D' /> 
13.    <set name='十二月' value='960' color='A186BE' /> 
14. </graph> 
上面的代码里,有一个叫<graph>root元素,它还有一些属性,用来定义标题,坐标轴,数值格式。我们还看到有很多<set>元素,它用来描述数据。name属性用来表示月份名称,value属性表示销售额,color属性表示图形颜。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。