fusionchartsfree学子笔记整理

标签：

一、概述

FusionCharts是InfoSoft Global公司的一个产品，InfoSoft Global 公司是专业的Flash图形方案提供商，他们还有几款其他的，基于Flash技术的产品，都非常的漂亮。FusionCharts Free则是FusionCharts提供的一个免费版本，虽然免费，功能依然强大，图形类型依然丰富。

FusionCharts free 是一个跨平台，跨浏览器的flash图表组件解决方案，能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。

二、目录介绍 

      下载地址：

目录结构：

SWF文件（创建图形主要靠它们了）
所有的SWF文件（共22个）都在FusionChartsFree>Charts文件夹下

FusionCharts JavaScript和样式文件
FusionCharts JavaScript文件放在FusionChartsFree>JSClass文件夹。

示例代码
所有的代码都放在FusionChartsFree>Code文件夹。这些文件能够帮你用一种友好的方式把图形嵌入到html页面。

图形例子
放在FusionChartsFree>Gallery文件夹。你也可以通过文档左边的菜单Sample Charts来访问它（打开index.html>Sample Charts）。

文档
文档就放在FusionChartsFree>Contents文件夹，你可以直接点击FusionChartsFree下面的index.html来访问。

三、我的第一个图形

在介绍完了FCF的下载安装以后，现在，我们终于要开始创建我们的第一个图表了。我们将要创建一个简单的3D柱状图形，用它来展示每月销售情况摘要。

要使用FCF来创建图形，你需要做下面三件事情：
1.选择好你要创建的图形类型对应的SWF文件。例如，我们现在要创建的是3D柱状图形，那么我们的SWF文件就是FCF_Column3D.swf。上篇文章已经介绍过了，所有的SWF文件都放在FusionChartsFree>Charts文件夹里。
2.XML数据文件。FCF只接受基于XML格式的数据。因此，你需要把你的数据转成XML格式。
3.HTML文件。这个HTML文件将包含用来嵌入图形的代码。

在项目里新建以一个文件夹命名：FusionChartsFree 把 Charts文件夹和JSClass 直接拖进项目里

创建XML数据文件：

<graph caption=‘每月销售额柱形图‘ xAxisName=‘月份‘ yAxisName=‘Units‘ showNames=‘1‘ decimalPrecision=‘0‘ formatNumberScale=‘0‘>   
   <set name=‘一月‘ value=‘462‘ color=‘AFD8F8‘ />
      <set name=‘二月‘ value=‘857‘ color=‘F6BD0F‘ />   
   <set name=‘三月‘ value=‘671‘ color=‘8BBA00‘ />   
   <set name=‘四月‘ value=‘494‘ color=‘FF8E46‘ />   
   <set name=‘五月‘ value=‘761‘ color=‘008E8E‘ />   
    <set name=‘六月‘ value=‘960‘ color=‘D64646‘ />   
    <set name=‘七月‘ value=‘629‘ color=‘8E468E‘ />   
   <set name=‘八月‘ value=‘622‘ color=‘588526‘ />   
   <set name=‘九月‘ value=‘376‘ color=‘B3AA00‘ />   
   <set name=‘十月‘ value=‘494‘ color=‘008ED6‘ />   
   <set name=‘十一月‘ value=‘761‘ color=‘9D080D‘ />   
   <set name=‘十二月‘ value=‘960‘ color=‘A186BE‘ />   
</graph>   

DateXML

上面的代码里，有一个叫<graph>的root元素，它还有一些属性，用来定义标题，坐标轴，数值格式。我们还看到有很多<set>元素，它用来描述数据。name属性用来表示月份名称，value属性表示销售额，color属性表示图形颜色。

好了数据源有了现在就实现圆柱形报表吧

方法一：采用Jquery 方式实现

新建一个html页 我使用webfrom为例：

fusionchartsfree学子笔记整理

标签：

原文地址：http://www.cnblogs.com/xiaoshitou/p/4645689.html