FusionCharts图表控件中文版使用手册

1、FusionCharts图表控件中文版使用手册By 2009-9-5先谈谈我对fusionCharts的看法：3一、构成fusionCharts的三要素：swf、data.xml、承载图表的载体3二、对于我们还未使用的功能：图表转换成图片或者pdf导出、热点链接3三、重点3fusionCharts的基本知识部分：4一 、SWF 动画文件4二、XML数据文件4三、HTML（当然也可以使用JSP）嵌入charts文件5四、结合javascript 的应用：5五、热点链接：link= 5六、图表数据导出6七、图表导出为pdf或者图片（JPEG和PNG）形式6八、中文编码解决方法：7附注fusionC

2、harts详细属性：71、边框及整个背景的属性：72、图表背景属性：83、外部引入LOGO:84、图表名称和轴属性：95、data plot属性96、数据横纵轴属性97、图表上的数据显示108、图表调色板109、横轴坐标最大值、最小值属性1010、图表内部的div线相关属性1011、图表内部垂直div线的相关属性1012、Zero plan相关属性1113、Anchors相关属性（针对线图）1114、tool-tip 属性1115、padding属性1116、数据格式相关属性1217、legend相关属性1218、3D图表属性1219、自定义菜单属性1320、趋势线：1321、Styles属性

3、：（eg）定义自定义效果属性，然后在一个对象上进行使用。13按照编程xml构造结构分：（只列举出了几种主要属性，主要用于xmlBuiler）16先谈谈我对fusionCharts的看法：一、构成fusionCharts的三要素：swf、data.xml、承载图表的载体1、Swf：按照你所设计的图表类型加载相应的.swf文件到你的工程即可(eg：若你想生成一张二维柱状图，那么在你的工程里就必须包含Column2D.swf文件)2、Data.xml：方法一：直接用。图表所需的属性直接在里面写死就行，只是所需的横纵坐标的数据调用后台的方法从数据库里面取得。这样就可以省去xmlBuilder这部分代码

4、。方法二：从后台取数据，然后调用相应的xmlBuiler方法生成所需的xml。项目中已有一些XmlBuilder的方法可供调用。3、承载图表的载体：HTML、JSP等都可以。调用fusionCharts开发方提供的fusioncharts.js里面写的fusionchart方法设置相关的参数直接生产相应的图表，产生一个fusioncharts图表的div节点。但是现在fusionCharts图表还不能直接嵌入到ext框架里面。只能通过iframe嵌入。这样每次刷新的时候都会从新载入。二、对于我们还未使用的功能：图表转换成图片或者pdf导出、热点链接1、图表转换成图片或者PDF导出：fusion

5、Charts开发方提供了两种方法实现，一种的客户端导出，一种是服务器端导出。建议使用客户端导出，使用开发方提供的服务器端导出的jar包时在IE上会抛出异常，在火狐上图表一般能显示，但在控制器也会抛出异常。开发方写的方法，有一些内部机制，没有完全理解。用服务器端的方法，可以正常使用。2、热点链接：主要应该是数据传递问题。一方面可以直接从data.xml文件里面的link属性设置你要传过来的参数，然后在你要连接的页面用get方法去获取。另一方面可以直接调用后台的方法把xml文件里面的数据以js的形式直接导入到你要连接的页面。三、重点1、FusionCharts的三要素2、xml各属性的应用fusi

6、onCharts的基本知识部分：一 、SWF 动画文件1. SWF文件在目录FusionCharts_SiteCharts下2. 包括：1) 单一系列图表（9种）：（数据格式结构可共用，即单一系列的任何一种图表都可以用其他单一系列的图表代替）二维柱状图、三维柱状图、二维饼图、三维饼图、二维线图、二维条形图、二维块图、二维圆环图、三维圆环图。2) 多序列图（6种）：（主要用于比较，数据格式结构可共用）二维多序列柱状图、三维多序列柱状图、二维多序列线图、二维多序列块图、二维多序列条形图、三维多序列条形图。3) 堆栈图（6种）：二维堆栈柱状图、三维堆栈柱状图、二维堆栈块图、二维堆栈条形图、三维堆栈条

