FusionChart中文使用手册

1、一、 FusionCharts构成的基本三要素：swf，data，承载图表的载体。   Swf：Charts文件夹下面的所有swf文件，需要什么样的图表样式，就加在与之相对应的swf文件。   Data：数据源。数据可以是*.xml, *.json 文件，也可以是代码中xml或json格式的数据。   载体：页面中装载swf的空间组件。Eg：div，span等等。  二、装载swf的注意事项 1.   装载swf的基本语法页面必须引用FusionCharts.js<scriptt

2、ype="text/javascript" src="./ FusionCharts.js"></script> <div id="chartdiv">FusionCharts will be loaded here!</div> <script type="text/javascript">var chart = new FusionCharts("./FusionCharts/Column3D.swf", "

3、chartid",   "400", "300", "0", "1");       chart.setDataURL("./FusionData/LinkjavascriptData.xml");       chart.render("chartdiv");     

4、0; </script> Column3D.swf：所要展现的图表类型LinkjavascriptData.xml：图表引用的数据源 FusionCharts(“swf”,”id”,”width”,”height”,”debugmodel”,”registerwithjs”)：debugmodel 通常设置为0，registerwithjs通常设置为1. 2.   基本数据格式XML文件<chart>开头，以</chart>结束；或者以<graph>开头，以</graph>结束。XML

5、标签属性有以下四种数据类型：布尔型、数字型、字符型、十六进制颜色代码（只支持十六进制的颜色表示，且去掉前面的#号） Eg：<?xml version="1.0" encoding="UTF-8"?><chart caption='Weekly Sales Summary' xAxisName='Week' yAxisName='Sales'    placeValuesInside='1' useRoundEdges='1&#

6、39; showBorder='1' exportEnabled="1"     exportHandler="fcExporter1" exportAtClient="1" exportFormats="JPEG=jpg|PDF=pdf">    <set label='Week 1' value='14400' displayValue='good' /> &#

7、160;  <set label='Week 2' value='19600' />    <set label='Week 3' value='24000' />    <set label='Week 4' value='15700' />      <sytles>     &#

8、160; <definition>           <sytle name='myBevel' type='Bevel' />       </definition>       <application>       <appl

9、y toObject='Background' styles='myBevel'/>       </application>           </sytles></chart> 该data.xml运行的结果如下： 三、 Charts文件中的swf文件及运行结果图（略）四、结合javascript的应用1.    前提：

10、置FusionCharts中的registerwithjs为1.（实际中似乎0也可以，但最好用1）2.    事件：1)         FC_Loaded(DOMId)：描述当SWF文件在客户端已经完成下载2)         FC_Rendered(DOMId)：描述swf装载完成。3)         FC_DataRen

11、dered(DOMId)：描述当图表数据已经下载到dataxml或者dataURL 4)         FC_DataLoadError(DOMId)：描述当从特定的URL下载数据发生错误5)         FC_NoDataToDisplay(DOMId)：描述当下载的xml文件里没有可显示的数据6)         FC_DataXMLInvalid

12、(DOMId)：描述xml格式错误3.    方法1)         setDataXML(strDataXML:string):改变图表的数据2)         setDataXML(strDataXML:string):改变图表的数据3)         setDataURL(strDataURL:string)：同上4

13、)         print()：打印图表5)         getXML()：返回图表的xml数据6)         getChartAttribute(attrNamr:string)：返回xml <chart>标记的属性7)         hasRend

14、ered()：布尔型，标志图表是否已经呈现成功8)   getDataAsCSV()：返回图表的数据位CSV字符型五、热点链接：link=四种链接方式：1.         链接到同一个窗口：link='指定页面%3F参数' (link=index.html?param)2.         链接到新的窗口：link='n-指定页面%3F参数' (link=n-index.h

15、tml?param)3.         链接到一个指定的frame：link='F-FrameName-指定页面%3F参数'（注参数一般不能超过两个，当超过两个则必须追加为一个字符串用逗号分隔）4.         链接到一个弹出框：link="P-detailsWin,width=400,height=300,toolbar=no,scrollbars=no, resizable=no-ShowDetail

