《fusioncharts帮助文档》由会员分享，可在线阅读，更多相关《fusioncharts帮助文档（13页珍藏版）》请在金锄头文库上搜索。
1、FusionCharts 学习总结一、简介 FusionCharts 是 InfoSoft Global 公司的一个产品，InfoSoft Global 公司是专业的Flash 图形方案提供商，他们还有几款其他的，基于 Flash 技术的产品，都非常的漂亮。 FusionCharts Free 则是 FusionCharts 提供的一个免费版本，虽然免费，功能依然强大，图形类型依然丰富。 FusionCharts free 是一个跨平台，跨浏览器的 flash 图表组件解决方案，能够被ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 H
2、TML 页面甚至 PPT 调用。 FusionCharts free 新版本中所做的改动： 增加了使用 jsp 和 Ruby on Rails 来集成 FusionCharts 的代码和文档。 FusionCharts DOM 更加容易地把图表加载到页面上。 修改了.Net 的使用代码和文档。 增加了新的 PHP API ,并修复了一些 BUG。 修改了 FusionCharts.js ，以便可以支持双引号。 增加了在 FusionCharts 使用 UTF-8 编码的示例。二、报表图形分类1. 3D/2D 柱形图2. 曲线图3. 3D/2D 饼形图和环形图4. 区域图5. 堆栈图6. 联合图
3、7. 蜡烛图8. 漏斗图9. 甘特图三、报表图形对应的 swf 文件分类图形类型 文件名Single Series Charts(单系列图形)Column 3D FCF_Column3D.swfColumn 2D FCF_Column2D.swfLine 2D FCF_Line.swfArea 2D FCF_Area2D.swfBar 2D FCF_Bar2D.swfPie 2D FCF_Pie2D.swfPie 3D FCF_Pie3D.swfDoughnut 2D FCF_Doughnut2D.swfMulti-series Charts(多系列图形)Multi-series Column
4、 2D FCF_MSColumn2D.swfMulti-series Column 3D FCF_MSColumn3D.swfMulti-series Line 2D FCF_MSLine.swfMulti-series Bar 2D FCF_MSBar2D.swfMulti-series Area 2D FCF_MSArea2D.swfStacked Charts(堆栈图)Stacked Column 3D FCF_StackedColumn3D.swfStacked Column 2D FCF_StackedColumn2D.swfStacked Bar 2D FCF_StackedBar
5、2D.swfStacked Area 2D FCF_StackedArea2D.swfCombination Charts(组合图)Multi-series Column 3D + Line - Dual Y Axis FCF_MSColumn2DLineDY.swfMulti-series Column 3D + Line - Dual Y Axis FCF_MSColumn3DLineDY.swfFinancial Charts(财经图，即蜡烛图)Candlestick Chart FCF_Candlestick.swfFunnel Chart(漏斗图)Funnel Chart FCF_F
6、unnel.swfGantt Chart(甘特图)Gantt Chart FCF_Gantt.swf四、安装使用1. 在 web 项目目录下新建一个文件夹( 如 FusionCharts)，并把所有的 SWF 文件都拷贝到这个文件夹里。2. 在页面导入 FusionCharts.js 文件，如：3. js 加载数据生成报表(有两种方法)方法一：xml 文件引用法(1)定义一个固定格式的 xml 文件（以 Data.xml 为例）Date.xml 的内容如下：(2) js 加载方法，代码如下：var myChart2 = new FusionCharts(./FusionCharts/FCF_C
7、olumn3D.swf,myChartId2, 600,300);myChart2.setDataURL(Data.xml); myChart2.render(chartdiv1);方法二：字符串加载法（1） 定义一个有固定格式的字符串，即可以将上述 xml 文件组合成字符串var dataXml = “ ”;（2）js 加载方法，代码如下：var myChart2 = new FusionCharts(./FusionCharts/FCF_Column3D.swf,myChartId2, 600,300);myChart2.setDataURL(dataXml); myChart2.rend
8、er(chartdiv1);解析：操作步骤：建立对象：用四个参数建立了一个 FusionCharts 对象，var myChart = new FusionCharts(./FusionCharts/FCF_Column3D.swf, myChartId, 600, 500);第一个参数是 SWF 文件的地址。第二个是图形的 id。这个 id 可以随便叫什么，但是要注意，当一个页面里有多个图形的时候，这个 id 一定要是唯一的。第三个参数是图形的宽。第四个参数是图形的高。加载数据：第一种加载方法需要设置数据文件的地址。如：myChart.setDataURL(Data.xml);第二种加载方法
9、需要设置对应的字符串。如：myChart2.setDataURL(dataXml); /dataXml 为字符串把图形渲染在指定的地方。myChart.render(chartdiv);chartdiv就是前面的 DIV 的 id，这就表示把图形 render 到chartdiv ，即 Flash 图形就出现在这个 id 为chartdiv1 的 DIV 里。四、引起 flash 图像不能显示的可能原因（一）如果没有在页面上看到图形，可能是下面的原因之一：1. SWF 没有放到正确的文件夹。2. 在 html 文件里，SWF 的路径设置不正确。3. 没有安装 Flash Player。4. 没
10、有启用浏览器 Flash 播放选项。（二）如果你得到了一个“Error in Loading Data”的消息，可能是：1. xml 文件没放到正确的文件夹。2. xml 的文件名不正确。比如，你可能不小心把它命名 Data.xml.txt。（三）如果你得到了一个“Invalid XML Data ”的消息，可能是： 1. xml 文件里的内容有错误。五、特殊字符在 FCF 里，一些特殊的编码都需要经过编码。如：“”欧元符号 需要用“%80”替换“”英镑符号 需要用“%A3”替换“￥”人名币符号 需要用“%A5”替换“”分符号 需要用“%A2”替换 “%”百分号 需要用“%25”替换“&”连字
11、符 需要用“&”替换“”大于号 需要用“”替换如果要显示双引号，直接使用就可以了，前提是属性值是用单引号括起来的。如果属性值是用双引号括起来的，要显示单引号，也可以直接使用，而不必用“”来替换它。五、属性参数大全FusionCharts 的 XML 标签属性有以下四种数据类型：* Boolean - 布尔类型，只能为 1 或者 0。例如： * Number - 数字类型，只能为数字。例如： * String - 字符串类型，只能为字符串。例如： * HexColorCode - 六进制颜色代码，前边没有# 。例如： 1. 功能特性animation bool是否动画显示数据，默认为 1(Tru
12、e)palette number使用默认的调色板(1-5)showNames bool是否显示横向坐标轴(x 轴)标签名称showLables bool是否显示标签，默认为 1(True)显示(set 中有 lable 属性时)rotateNames bool是否旋转显示标签(name) ，默认为 0(False):横向显示rotateLabels bool设置 x 轴上的 lable 显示方式，默认为 0 横向显示showValues bool是否在图表显示对应的数据值，默认为 1(True)yAxisMinValue number指定纵轴(y 轴)最小值，数字yAxisMaxValue n
13、umber 指定纵轴(y 轴 )最小值，数字showLimits bool是否显示图表限值(y 轴最大、最小值)，默认为 1(True)labelDisplay string 标签的呈现方式 “WRAP”,”STAGGER”,”ROTATE”,“NONE”（超长屏蔽、折行、倾斜、不显示）staggerLines number多少个字符后折行（labelDisplay=stagger）rotateValues bool是否滚动显示值 （showValues=1）showYAxisValues bool是否显示 y 轴数据yAxisValuesStep numbery 轴标记的显示间隔adjust
14、Div bool自动调整 divlinesclickURL string图表的焦点链接地址defaultAnimation bool是否开启默认动画connectNullData bool是否呈现空值（? ）slantLabels boolshowDivLineValues boolrotateYAxisName boolyAxisNameWidth number (In Pixels)labelStep number (1 or above)setAdaptiveYMin2. 图表标题和轴名称 caption string图表主标题subCaption string 图表副标题xAxisName string横向坐标轴(x 轴) 名称yAxisName string 纵向坐标轴(y 轴) 名称3. 图表和画布的样式bgColor color图表背景色，可以使用逗号分割多个颜色值 6 位 16 进制颜色值bgRatio number多个颜色值所占的比率，0-100bgAngle number角度，0-360bgSWF string 设置一个外部的 Flash 为 flash 的背景(须在同一个域下)bgSWFAlpha number 背景 flash 透明度，0-100bgAlpha number设置图表背景透明度，0-