7、形图、二维堆栈多序列柱状图（除最后一个图，其他的图数据可共享）4) 联合系列（7种）：（单一系列的图形可以联合使用，在一张图表中显示）5) 点分布图（2种）：（主要用来描述事件发生的分布情况，数据格式结构可共用）点状图、气泡状图。6) 带滚动条系列（6种）：多序列图（包括二维柱状图、二维线图、二维块图）、二维堆状柱状图、二维联合图、二维联合双Y轴图。7) Grid形式（1种）：SSGrid.swf用法同上，可以结合上面的图形，一起使用。注意：grid的形式只支持单一系列图表的数据。二、XML数据文件1. XML文件以 <chart>开头，以</chart>结束；或者以&

8、lt;graph>开头，以</graph>结束2. 属性：（详细见附注）XML标签属性有以下四种数据类型：布尔型、数字型、字符型、十六进制颜色代码（只支持十六进制的颜色表示，且去掉前面的#号）3. 注意点：1) 当数字前缀numberPrefix为、£、¥、¢、%使用dataURL时可直接使用，但是当使用dataXML时需进行相应的编码即%E2%82%AC、%A3、%E2%82%A3、%A5、%A2、%25。2) 当标题caption含有&在dataXML中要被编码为%26。3) Fusioncharts不支持<、>号，需编码

9、成&lt;、&gt;4) 当需要显示“”时（eg: Johns）使用dataURL时需被编译成&apos;使用dataXML时需被编译成%26apos;5) 当数据不连续时可以使用connectNullData属性设置是否让其连续显示（不连续点的直接用直线相连，也可以再不连续点的前一属性中设置dashed='1'可以用虚线链接不连续点）三、HTML（当然也可以使用JSP）嵌入charts文件1、不使用JS情况：（不推荐使用）使用<object>和<embed>嵌入swf文件，并设置&dataUrl=data.xml的路径

10、2、使用JS情况：（推荐使用这种方法嵌入Charts文件）1) 必须包含fusioncharts.js文件2) new FusionCharts(“swf”,”id”,”width”,”height”,”debugmodel”,”registerwithjs”)创建一个fusioncharts对象3) 用这个对象的setDataURL方法包含data.xml文件或者用这个对象的setDataXML方法包含数据源的xml字符串四、结合javascript 的应用：1. 前提：置FusionCharts中的registerwithjs为12. 事件：1) FC_Loaded(DOMId)：描述当S

11、WF文件在客户端已经完成下载2) FC_Rendered(DOMId)：3) FC_DataRendered(DOMId)：描述当图表数据已经下载到dataxml或者dataURL 4) FC_DataLoadError(DOMId)：描述当从特定的URL下载数据发生错误5) FC_NoDataToDisplay(DOMId)：描述当下载的xml文件里没有可显示的数据6) FC_DataXMLInvalid(DOMId)：描述xml格式错误3. 方法1) setDataXML(strDataXML:string):改变图表的数据2) setDataURL(strDataURL:string)：

12、同上3) print()：打印图表4) getXML()：返回图表的xml数据5) getChartAttribute(attrNamr:string)：返回xml <chart>标记的属性6) hasRendered()：布尔型，标志图表是否已经呈现成功7) getDataAsCSV()：返回图表的数据位CSV字符型8) 关于3D图表方面的方法在后面的属性里面有讲五、热点链接：link= 四种链接方式：1. 链接到同一个窗口：link='指定页面%3F参数'2. 链接到新的窗口：link='n-指定页面%3F参数'3. 链接到一个指定的frame：

13、link='F-FrameName-指定页面%3F参数'（注参数一般不能超过两个，当超过两个则必须追加为一个字符串用逗号分隔）4. 链接到一个弹出框：link="P-detailsWin,width=400,height=300,toolbar=no,scrollbars=no, resizable=no-ShowDetails.asp%3FMonth%3DJan"5. 整个图表链接：clickURL='指定路径'6. 链接到Js ：link="j-function()"7. Click 事件处理：link='S-

14、parameter'（此方法是整个图表的链接情况）六、图表数据导出1. 使用context menu：设置属性showExportDataMenuItem='1'，并可以通过exportDataMenuItemLabel=” ”设置导出标签的名称。这样就可以把图表中的数据复制到剪贴板上了，然后打开记事本之类的东东就可以把数据粘贴到上面去了。2. 使用JavaScript Menu：首先置registerWithJS为1，即var chart1 = new FusionCharts("././FusionCharts/Column3D.swf", &q

15、uot;chart1Id", "400", "300", "0", "1")。然后根据charts节点id获得一个对象，使用var chartObj = getChartFromId("chart1Id")方法。最后从这个对象取出图表里的数据，使用chartObj.getDataAsCSV( ),然后就可以进行你需要的处理了七、图表导出为pdf或者图片（JPEG和PNG）形式1、服务器端图表导出1) 把jar包Builderpath到web app libraries下面2) 把cla