16、s.asp%3FMonth%3DJan"5.         整个图表链接：clickURL='指定路径'6.         链接到Js ：link="j-function()"7.         Click 事件处理：link='S-parameter'（此方法是整个图表的链接情况）

17、0;六、图表数据导出1.         使用context menu：设置属性showExportDataMenuItem='1'，并可以通过exportDataMenuItemLabel=” ”设置导出标签的名称。这样就可以把图表中的数据复制到剪贴板上了，然后打开记事本之类的东东就可以把数据粘贴到上面去了。Eg:Data.xml<chart caption='Weekly Sales Summary' xAxisName='Week' yAxisName=&

18、#39;Sales'    placeValuesInside='1' useRoundEdges='1' showBorder='1' showExportDataMenuItem='1'    >    <set label='Week 1' value='14400' displayValue='good' />    &l

19、t;set label='Week 2' value='19600' />    <set label='Week 3' value='24000' />    <set label='Week 4' value='15700' /></chart>显示：在图标上右击，有Copy data to clipboard.2.      

20、0;  使用JavaScript Menu：首先置registerWithJS为1，即var chart1 = new FusionCharts("././FusionCharts/Column3D.swf", "chart1Id", "400", "300", "0", "1")。然后根据charts节点id获得一个对象，使用var chartObj = getChartFromId("chart1Id")方法。最后从这个对象取出图表里的数据，

21、使用chartObj.getDataAsCSV( ),然后就可以进行你需要的处理了 七、表导出为pdf或者图片（JPEG和PNG）形式1、服务器端图表导出1)         把jar包放到lib下面2)         把classes文件发布到web-info下面3)         在data.xml文件里加入exportEnabled=&#

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

23、OT_PATH的路径，默认情况是Resources文件直接放在web工程下的，若将Resources文件放在其他文件包下面时注意修改WEB_ROOT_PATH路径5)         处理流程：data.xml中指明exportHandler路径。触发导出时转向exportHandler所指向的路径FCExporter.jsp，在FCExporter.jsp中调用FusionChartsExportHelper.class中的HttpServletRequest类将data.xml中的数据以流的形式传进来，将cha

24、rts的宽度、高度、颜色、domid作为元数据传入。并且根据选择是导出pdf还是图片导向resource下面的不同页面路径。（导出时会遇到数据传入的数据为空的情况，推荐使用客户端图表导出的方法）2、客户端图表导出1)        包含FusionChartsExportComponent.js文件2)        包含FCExporter.swf文件3)        设置xml文件

25、里的一下属性：exportEnabled='1'（允许导出） exportAtClient='1' （客户端导出方式）exportHandler='fcExporter1'（处理导出）4)        Html文件里加入<div id="fcexpDiv" align="center">FusionCharts Export Handler Component</div><script type="

26、;text/javascript">Var myExportComponent = new FusionChartsExportObject("fcExporter1", "././FusionCharts/FCExporter.swf");      myExportComponent.Render("fcexpDiv");</script> 3、批图表导出处理：1)      

27、0; 前提：要批导出的数据共用一个xml文件，即共用数据。2)        与单个导出的不同之处：Ø  myExportComponent.sourceCharts = 'myChartId1','myChartId2','myChartId3'Ø  用sourceCharts方法包含需导出的所以图表DOMidØ  设置导出图片相关的属性：componentAttributes。八、中文编码解决方法：提供字符串数据源

28、的页面必须硬编码才行，可以是GBK或UTF-8。1、动态产生的XML文档，即使用dataURL方法加载的数据，编码须是GBK或者gb2312。做法：只需在包含数据源的jsp页面加入<% page language="java" contentType="text/xml; charset=GBK"%>2、提供字符串数据源（即使用dataXML方法加载的数据）的页面必须硬编码才行，可以是GBK或UTF-8。做法：只需在包含xml的jsp页面加入<% page language="java" contentType=&q

