FusionCharts帮助文档.doc

FusionCharts学习总结一、简介 FusionCharts 是InfoSoft Global 公司的一个产品，InfoSoft Global 公司是专业的Flash 图形方案提供商，他们还有几款其他的，基于Flash 技术的产品，都非常的漂亮。 FusionCharts Free 则是FusionCharts 提供的一个免费版本，虽然免费，功能依然强大，图形类型依然丰富。 FusionCharts free 是一个跨平台，跨浏览器的flash 图表组件解决方案，能够被ASP.NET, 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柱形图2. 曲线图 3. 3D/2D饼形图和环形图4. 区域图5. 堆栈图6. 联合图7. 蜡烛图8. 漏斗图9. 甘特图三、报表图形对应的swf文件分类图形类型文件名Single Series Charts(单系列图形)Column 3DFCF_Column3D.swfColumn 2DFCF_Column2D.swfLine 2DFCF_Line.swfArea 2DFCF_Area2D.swfBar 2DFCF_Bar2D.swfPie 2DFCF_Pie2D.swfPie 3DFCF_Pie3D.swfDoughnut 2DFCF_Doughnut2D.swfMulti-series Charts(多系列图形)Multi-series Column 2DFCF_MSColumn2D.swfMulti-series Column 3DFCF_MSColumn3D.swfMulti-series Line 2DFCF_MSLine.swfMulti-series Bar 2DFCF_MSBar2D.swfMulti-series Area 2DFCF_MSArea2D.swfStacked Charts(堆栈图)Stacked Column 3DFCF_StackedColumn3D.swfStacked Column 2DFCF_StackedColumn2D.swfStacked Bar 2DFCF_StackedBar2D.swfStacked Area 2DFCF_StackedArea2D.swfCombination Charts(组合图)Multi-series Column 3D + Line - Dual Y AxisFCF_MSColumn2DLineDY.swfMulti-series Column 3D + Line - Dual Y AxisFCF_MSColumn3DLineDY.swfFinancial Charts(财经图，即蜡烛图)Candlestick ChartFCF_Candlestick.swfFunnel Chart(漏斗图)Funnel ChartFCF_Funnel.swfGantt Chart(甘特图)Gantt ChartFCF_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_Column3D.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.render(chartdiv1); 解析：操作步骤：建立对象：用四个参数建立了一个FusionCharts对象， var myChart = new FusionCharts(./FusionCharts/FCF_Column3D.swf, myChartId, 600, 500); 第一个参数是SWF文件的地址。 第二个是图形的id。这个id可以随便叫什么，但是要注意，当一个页面里有多个图形的时候，这个id一定要是唯一的。 第三个参数是图形的宽。 第四个参数是图形的高。 加载数据：第一种加载方法需要设置数据文件的地址。如： myChart.setDataURL(Data.xml);第二种加载方法需要设置对应的字符串。如： 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. 没有启用浏览器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横向显示showValues bool是否在图表显示对应的数据值，默认为1(True)yAxisMinValue number指定纵轴(y轴)最小值，数字yAxisMaxValue number 指定纵轴(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轴标记的显示间隔adjustDiv 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-100shadowAlpha number投影透明度，0-100showLegend bool是否显示系列名，默认为1(True)canvasBgColor color画布背景色，6位16进制颜色值canvasBgAlpha number画布透明度，0-100 0为不透明canvasBorderColor color画布边框颜色，6位16进制颜色值canvasBorderThickness number画布边框厚度，0-100canvasBaseColor 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 numberborderColor colorborderThickness number borderAlpha numbercanvasBorderAlpha numbercaptionPadding ?xAxisNamePadding ?yAxisNamePadding ?yAxisValuesPadding ?labelPadding ?valuePadding ?canvasPadding4. 字体属性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-5divLineAlpha string水平分区线透明度，0-100showAlternateHGridColor string是否在横向网格带交替的颜色，默认为0(False)alternateHGridColor string横向网格带交替的颜色，6位16进制颜色值alternateHGridAlpha string横向网格带的透明度，0-100showDivLineValues string是否显示Div行的值，默认？numVDivLines string画布内部垂直分区线条数，数字vDivLineColor string垂直分区线颜色，6位16进制颜色值vDivLineThickness string垂直分区线厚度，1-5vDivLineAlpha string垂直分区线透明度，0-100showAlternateVGridColor string是否在纵向网格带交替的颜色，默认为0(False)alternateVGridColor string纵向网格带交替的颜色，6位16进制颜色值alternateVGridAlpha string纵向网格带的透明度，0-100plotGradientColor color渐变颜色，6位16进制颜色值plotBorderDashed stringbool 是否使用虚线（柱形图边界线）divLineIsDashed bool画布背景线条是否为虚线alternateHGridColor color 画布背景横向线条之间交替出现的颜色showPlotBorder boolplotBorderColor colorplotBorderThickness number0-5 plotBorderAlpha numberplotBorderDashLen number pixelsplotBorderDashGap number pixelsplotFillAngle number 0-360plotFillRatio number 0-100plotFillAlpha numbershowShadow bool是否显示阴影plotFillColor colorAnchors ?drawAnchors boolanchorSides number边数3-20anchorRadius number pixels 半径anchorBorderColor coloranchorBorderThickness numberanchorBgColor stringanchorAlpha numberanchorBgAlpha numberdivLineDashLen ?divLineDashGap ?zeroPlaneColor colorzeroPlaneThickness numberzeroPlaneAlpha numbershowAlternateHGridColor coloralternateHGridAlpha numbervDivLineIsDashed ?vDivLineDashLen ?vDivLineDashGap ?showAlternateVGridColor coloralternateVGridColor coloralternateVGridAlpha number6. 数字格式numberPrefix string增加数字前缀numberSuffix string增加数字后缀formatNumberScale bool是否格式化数字,默认为1(True),自动的给你的数字加上K（千）或M（百万）；若取0,则不加K或MdecimalPrecision number指定小数位的位数，0-10 例如：=0 取整divLineDecimalPrecision number指定水平分区线的值小数位的位数，0-10limitsDecimalPrecision number指定y轴最大、最小值的小数位的位数，0-10formatNumber number逗号来分隔数字(千位，百万位),默认为1(True)；若取0,则不加分隔符decimalSeparator number指定小数分隔符,默认为.thousandSeparator number指定千分位分隔符,默认为,decimalSeparator number用指定的字符来代替小数点 thousandSeparato number用指定的字符来代替千位分隔符decimals number设置鼠标悬停在图表上显示百分比的精确度0-10 (不能与formatNumberScale=0 formatNumber=0同用)defaultNumberScale string numberScaleUnit stringnumberScaleValue stringinDecimalSeparator stringinThousandSeparator stringforceDecimals bool yAxisValueDecimals number 0-107. Tool-tip/Hover标题Showhovercap bool是否显示悬停说明框，默认为1(True)hoverCapBgColor color悬停说明框背景色，6位16进制颜色值hoverCapBorderColor color悬停说明框边框颜色，6位16进制颜色值hoverCapSepChar string指定悬停说明框内值与值之间分隔符,默认为,showToolTip booltoolTipBgColor color 6位16进制颜色值toolTipBorderColor color 6位16进制颜色值toolTipSepChar string8. 折线图的参数lineThickness number折线的厚度anchorRadius number折线节点半径，数字anchorBgAlpha number折线节点透明度，0-100anchorBgColor 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 numbertoolText string showLavel ?showValue booldashed ?alpha ?anchorSides ?anchorRadius ?anchorBorderColor coloranchorBorderThickness numberanchorBgColor coloranchorAlpha numberanchorBgAlpha numberdashLen ?dashGap ?startValue ?endValue ?displayValue ?isTrendZone ?showO