FusionCharts学习总结
一、简介
FusionCharts 是InfoSoft Global 公司的一个产品，InfoSoft Global 公司是专业的Flash 图形方案提供商，他们还有几款其他的，基于Flash 技术的产品，都非常的漂亮。
FusionCharts Free 则是FusionCharts 提供的一个免费版本，虽然免费，功能依然强大，图形类型依然丰富。
FusionCharts free 是一个跨平台，跨浏览器的flash 图表组件解决方案，能够被https://www.doczj.com/doc/b012570889.html,, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单HTML 页面甚至PPT 调用。
FusionCharts free新版本中所做的改动：
?增加了使用jsp 和Ruby on Rails 来集成FusionCharts 的代码和文档。
?FusionCharts DOM 更加容易地把图表加载到页面上。
?修改了.Net 的使用代码和文档。
?增加了新的PHP API ,并修复了一些BUG。
?修改了FusionCharts.js ，以便可以支持双引号。
?增加了在FusionCharts 使用UTF-8 编码的示例。
二、报表图形分类
1. 3D/2D柱形图
3. 3D/2D饼形图和环形图
4. 区域图
6.联合图
7. 蜡烛图
8. 漏斗图
9. 甘特图
三、报表图形对应的swf文件分类
四、安装使用
1. 在web项目目录下新建一个文件夹( 如FusionCharts)，并把所有的SWF 文件都拷贝到这个文件夹里。
2. 在页面导入FusionCharts.js文件，如：
3. js加载数据生成报表(有两种方法)
方法一：xml文件引用法
(1)定义一个固定格式的xml文件（以Data.xml为例）
方法二：字符串加载法
解析：操作步骤：
<1>建立对象：
用四个参数建立了一个FusionCharts对象，
var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");
第一个参数是SWF文件的地址。
第二个是图形的id。这个id可以随便叫什么，但是要注意，当一个页面里有多个图形的时候，这个id一定要是唯一的。
第三个参数是图形的宽。
第四个参数是图形的高。
<2> 加载数据：
第一种加载方法需要设置数据文件的地址。如：
myChart.setDataURL("Data.xml");
第二种加载方法需要设置对应的字符串。如：
myChart2.setDataURL(dataXml); //dataXml为字符串
<3> 把图形渲染在指定的地方。
myChart.render("chartdiv");
"chartdiv"就是前面的DIV的id，这就表示把图形render到"chartdiv"，即Flash图形就出现在这个id为"chartdiv1"的DIV里。
四、引起flash图像不能显示的可能原因
（一）如果没有在页面上看到图形，可能是下面的原因之一：
1. SWF没有放到正确的文件夹。
2. 在html文件里，SWF的路径设置不正确。
3. 没有安装Flash Player。
4. 没有启用浏览器Flash播放选项。
（二）如果你得到了一个“Error in Loading Data”的消息，可能是：
1. xml文件没放到正确的文件夹。
2. xml的文件名不正确。比如，你可能不小心把它命名Data.xml.txt。
（三）如果你得到了一个“Invalid XML Data”的消息，可能是：
1. xml文件里的内容有错误。
五、特殊字符
在FCF里，一些特殊的编码都需要经过编码。如：
“€”欧元符号———需要用“%80”替换
“￡”英镑符号———需要用“%A3”替换
“￥”人名币符号——需要用“%A5”替换
“￠”分符号————需要用“%A2”替换
“%”百分号————需要用“%25”替换
“&”连字符————需要用“&”替换
“>”大于号————需要用“>”替换
“'”单引号————需要用“'”替换
如果要显示双引号，直接使用就可以了，前提是属性值是用单引号括起来的。如果属性值是用双引号括起来的，要显示单引号，也可以直接使用，而不必用“'”来替换它。
五、属性参数大全
FusionCharts的XML标签属性有以下四种数据类型：
* Boolean - 布尔类型，只能为1或者0。例如：
* Number - 数字类型，只能为数字。例如：
* String - 字符串类型，只能为字符串。例如：
* HexColorCode - 六进制颜色代码，前边没有‘#’。例如：
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
1. 功能特性
animation …………………………[bool]是否动画显示数据，默认为1(True)
palette ……………………………[number]使用默认的调色板(1-5)
showNames ………………………[bool]是否显示横向坐标轴(x轴)标签名称
showLables ………………………[bool]是否显示标签，默认为1(True)显示(set中有lable属性时) rotateNames ………………………[bool]是否旋转显示标签(name)，默认为0(False):横向显示rotateLabels ………………………[bool]设置x轴上的lable显示方式，默认为0横向显示showV alues ………………………[bool]是否在图表显示对应的数据值，默认为1(True) yAxisMinV alue …………………[number]指定纵轴(y轴)最小值，数字
yAxisMaxV alue …………………[number] 指定纵轴(y轴)最小值，数字
showLimits ………………………[bool]是否显示图表限值(y轴最大、最小值)，默认为1(True) labelDisplay ………………………[string ]标签的呈现方式[“WRAP”,”STAGGER”,”ROTA TE”,
“NONE”]（超长屏蔽、折行、倾斜、不显示）
staggerLines ……………………[number]多少个字符后折行（labelDisplay=’stagger’）
rotateV alues ………………………[bool]是否滚动显示值（showV alues=’1’）
showY AxisV alues …………………[bool]是否显示y轴数据
yAxisV aluesStep …………………[number]y轴标记的显示间隔
adjustDiv …………………………[bool]自动调整divlines
clickURL …………………………[string]图表的焦点链接地址
defaultAnimation …………………[bool]是否开启默认动画
connectNullData …………………[bool]是否呈现空值（?）
slantLabels ………………………[bool]
showDivLineV alues ………………[bool]
rotateY AxisName …………………[bool]
yAxisNameWidth ………………[number] (In Pixels)
labelStep ………………………[number] (1 or above)
setAdaptiveYMin
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
2. 图表标题和轴名称
caption …………………………[string]图表主标题
subCaption ………………………[string] 图表副标题
xAxisName ……………………[string]横向坐标轴(x轴)名称
yAxisName ……………………[string] 纵向坐标轴(y轴)名称
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
3. 图表和画布的样式
bgColor ……………………[color]图表背景色，可以使用逗号分割多个颜色值6位16进制颜色值bgRatio ………………………[number]多个颜色值所占的比率，[0-100]
bgAngle ………………………[number]角度，[0-360]
bgSWF ………………………[string] 设置一个外部的Flash 为flash的背景(须在同一个域下) bgSWFAlpha …………………[number] 背景flash透明度，[0-100] bgAlpha………………………[number]设置图表背景透明度，[0-100]
shadowAlpha …………………[number]投影透明度，[0-100]
showLegend …………………[bool]是否显示系列名，默认为1(True)
canvasBgColor …………………[color]画布背景色，6位16进制颜色值
canvasBgAlpha …………………[number]画布透明度，[0-100] 0为不透明canvasBorderColor ……………[color]画布边框颜色，6位16进制颜色值canvasBorderThickness …………[number]画布边框厚度，[0-100]
canvasBaseColor ………………[color]设置图表基部的颜色，6位16进制颜色值canvasBaseDepth ………………[number]设置图表基部的高度
canvasBgDepth …………………[number]设置图表背景的深度
showCanvasBg …………………[bool]设置是否显示图表背景
showBorder ……………………[bool]画布透明度，默认为1显示
showCanvasBase ………………[bool]设置是否显示图表基部
pieFillAlpha ……………………[number]各色块填充颜色的深度
pieSliceDepth …………………[bool]设置各个色块间隔线的宽度(不能与pieBorderAlpha同用) useRoundEdges ………………[bool]设置图表图形边角是否是为圆角，默认为0不是chartLeftMargin ………………[number]设置图表左边距，像素
chartRightMargin ………………[number]设置图表右边距，像素
chartTopMargin ………………[number]设置图表上边距，像素
chartBottomMargin ……………[number]设置图表下边距，像素
canvasBgRatio …………………[ ?]
canvasBgAngle …………………[number]
borderColor ……………………[color]
borderThickness ………………[number]
borderAlpha ……………………[number]
canvasBorderAlpha ……………[number]
captionPadding …………………[?]
xAxisNamePadding ……………[?]
yAxisNamePadding ……………[?]
yAxisV aluesPadding ……………[?]
labelPadding ……………………[?]
valuePadding ……………………[?]
canvasPadding
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><> 4. 字体属性
baseFont ………………………[string]图表字体样式，如“宋体”、“黑体”baseFontSize …………………[number]图表字体大小
baseFontColor …………………[color]图表字体颜色，6位16进制颜色值outCnvBaseFont ………………[string]图表画布以外的字体样式
outCnvBaseFontSize …………[number]图表画布以外的字体大小outCnvBaseFontColor ………[color]图表画布以外的字体颜色，6位16进制颜色值
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><> 5. 分区线和网格
numDivLines ……………………[string]画布内部水平分区线条数，数字
divLineColor ……………………[string]水平分区线颜色，6位16进制颜色值divLineThickness ………………[string]水平分区线厚度，[1-5]
divLineAlpha ……………………[string]水平分区线透明度，[0-100] showAlternateHGridColor ………[string]是否在横向网格带交替的颜色，默认为0(False) alternateHGridColor ……………[string]横向网格带交替的颜色，6位16进制颜色值alternateHGridAlpha ……………[string]横向网格带的透明度，[0-100]
showDivLineV alues ……………[string]是否显示Div行的值，默认？？numVDivLines …………………[string]画布内部垂直分区线条数，数字
vDivLineColor …………………[string]垂直分区线颜色，6位16进制颜色值vDivLineThickness ………………[string]垂直分区线厚度，[1-5]
vDivLineAlpha ……………………[string]垂直分区线透明度，[0-100] showAlternateVGridColor ………[string]是否在纵向网格带交替的颜色，默认为0(False) alternateVGridColor ……………[string]纵向网格带交替的颜色，6位16进制颜色值alternateVGridAlpha ……………[string]纵向网格带的透明度，[0-100] plotGradientColor ………………[color]渐变颜色，6位16进制颜色值plotBorderDashed ………………[string]bool 是否使用虚线（柱形图边界线）
divLineIsDashed ………………[bool]画布背景线条是否为虚线
alternateHGridColor ……………[color] 画布背景横向线条之间交替出现的颜色showPlotBorder …………………[bool]
plotBorderColor …………………[color]
plotBorderThickness ……………[number][0-5]
plotBorderAlpha …………………[number]
plotBorderDashLen ……………[number] pixels
plotBorderDashGap ……………[number] pixels
plotFillAngle …………………[number] [0-360]
plotFillRatio ……………………[number] [0-100]
plotFillAlpha ……………………[number]
showShadow ……………………[bool]是否显示阴影
plotFillColor ……………………[color]
Anchors …………………………[?]
drawAnchors ……………………[bool]
anchorSides ……………………[number]边数[3-20]
anchorRadius …………………[number] pixels 半径
anchorBorderColor ……………[color]
anchorBorderThickness …………[number]
anchorBgColor ………………[string]
anchorAlpha ……………………[number]
anchorBgAlpha …………………[number]
divLineDashLen ………………[?]
divLineDashGap ………………[?]
zeroPlaneColor …………………[color]
zeroPlaneThickness ……………[number]
zeroPlaneAlpha …………………[number]
showAlternateHGridColor ………[color]
alternateHGridAlpha ……………[number]
vDivLineIsDashed ………………[?]
vDivLineDashLen ………………[?]
vDivLineDashGap ………………[?]
showAlternateVGridColor ………[color]
alternateVGridColor ……………[color]
alternateVGridAlpha ……………[number]
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
6. 数字格式
numberPrefix ……………………[string]增加数字前缀
numberSuffix ……………………[string]增加数字后缀
formatNumberScale ……………[bool]是否格式化数字,默认为1(True),自动的给你的数字加上K
（千）或M（百万）；若取0,则不加K或M decimalPrecision …………………[number]指定小数位的位数，[0-10] 例如：='0' 取整divLineDecimalPrecision …………[number]指定水平分区线的值小数位的位数，[0-10] limitsDecimalPrecision …………[number]指定y轴最大、最小值的小数位的位数，[0-10]
formatNumber ……………………[number]逗号来分隔数字(千位，百万位),默认为1(True)；若取
0,则不加分隔符
decimalSeparator …………………[number]指定小数分隔符,默认为'.'
thousandSeparator ………………[number]指定千分位分隔符,默认为','
decimalSeparator ………………[number]用指定的字符来代替小数点
thousandSeparato ………………[number]用指定的字符来代替千位分隔符
decimals …………………………[number]设置鼠标悬停在图表上显示百分比的精确度[0-10]
(不能与formatNumberScale='0' formatNumber='0'同用) defaultNumberScale ……………[string]
numberScaleUnit ………………[string]
numberScaleV alue ………………[string]
inDecimalSeparator ……………[string]
inThousandSeparator ……………[string]
forceDecimals ……………………[bool]
yAxisV alueDecimals ……………[number] [0-10]
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
7. T ool-tip/Hover标题
Showhovercap …………………[bool]是否显示悬停说明框，默认为1(True) hoverCapBgColor ………………[color]悬停说明框背景色，6位16进制颜色值hoverCapBorderColor …………[color]悬停说明框边框颜色，6位16进制颜色值hoverCapSepChar ………………[string]指定悬停说明框内值与值之间分隔符,默认为',' showToolTip ……………………[bool]
toolTipBgColor …………………[color] 6位16进制颜色值
toolTipBorderColor ……………[color] 6位16进制颜色值
toolTipSepChar …………………[string]
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
8. 折线图的参数
lineThickness ……………………[number]折线的厚度
anchorRadius ……………………[number]折线节点半径，数字
anchorBgAlpha …………………[number]折线节点透明度，[0-100]
anchorBgColor …………………[color]折线节点填充颜色，6位16进制颜色值anchorBorderColor ……………[color]折线节点边框颜色，6位16进制颜色值
多条折线中
Seriesname ……………………[string]折线的名称
color …………………………[color]折线的颜色
showValue ……………………[bool]是否显示折线的节点值
showName ………………………[bool]是否显示折线的名称
alpha …………………………[number]折线的透明度
anchorAlpha ……………………[bool]是否显示折线的节点，默认为0不显示
lineThickness …………………[number]折线的厚度
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
9. Set标签使用的参数
value ……………………………[number/string]设置在图表中各个名字想对应的值
color ……………………………[color]置在图表中相对应的柱行图的颜色
name ……………………………[number/string]横向坐标轴标签名称
showName ……………………[bool]设置在是否显示图表中相对应X轴的name，默认为1显示hoverText ……………………[string]设置鼠标旋停在相对应图表上出现的文本内容
alpha …………………………[number]设置在图表中相对应的柱行图的透明度
link ……………………………[string]设置该柱行图的链接地址（需要URL Encode重编码）（本窗
口打开[Url]，新窗口打开[n-Url]，调用JS函数[JavaScript:函数]）thickness ………………………[number]
toolText ………………………[string]
showLavel ……………………[?]
showV alue ……………………[bool]
dashed ………………………[?]
alpha …………………………[?]
anchorSides …………………[?]
anchorRadius …………………[?]
anchorBorderColor ……………[color]
anchorBorderThickness ………[number]
anchorBgColor ………………[color]
anchorAlpha …………………[number]
anchorBgAlpha ………………[number]
dashLen ………………………[?]
dashGap ………………………[?]
startV alue ……………………[?]
endV alue ……………………[?]
displayV alue ………………[?]
isTrendZone ………………[?]
showOnTop ………………[?]
valueOnRight ………………[?]
例1：
例2：
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
图例(3.2版本以上)
showLegend 是否显示图例
legendPosition 图例位置
legendCaption 图例说明
legendIconScale 图例图标0-5(图例图标大小)
legendBgColor 图例背景色
legendBgAlpha 图例透明度
legendBorderColor 图例边框颜色
legendBorderThickness 图例边框粗细
legendBorderAlpha 图例边框透明度
legendShadow 图例阴影
legendAllowDrag 是否允许拖动图例
legendScrollBgColor 图例滚动条背景色
legendScrollBarColor 图例滚动条颜色
legendScrollBtnColor 图例滚动条按钮颜
reverseLegend 反转图例
interactiveLegend 图例交互(是否可点击)
legendNumColumns 设置图例的列数(如果设置不当会自动设置,如果legendPosition设置为右面该属性自动设置为1)
minimiseWrappingInLegend
六、Object
ANCHORS 锚点用于标识line或area的数值点
支持效果Animation 动画、Shadow 阴影、Glow 发光、Bevel 倾斜、Blur 模糊
动画属性_alpha、_x、_y、_xScale、_yScale
BACKGROUND 整个图表的背景
支持属性Animation、Shadow、Glow、Bevel、Blur
动画属性_alpha、_x、_y、_xScale、_yScale
CANV AS 区域图中的区域
支持属性Animation、Shadow、Glow、Bevel、Blur
动画属性_alpha、_x、_y、_xScale、_yScale
CAPTION 图表标题
SUBCAPTION 图表子标题
支持属性Animation、Shadow、Glow、Bevel、Blur、Font 字体
动画属性_alpha、_x、_y
DA TALABELS 数据的x轴标签列表
支持属性Animation、Shadow、Glow、Bevel、Blur、Font 字体
动画属性_alpha、_x、_y
DA TAPLOT 数据细节（如：2D图表中的列）
支持属性Animation、Shadow、Glow、Bevel、Blur
动画属性_alpha、_x、_y、_xScale、_yScale
DA TA V ALUES 图表数据
支持属性Animation、Shadow、Glow、Bevel、Blur、Font 字体
动画属性_alpha、_x、_y
DIVLINES 水平的列表区域(由div组成的线)
支持属性Animation、Shadow、Glow、Bevel、Blur
动画属性_alpha、_x、_y、_xScale
HGRID 水平的两个列表区域中交替的颜色
支持属性Animation、Shadow、Glow、Bevel、Blur
动画属性_alpha、_x、_y、_xScale、_yScale
VDIVLINES 垂直的列表区域
VGRID 垂直的两个列表区域中交替的颜色VLINES 垂直分割线
XAXISNAME x轴名称
Y AXISNAME y轴名称
Y AXISV ALUES y轴的值列表
TOOLTIP在鼠标移动到数据点上的时候的提示支持属性Font
TRENDLINES 趋势线