29、uot;text/html; charset=UTF-8"%>附注fusionCharts详细属性：按照模块分类：1、边框及整个背景的属性：属性名称属性说明示例或说明bgColor背景颜色bgColor='999999,FFFFF渐变 bgColor=999999 单色bgAlpha背景透明度设置范围在1-100showBorder图表外是否显示边框默认二维图表显示，三维不显示borderColor边框颜色十六进制表示去掉前面的#号borderThickness边框线的粗细像素表示borderAlpha边框透明度 bgSWF背景图片或动画保证此图片和SWF文件

30、在同一个文件夹bgSWFAlpha设置背景图片的透明度 2、图表背景属性：属性名称属性说明示例或说明canvasbgColor图表背景颜色可设置单色也可以使用梯度设置渐变色canvasbgAlpha图表背景透明度 canvasBorderColor图表背景边框颜色 canvasBorderThickness图表背景边框线粗细 canvasBorderAlpha图表背景边框透明度 3、外部引入LOGO:属性名称属性说明示例或说明logoURLLOGO引入的地址logoURL='logo_fc.gif'logoPositionLOG

31、O在图表中的位置TL 左上TR 右上BL 左下BR 右下CC 中间logoAlphaLOGO的透明度 logoScaleLOGO比例 4、图表名称和轴属性：属性名称属性说明示例或说明caption标题 subcaption子标题 xAxisNameX轴名称 yAxisNameY轴名称 rotateYAxisNameY轴名称是否旋转的显示 outCnvbaseFontCanvas外面的字体即标题、子标题、X/Y轴名称字体outCnvbaseFontSizeCanvas外面的字体大小范围在0-72outCnvbaseFontCo

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

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

34、luesStep纵轴标签隔几个显示 7、图表上的数据显示showValues是否显示图表上的数据默认显示displayValue自定义图表上显示的内容 rotateValues是否旋转90度显示图表上的数据 placeValuesInside是否在图表内部显示数据 8、图表调色板palette图表块框框的渐变程度1-5可供选择paletteColors图表块里面的渐变颜色paletteColors='FF5904,0372AB,FF0000'9、横轴坐标最大值、最小值属性yAxisMinValueY轴坐标的最小值 yAxisMa

35、xValueY轴坐标的最大值 xAxisMinValueX轴坐标的最小值 xAxisMaxValueX轴坐标的最大值 10、图表内部的div线相关属性divLineColor设置div的颜色 divLineThickness设置div的线条粗细1-5divLineAlpha设置div的线条透明度1-100divLineIsDashed设置div是否虚线显示 showAlternateHGridColor设置div块是否高亮显示 11、图表内部垂直div线的相关属性vDivLineColor设置垂直div的颜色 vDivLin

36、eThickness设置垂直div的线条粗细 vDivLineAlpha设置垂直div的线条透明度 vDivLineIsDashed设置垂直div是否虚线显示 showAlternateVGridColor设置垂直div块是否高亮显示alternateVGridAlpha (透明度)alternateVGridColor (颜色)12、Zero plan相关属性zeroPlaneColor设置零线（面）的颜色 zeroPlaneThickness设置零线（面）的粗细 zeroPlaneAlpha设置零线（面）的透明度 zeroPlan

37、eShowBorder是否显示零面的外框只针对3D图表zeroPlaneBorderColor设置零面外框的颜色只针对3D图表13、Anchors相关属性（针对线图）drawAnchors是否显示线图的Anchors默认显示anchorSides设置Anchors是几边形3-20anchorRadius设置Anchors的大小 anchorBorderColor设置Anchors外框颜色 anchorBorderThickness设置Anchors外框线条粗细 anchorBgColor设置Anchors里面的颜色 anchorAlpha设置Anchor