16、sses文件发布到web-info下面3) 在data.xml文件里加入exportEnabled='1'(允许导出)、exportHandler='JSP/FCExporter.jsp'(即处理导出的路径，注意：默认是在跟data.xml在同一个跟目录下面)、还可以设置exportAction（选择导出的图片会到客户端作为下载还是直接保存到服务器）、exportAtClient（选择是选择客户端导出还是选择服务器端导出）等属性4) 把FCExporter.jsp、FCExporterError.jsp放在web工程下面（注意：FCExporter.jsp里WE

17、B_ROOT_PATH的路径，默认情况是Resources文件直接放在web工程下的，若将Resources文件放在其他文件包下面时注意修改WEB_ROOT_PATH路径5) 处理流程：data.xml中指明exportHandler路径。触发导出时转向exportHandler所指向的路径FCExporter.jsp，在FCExporter.jsp，推荐使用客户端图表导出的方法）2、客户端图表导出1) 包含FusionChartsExportComponent.js文件2) 包含FCExporter.swf文件3) 设置xml文件里的一下属性：exportEnabled='1'

18、;（允许导出） exportAtClient='1' （客户端导出方式）exportHandler='fcExporter1'（处理导出）4) Html文件里加入<div id="fcexpDiv" align="center">FusionCharts Export Handler Component</div><script type="text/javascript">Var myExportComponent = new FusionChartsExportO

19、bject("fcExporter1", "././FusionCharts/FCExporter.swf"); myExportComponent.Render("fcexpDiv");</script>3、批图表导出处理：1) 前提：要批导出的数据共用一个xml文件，即共用数据。2) 与单个导出的不同之处：Ø myExportComponent.sourceCharts = 'myChartId1','myChartId2','myChartId3'Ø

20、 用sourceCharts方法包含需导出的所以图表DOMidØ 设置导出图片相关的属性：componentAttributes。八、中文编码解决方法：提供字符串数据源的页面必须硬编码才行，可以是GBK或UTF-8。1、动态产生的XML文档，即使用dataURL方法加载的数据，编码须是GBK或者gb2312。做法：只需在包含数据源的jsp页面加入<% page language="java" contentType="text/xml; charset=GBK"%>2、提供字符串数据源（即使用dataXML方法加载的数据）的页面必须

21、硬编码才行，可以是GBK或UTF-8。做法：只需在包含xml的jsp页面加入<% page language="java" contentType="text/html; charset=UTF-8"%>附注fusionCharts详细属性：按照模块分类：1、边框及整个背景的属性：属性名称属性说明示例或说明bgColor背景颜色bgColor='999999,FFFFF渐变 bgColor=999999 单色bgAlpha背景透明度设置范围在1-100showBorder图表外是否显示边框默认二维图表显示，三维不显示borderCol

22、or边框颜色十六进制表示去掉前面的#号borderThickness边框线的粗细像素表示borderAlpha边框透明度bgSWF背景图片或动画保证此图片和SWF文件在同一个文件夹bgSWFAlpha设置背景图片的透明度2、图表背景属性：属性名称属性说明示例或说明canvasbgColor图表背景颜色可设置单色也可以使用梯度设置渐变色canvasbgAlpha图表背景透明度canvasBorderColor图表背景边框颜色canvasBorderThickness图表背景边框线粗细canvasBorderAlpha图表背景边框透明度3、外部引入LOGO:属性名称属性说明示例或说明logoURL

23、LOGO引入的地址logoURL='logo_fc.gif'logoPositionLOGO在图表中的位置TL 左上TR 右上BL 左下BR 右下CC 中间logoAlphaLOGO的透明度logoScaleLOGO比例4、图表名称和轴属性：属性名称属性说明示例或说明caption标题subcaption子标题xAxisNameX轴名称yAxisNameY轴名称rotateYAxisNameY轴名称是否旋转的显示outCnvbaseFontCanvas外面的字体即标题、子标题、X/Y轴名称字体outCnvbaseFontSizeCanvas外面的字体大小范围在0-72outCn

