报表fusioncharts学习笔记.docx
- 文档编号：4307621
- 上传时间：2022-11-29
- 格式：DOCX
- 页数：41
- 大小：96.71KB
报表fusioncharts学习笔记.docx
《报表fusioncharts学习笔记.docx》由会员分享，可在线阅读，更多相关《报表fusioncharts学习笔记.docx（41页珍藏版）》请在冰豆网上搜索。
报表fusioncharts学习笔记
FusionCharts
学习笔记
FusionCharts
简介4
优点：
4
FusionCharts支持图表类型：
4
目录结构（下载包里面的东西）：
4
安装5
SWF5
FusionChartsFree我的第一个图形7
设置SWF文件7
创建XML数据文档7
创建包含图形的HTML文件8
图形转换9
FusionChartsFree使用JavaScript加载图形10
使用JS加载10
多图形11
FusionChartsFree使用dataXML加载数据12
使用dataXML提供数据12
使用JavaScript和dataXML14
setDataXML（）方法的问题15
最佳模式15
FusionChartsFree图形的基本元素15
图形背景和画布15
ChartLabels（图形标签）15
DIVlines（刻度线）16
Alternating（间隔色）16
HoverCaption（提示信息）16
Anchors（锚点）16
FusionChartsFree和XML16
数据类型16
单系列图形17
多系列图形17
FusionChartsFree和组合图XML19
什么是组合图形19
代码19
简单解释20
注意21
动态改变图形的类型和数据21
动态改变图形的类型21
动态改变图形的数据23
FCF中的下钻24
普通的超链接24
新窗口超链接24
JavaScript连接25
FCF中的基本数字格式25
控制小数位位数25
自动格式化数字25
自定义千分位和小数分隔符25
增加数字前缀和后缀26
FCF中的特殊字符26
欧元符号26
英镑符号26
人民币符号26
分符号27
百分号符号27
&符号27
>符号27
单引号符号28
间断数据处理28
在JSP里使用FCF31
简介
FusionCharts是InfoSoftGlobal公司的一个产品，InfoSoftGlobal公司是专业Flash图形方案提供商，他们还有几款其他的，基于Flash技术的产品，都非常漂亮。
FusionCharts是一个跨平台，跨浏览器的flash图表组建解决方案，能够被ASP.NET，PHP，JSP，ColdFusion，RubyonRails.简单HTML页面甚至PPT调用。
你不需要知道任何关于flash编程的知识，你只需要知道你所用的编程语言就可以了。
FusionCharts是一个闪光的图表组件，它可以用来制作数据动画图表，其中动画效果用的是AdobeFlash8（原MacromediaFlash的）制作的flash，FusionCharts可用于任何网页的脚本语言类似于HTML，.NET,ASP，JSP技术的，PHP，ColdFusion等，提供互动性和强大的图标。
使用XML作为其数据接口，FusionCharts充分利用流体美丽的Flash创建紧凑，互动性和视觉逮捕图表。
优点：
动画和交互图
易于使用
运行在各种平台
降低您服务器的负载
大量的图标类型
FusionCharts支持图表类型：
3D/2D柱形图
曲线图
3D/2D饼图、环图
区域图
堆栈图
联合图
蜡烛图
漏斗图
甘特图
目录结构（下载包里面的东西）：
1）SWF文件（创建图形主要靠它们）
所有的SWF文件（共22个）都在\FusionChartsFree\Charts文件夹。
如果需要在web应用里创建图形，那么就把这些文件都拷到应用下面。
2）FusionChartsJavaScript文件
FusionChartsJavaScript文件放在\FusionChartsFree\JSClass文件夹。
这些文件能帮助我们用一种友好的方式把图形嵌入到html页面。
3）示例代码
所有的代码都放在\FusionChartsFree\Code文件夹。
4）图形例子
一些图形例子，放在\FusionChartsFree\Gallery文件夹。
也可以通过文档左边的菜单SampleCharts来访问它。
5）文档
文档就放在\FusionChartsFree\Contents文件夹，也可以直接点击FusionChartsFree下面的index.html来访问。
安装
了解了下载包的目录结构以后，我们再来看看如何安装FCF到web里。
只需要两个步骤即可完成安装：
1）在web应用根目录下新建一个叫FusionCharts的文件夹。
当然，并不是说它一定要交这个名字，也不是一定要在根目录下。
2）把所有的SWF文件都拷贝到这个FusionCharts里。
这就完成安装了，不再需要其他多余的步骤。
当然，有些情况下，并不需要与服务器的交互（比如，直接使用JavaScript来嵌入，而不用jsp或php。
数据也是直接写死在JavaScript代码里或xml文件里。
），为了学习方便，也可以把它安装在电脑上随便一个地方，比如d:
test下。
安装步骤和上面的安装一样。
SWF
接下来介绍SWF文件都分别对应哪些图形。
图形类型
文件名
单系列图形
Column3D
FCF_Column3D.swf
Column2D
FCF_Column2D.swf
Line2D
FCF_Line.swf
Area2D
FCF_Area2D.swf
Bar2D
FCF_Bar2D.swf
Pie2D
FCF_Pie2D.swf
Pie3D
FCF_Pie3D.swf
Doughnut2D
FCF_Doughnut2D.swf
多系列图形
Multi-seriesColumn2D
FCF_MSColumn2D.swf
Multi-seriesColumn3D
FCF_MSColumn3D.swf
Multi-seriesLine2D
FCF_MSLine.swf
Multi-seriesBar2D
FCF_MSBar2D.swf
Multi-seriesArea2D
FCF_MSArea2D.swf
堆栈图
StackedColumn2D
FCF_StackedColumn2D.swf
StackedColumn3D
FCF_StackedColumn3D.swf
StackedBar2D
FCF_StackedBar2D.swf
StackedArea2D
FCF_StackedArea2D.swf
组合图
Multi-seriesColumn3D+Line-DualY
Axis
FCF_MSColumn2DLineDY.swf
Multi-seriesColumn3D+Line-DualY
Axis
FCF_MSColumn3DLineDY.swf
财经图
CandlestickChart
FCF_Candlestick.swf
漏斗图
FunnelChart
FCF_Funnel.swf
甘特图
GanttChart
FCF_Gantt.swf
FCF支持上面的22中图形，对于大部分人来说，都足够了。
FusionChartsFree我的第一个图形
首先创建一个简单的3D柱状图形，用它来展示每月销售情况摘要。
要使用FCF来创建图形，需要做下面三件事情：
1）选择好要创建的图形类型对应的SWF文件。
例如，我们现在要创建的是3D柱状图形，那么我们的SWF文件就是FCF_Column3D.swf。
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格式的数据，其他如Excel，CSV，text等都不行。
现在我们按照上某表中的数据做成一个叫Data.xml的XML的文件，保存在c:
\FusionCharts\MyFirstChart文件夹下。
这个文件的内容如下：
上面代码里有一个叫
还看到有很多
name属性用来表示月份名称，value属性表示销售额，color属性表示图形颜色。
创建包含图形的HTML文件
每个图形都要被放到HTML文件里才能显示，现在，我们把下面的代码保存到
c:
\FusionCharts\MyFirstChart\Chart.html文件里。
D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= version=6,0,0,0"width="600"height="500"id="Column3D">
varmyChart=newFusionCharts（"../FusionCharts/FCF_Column3D.swf","myChartId","600","500"）;
myChart.setDataURL（"Data.xml"）;
myChart.render（"chartdiv"）;