38、s整体的透明度1-100anchorBgAlpha设置Anchors所处背景的透明度1-10014、tool-tip 属性showToolTip鼠标放上去是否显示提示Set属性里可自定义设置toolTexttoolText自定义提示框显示的内容 toolTipBorderColor提示框边框的颜色 toolTipBgColor提示框背景颜色 15、padding属性chartLeftMargin纵轴标题离外边框的距离 chartRightMarginCanvas右边线离外边框的距离 chartTopMargin标题离外边框的距离 ch

39、artBottomMargin横轴标题离外边框的距离 captionPaddingCanvas上边线离图表标题的距离 xAxisNamePadding横坐标离横轴标题的距离 yAxisNamePadding纵坐标离纵轴标题的距离 yAxisValuesPaddingCanvas左边线离纵坐标标签的距离 labelPaddingCanvas下边线横坐标标签的距离 valuePadding图表上面的数据里图表的距离 canvasPaddingCanvas左边线离第一个Anchor的距离只限于线图和块图16、数据格式相关属性dec

40、imals设置小数点后面保留的位数 forceDecimals是否强制保留小数点后面的decimals设置的位数 formatNumberScale是否按默认的数据格式显示 decimalSeparator小数点的分隔表示方式默认.thousandSeparator千分位的分隔表示方式默认,numberScaleValue两个联合一起使用，定义数据标度numberScaleValue='1000,1000,1000'numberScaleUnitnumberScaleUnit='K,M,B'numberPrefix数字显示的前缀nu

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

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

43、纵角度var a=getViewAngles();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

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

45、nuItemLabel ='About My Company'aboutMenuItemLink设置自定义菜单的链接aboutMenuItemLink='n-20、趋势线：<trendLines>        <line startValue='430000' endValue='450000' color='009933' displayvalue='Target' dashed='1' dashLe

46、n='2' dashGap='2'  valueOnRight ='1' /> </trendLines>21、Styles属性：（eg）定义自定义效果属性，然后在一个对象上进行使用。1、定义一个styles。<definition></ definition>部分定义。基本属性有name（给type所定义的style取的名字）、type（FusionCharts 只支持下面六种styles: Font（字体）、Animation（动画）、Shadow（阴影）、Glow（轮廓线）、Blur（模糊

47、化）、Bevel（产生透视，增强立体感）。2、作用于一个对象。< application></ application>定义。3、对应关系作用对象对象说明可以应用的style属性Animation Parameters SupportedBACKGROUND图表所处的整个背景AnimationShadowGlowBevelBlur_alpha_x_y_xScale_yScaleCANVAS单指图表填充的位置AnimationShadowGlowBevelBlur_alpha_x_y_xScale_yScaleCAPTION图表的标题AnimationFontShadow

48、GlowBevelBlur_alpha_x_yDATALABELS图表X轴标签名称AnimationFontShadowGlowBevelBlur_alpha_x_yDATAPLOT组成图表的数据块AnimationShadowGlowBevelBlur_alpha_x_y_xScale_yScaleDATAVALUES图表的数据AnimationFontShadowGlowBevelBlur_alpha_x_yDIVLINES图表背景水平或者垂直的div线AnimationShadowGlowBevelBlur_alpha_y_yScaleHGRID连续的div线之间的颜色块Animatio

49、nShadowGlowBevelBlur_alpha_y_xScale_yScaleSUBCAPTION图表的二级标题AnimationFontShadowGlowBevelBlur_alpha_x_yTOOLTIP当鼠标点在图标上时出现的提示框Font TRENDLINES趋势线AnimationShadowGlowBevelBlur_alpha_y_xScale_yScaleTRENDVALUES趋势线的值AnimationFontShadowGlowBevelBlur_alpha_x_yVLINES垂直分隔线AnimationShadowGlowBevelBlur_alpha_x_y_yScaleXAXISNAMEX轴的名称AnimationFontShadowGlowBevelBlur_alpha_x_yYAXISNAMEY轴名称AnimationFontShadowGlowBevelBlur_alpha_x_yYAXISVALUESY轴数据标度AnimationFontShadowGlowBevelBlur_alpha_x_y_rotation <styles>  &#