24、vbaseFontColorCanvas外面的字体颜色baseFontCanvas里面的字体baseFontSizeCanvas里面的字体大小baseFontColorCanvas里面的字体颜色5、data plot属性plotGradientColor取消梯度颜色plotGradientColor=''指明渐变是明度还是灰度（默认为明度，即加白色渐变）plotGradientColor='333333'showPlotBorder是否显示数据块的边框柱状图是否显示外框plotBorderDashed数据块的边框是否虚线显示useRoundEdges对于柱状图是

25、否使用圆角并且加入了glass效果plotFillAngle使用梯度颜色时，选择梯度角度plotFillAlpha使用梯度颜色时，选择透明度6、数据横纵轴属性showLabels是否显示X轴标签名称默认显示showYAxisValues是否显示Y轴标签名称默认显示labelDisplay标签显示格式WRAP（重叠）ROTATE（旋转）Stagger（交错）slantLabels标签旋转显示时的倾斜角度staggerLines标签交错显示时的交错行数labelStep横轴标签隔几个显示yAxisValuesStep纵轴标签隔几个显示7、图表上的数据显示showValues是否显示图表上的数据默认

26、显示displayValue自定义图表上显示的内容rotateValues是否旋转90度显示图表上的数据placeValuesInside是否在图表内部显示数据8、图表调色板palette图表块框框的渐变程度1-5可供选择paletteColors图表块里面的渐变颜色paletteColors='FF5904,0372AB,FF0000'9、横轴坐标最大值、最小值属性yAxisMinValueY轴坐标的最小值yAxisMaxValueY轴坐标的最大值xAxisMinValueX轴坐标的最小值xAxisMaxValueX轴坐标的最大值10、图表内部的div线相关属性divLine

27、Color设置div的颜色divLineThickness设置div的线条粗细1-5divLineAlpha设置div的线条透明度1-100divLineIsDashed设置div是否虚线显示showAlternateHGridColor设置div块是否高亮显示11、图表内部垂直div线的相关属性vDivLineColor设置垂直div的颜色vDivLineThickness设置垂直div的线条粗细vDivLineAlpha设置垂直div的线条透明度vDivLineIsDashed设置垂直div是否虚线显示showAlternateVGridColor设置垂直div块是否高亮显示alterna

28、teVGridAlpha (透明度)alternateVGridColor (颜色)12、Zero plan相关属性zeroPlaneColor设置零线（面）的颜色zeroPlaneThickness设置零线（面）的粗细zeroPlaneAlpha设置零线（面）的透明度zeroPlaneShowBorder是否显示零面的外框只针对3D图表zeroPlaneBorderColor设置零面外框的颜色只针对3D图表13、Anchors相关属性（针对线图）drawAnchors是否显示线图的Anchors默认显示anchorSides设置Anchors是几边形3-20anchorRadius设置Anc

29、hors的大小anchorBorderColor设置Anchors外框颜色anchorBorderThickness设置Anchors外框线条粗细anchorBgColor设置Anchors里面的颜色anchorAlpha设置Anchors整体的透明度1-100anchorBgAlpha设置Anchors所处背景的透明度1-10014、tool-tip 属性showToolTip鼠标放上去是否显示提示Set属性里可自定义设置toolTexttoolText自定义提示框显示的内容toolTipBorderColor提示框边框的颜色toolTipBgColor提示框背景颜色15、padding属性

30、chartLeftMargin纵轴标题离外边框的距离chartRightMarginCanvas右边线离外边框的距离chartTopMargin标题离外边框的距离chartBottomMargin横轴标题离外边框的距离captionPaddingCanvas上边线离图表标题的距离xAxisNamePadding横坐标离横轴标题的距离yAxisNamePadding纵坐标离纵轴标题的距离yAxisValuesPaddingCanvas左边线离纵坐标标签的距离labelPaddingCanvas下边线横坐标标签的距离valuePadding图表上面的数据里图表的距离canvasPaddingCan

31、vas左边线离第一个Anchor的距离只限于线图和块图16、数据格式相关属性decimals设置小数点后面保留的位数forceDecimals是否强制保留小数点后面的decimals设置的位数formatNumberScale是否按默认的数据格式显示decimalSeparator小数点的分隔表示方式默认.thousandSeparator千分位的分隔表示方式默认,numberScaleValue两个联合一起使用，定义数据标度numberScaleValue='1000,1000,1000'numberScaleUnitnumberScaleUnit='K,M,B

32、9;numberPrefix数字显示的前缀numberPrefix='$'numberSuffix数字显示的后缀17、legend相关属性showLegend是否显示图例说明默认显示legendPosition设置图例说明的位置legendBgColor设置图例说明的背景颜色legendBgAlpha设置图例说明的背景透明度legendBorderColor设置图例说明的边框颜色legendBorderThickness设置图例说明的边框粗细legendBorderAlpha设置图例说明的边框透明度legendShadow是否显示为图例说明显示阴影legendScrollBgC

33、olor设置图例说明滚动条的背景颜色当图例说明中有很多事件时legendScrollBarColor设置图例说明滚动条的颜色当图例说明中有很多事件时egendScrollBtnColor设置图例说明滚动条的按钮的颜色当图例说明中有很多事件时18、3D图表属性view2D()以二维的形式显示3D图表已有的方法接口view3D()以三维的形式显示3D图表已有的方法接口resetView()重置，恢复到原先的角度3D图表已有的方法接口rotateView(x,y)旋转到所选的角度3D图表已有的方法接口getViewAngles()获得当前图表所处的横纵角度var a=getViewAngles();

34、alert(a.xAng); alert(a.yAng);cameraAngX设置图表角度（横轴角度）0 to 360/0 to -360默认为30度cameraAngY设置图表角度（纵轴角度）0 to 360/0 to -360默认为-45度startAngX设置图表开始的角度（横轴角度）0 to 360/0 to -360endAngX设置图表结束的角度（横轴角度）0 to 360/0 to -360startAngY设置图表开始的角度（纵轴角度）0 to 360/0 to -360endAngY设置图表结束的角度（纵轴角度）0 to 360/0 to -360dynamicShading

35、是否设置光源影响lightAngX设置光源的角度（横轴角度）0 to 360/0 to -360lightAngY设置光源的角度（纵轴角度）0 to 360/0 to -360YZWallDepth设置yz面的深度ZXWallDepth设置zx面的深度XYWallDepth设置xy面的深度clustered图表是否嵌入显示默认前后重叠显示19、自定义菜单属性showAboutMenuItem是否显示自定义菜单默认显示aboutMenuItemLabel设置自定义菜单的名称aboutMenuItemLabel ='About My Company'aboutMenuItemLin

36、k设置自定义菜单的链接aboutMenuItemLink='n-20、趋势线：<trendLines> <line startValue='430000' endValue='450000' color='009933' displayvalue='Target' dashed='1' dashLen='2' dashGap='2' valueOnRight ='1' /> </trendLines>21、Styles属性：

37、（eg）定义自定义效果属性，然后在一个对象上进行使用。1、定义一个styles。<definition></ definition>部分定义。基本属性有name（给type所定义的style取的名字）、type（FusionCharts 只支持下面六种styles: Font（字体）、Animation（动画）、Shadow（阴影）、Glow（轮廓线）、Blur（模糊化）、Bevel（产生透视，增强立体感）。2、作用于一个对象。< application></ application>定义。3、对应关系作用对象对象说明可以应用的style属性An

38、imation Parameters SupportedBACKGROUND图表所处的整个背景AnimationShadowGlowBevelBlur_alpha_x_y_xScale_yScaleCANVAS单指图表填充的位置AnimationShadowGlowBevelBlur_alpha_x_y_xScale_yScaleCAPTION图表的标题AnimationFontShadowGlowBevelBlur_alpha_x_yDATALABELS图表X轴标签名称AnimationFontShadowGlowBevelBlur_alpha_x_yDATAPLOT组成图表的数据块Anim

39、ationShadowGlowBevelBlur_alpha_x_y_xScale_yScaleDATAVALUES图表的数据AnimationFontShadowGlowBevelBlur_alpha_x_yDIVLINES图表背景水平或者垂直的div线AnimationShadowGlowBevelBlur_alpha_y_yScaleHGRID连续的div线之间的颜色块AnimationShadowGlowBevelBlur_alpha_y_xScale_yScaleSUBCAPTION图表的二级标题AnimationFontShadowGlowBevelBlur_alpha_x_yTO

40、OLTIP当鼠标点在图标上时出现的提示框FontTRENDLINES趋势线AnimationShadowGlowBevelBlur_alpha_y_xScale_yScaleTRENDVALUES趋势线的值AnimationFontShadowGlowBevelBlur_alpha_x_yVLINES垂直分隔线AnimationShadowGlowBevelBlur_alpha_x_y_yScaleXAXISNAMEX轴的名称AnimationFontShadowGlowBevelBlur_alpha_x_yYAXISNAMEY轴名称AnimationFontShadowGlowBevelBlur_alpha_x_yY