FusionChart中文使用手册.doc

一、 FusionCharts构成的基本三要素：swf，data，承载图表的载体。 Swf：Charts文件夹下面的所有swf文件，需要什么样的图表样式，就加在与之相对应的swf文件。 Data：数据源。数据可以是*.xml, *.json 文件，也可以是代码中xml或json格式的数据。 载体：页面中装载swf的空间组件。Eg：div，span等等。二、装载swf的注意事项1. 装载swf的基本语法页面必须引用FusionCharts.jsFusionCharts will be loaded here!var chart = new FusionCharts(./FusionCharts/Column3D.swf, chartid, 400, 300, 0, 1); chart.setDataURL(./FusionData/LinkjavascriptData.xml); chart.render(chartdiv); Column3D.swf：所要展现的图表类型LinkjavascriptData.xml：图表引用的数据源FusionCharts(“swf”,”id”,”width”,”height”,”debugmodel”,”registerwithjs”)：debugmodel 通常设置为0，registerwithjs通常设置为1.2. 基本数据格式XML文件开头，以结束；或者以开头，以结束。XML标签属性有以下四种数据类型：布尔型、数字型、字符型、十六进制颜色代码（只支持十六进制的颜色表示，且去掉前面的#号）Eg： 该data.xml运行的结果如下：三、 Charts文件中的swf文件及运行结果图（略）四、结合javascript的应用1. 前提：置FusionCharts中的registerwithjs为1.（实际中似乎0也可以，但最好用1）2. 事件：1) FC_Loaded(DOMId)：描述当SWF文件在客户端已经完成下载2) FC_Rendered(DOMId)：描述swf装载完成。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) setDataXML(strDataXML:string):改变图表的数据3) setDataURL(strDataURL:string)：同上4) print()：打印图表5) getXML()：返回图表的xml数据6) getChartAttribute(attrNamr:string)：返回xml 标记的属性7) hasRendered()：布尔型，标志图表是否已经呈现成功8) getDataAsCSV()：返回图表的数据位CSV字符型五、热点链接：link=四种链接方式：1. 链接到同一个窗口：link=指定页面%3F参数 (link=index.html?param)2. 链接到新的窗口：link=n-指定页面%3F参数(link=n-index.html?param)3. 链接到一个指定的frame：link=F-FrameName-指定页面%3F参数（注参数一般不能超过两个，当超过两个则必须追加为一个字符串用逗号分隔）4. 链接到一个弹出框：link=P-detailsWin,width=400,height=300,toolbar=no,scrollbars=no, resizable=no-ShowDetails.asp%3FMonth%3DJan5. 整个图表链接：clickURL=指定路径6. 链接到Js ：link=j-function()7. Click 事件处理：link=S-parameter（此方法是整个图表的链接情况）六、图表数据导出1. 使用context menu：设置属性showExportDataMenuItem=1，并可以通过exportDataMenuItemLabel=” ”设置导出标签的名称。这样就可以把图表中的数据复制到剪贴板上了，然后打开记事本之类的东东就可以把数据粘贴到上面去了。Eg:Data.xml 显示：在图标上右击，有Copy data to clipboard.2. 使用JavaScript Menu：首先置registerWithJS为1，即var chart1 = new FusionCharts(././FusionCharts/Column3D.swf, chart1Id, 400, 300, 0, 1)。然后根据charts节点id获得一个对象，使用var chartObj = getChartFromId(chart1Id)方法。最后从这个对象取出图表里的数据，使用chartObj.getDataAsCSV( ),然后就可以进行你需要的处理了七、表导出为pdf或者图片（JPEG和PNG）形式1、服务器端图表导出1) 把jar包放到lib下面2) 把classes文件发布到web-info下面3) 在data.xml文件里加入exportEnabled=1(允许导出)、exportHandler=JSP/FCExporter.jsp(即处理导出的路径，注意：默认是在跟data.xml在同一个跟目录下面)、还可以设置exportAction（选择导出的图片会到客户端作为下载还是直接保存到服务器）、exportAtClient（选择是选择客户端导出还是选择服务器端导出）等属性4) 把FCExporter.jsp、FCExporterError.jsp放在web工程下面（注意：FCExporter.jsp里WEB_ROOT_PATH的路径，默认情况是Resources文件直接放在web工程下的，若将Resources文件放在其他文件包下面时注意修改WEB_ROOT_PATH路径5) 处理流程：data.xml中指明exportHandler路径。触发导出时转向exportHandler所指向的路径FCExporter.jsp，在FCExporter.jsp中调用FusionChartsExportHelper.class中的HttpServletRequest类将data.xml中的数据以流的形式传进来，将charts的宽度、高度、颜色、domid作为元数据传入。并且根据选择是导出pdf还是图片导向resource下面的不同页面路径。（导出时会遇到数据传入的数据为空的情况，推荐使用客户端图表导出的方法）2、客户端图表导出1) 包含FusionChartsExportComponent.js文件2) 包含FCExporter.swf文件3) 设置xml文件里的一下属性：exportEnabled=1（允许导出） exportAtClient=1 （客户端导出方式）exportHandler=fcExporter1（处理导出）4) Html文件里加入FusionCharts Export Handler ComponentVar myExportComponent = new FusionChartsExportObject(fcExporter1, ././FusionCharts/FCExporter.swf); myExportComponent.Render(fcexpDiv);3、批图表导出处理：1) 前提：要批导出的数据共用一个xml文件，即共用数据。2) 与单个导出的不同之处： myExportComponent.sourceCharts = myChartId1,myChartId2,myChartId3; 用sourceCharts方法包含需导出的所以图表DOMid 设置导出图片相关的属性：componentAttributes。八、中文编码解决方法：提供字符串数据源的页面必须硬编码才行，可以是GBK或UTF-8。1、动态产生的XML文档，即使用dataURL方法加载的数据，编码须是GBK或者gb2312。做法：只需在包含数据源的jsp页面加入2、提供字符串数据源（即使用dataXML方法加载的数据）的页面必须硬编码才行，可以是GBK或UTF-8。做法：只需在包含xml的jsp页面加入附注fusionCharts详细属性：按照模块分类：1、边框及整个背景的属性：属性名称属性说明示例或说明bgColor背景颜色bgColor=999999,FFFFF渐变 bgColor=999999 单色bgAlpha背景透明度设置范围在1-100showBorder图表外是否显示边框默认二维图表显示，三维不显示borderColor边框颜色十六进制表示去掉前面的#号borderThickness边框线的粗细像素表示borderAlpha边框透明度bgSWF背景图片或动画保证此图片和SWF文件在同一个文件夹bgSWFAlpha设置背景图片的透明度2、图表背景属性：属性名称属性说明示例或说明canvasbgColor图表背景颜色可设置单色也可以使用梯度设置渐变色canvasbgAlpha图表背景透明度canvasBorderColor图表背景边框颜色canvasBorderThickness图表背景边框线粗细canvasBorderAlpha图表背景边框透明度3、外部引入LOGO:属性名称属性说明示例或说明logoURLLOGO引入的地址logoURL=logo_fc.giflogoPositionLOGO在图表中的位置TL 左上TR 右上BL 左下BR 右下CC 中间logoAlphaLOGO的透明度logoScaleLOGO比例4、图表名称和轴属性：属性名称属性说明示例或说明caption标题subcaption子标题xAxisNameX轴名称yAxisNameY轴名称rotateYAxisNameY轴名称是否旋转的显示outCnvbaseFontCanvas外面的字体即标题、子标题、X/Y轴名称字体outCnvbaseFontSizeCanvas外面的字体大小范围在0-72outCnvbaseFontColorCanvas外面的字体颜色baseFontCanvas里面的字体baseFontSizeCanvas里面的字体大小baseFontColorCanvas里面的字体颜色5、data plot属性plotGradientColor取消梯度颜色plotGradientColor=指明渐变是明度还是灰度（默认为明度，即加白色渐变）plotGradientColor=333333showPlotBorder是否显示数据块的边框柱状图是否显示外框plotBorderDashed数据块的边框是否虚线显示useRoundEdges对于柱状图是否使用圆角并且加入了glass效果plotFillAngle使用梯度颜色时，选择梯度角度plotFillAlpha使用梯度颜色时，选择透明度6、数据横纵轴属性showLabels是否显示X轴标签名称默认显示showYAxisValues是否显示Y轴标签名称默认显示labelDisplay标签显示格式WRAP（重叠）ROTATE（旋转）Stagger（交错）slantLabels标签旋转显示时的倾斜角度staggerLines标签交错显示时的交错行数labelStep横轴标签隔几个显示yAxisValuesStep纵轴标签隔几个显示7、图表上的数据显示showValues是否显示图表上的数据默认显示displayValue自定义图表上显示的内容rotateValues是否旋转90度显示图表上的数据placeValuesInside是否在图表内部显示数据8、图表调色板palette图表块框框的渐变程度1-5可供选择paletteColors图表块里面的渐变颜色paletteColors=FF5904,0372AB,FF00009、横轴坐标最大值、最小值属性yAxisMinValueY轴坐标的最小值yAxisMaxValueY轴坐标的最大值xAxisMinValueX轴坐标的最小值xAxisMaxValueX轴坐标的最大值10、图表内部的div线相关属性divLineColor设置div的颜色divLineThickness设置div的线条粗细1-5divLineAlpha设置div的线条透明度1-100divLineIsDashed设置div是否虚线显示showAlternateHGridColor设置div块是否高亮显示11、图表内部垂直div线的相关属性vDivLineColor设置垂直div的颜色vDivLineThickness设置垂直div的线条粗细vDivLineAlpha设置垂直div的线条透明度vDivLineIsDashed设置垂直div是否虚线显示showAlternateVGridColor设置垂直div块是否高亮显示alternateVGridAlpha (透明度)alternateVGridColor (颜色)12、Zero plan相关属性zeroPlaneColor设置零线（面）的颜色zeroPlaneThickness设置零线（面）的粗细zeroPlaneAlpha设置零线（面）的透明度zeroPlaneShowBorder是否显示零面的外框只针对3D图表zeroPlaneBorderColor设置零面外框的颜色只针对3D图表13、Anchors相关属性（针对线图）drawAnchors是否显示线图的Anchors默认显示anchorSides设置Anchors是几边形3-20anchorRadius设置Anchors的大小anchorBorderColor设置Anchors外框颜色anchorBorderThickness设置Anchors外框线条粗细anchorBgColor设置Anchors里面的颜色anchorAlpha设置Anchors整体的透明度1-100anchorBgAlpha设置Anchors所处背景的透明度1-10014、tool-tip 属性showToolTip鼠标放上去是否显示提示Set属性里可自定义设置toolTexttoolText自定义提示框显示的内容toolTipBorderColor提示框边框的颜色toolTipBgColor提示框背景颜色15、padding属性chartLeftMargin纵轴标题离外边框的距离chartRightMarginCanvas右边线离外边框的距离chartTopMargin标题离外边框的距离chartBottomMargin横轴标题离外边框的距离captionPaddingCanvas上边线离图表标题的距离xAxisNamePadding横坐标离横轴标题的距离yAxisNamePadding纵坐标离纵轴标题的距离yAxisValuesPaddingCanvas左边线离纵坐标标签的距离labelPaddingCanvas下边线横坐标标签的距离valuePadding图表上面的数据里图表的距离canvasPaddingCanvas左边线离第一个Anchor的距离只限于线图和块图16、数据格式相关属性decimals设置小数点后面保留的位数forceDecimals是否强制保留小数点后面的decimals设置的位数formatNumberScale是否按默认的数据格式显示decimalSeparator小数点的分隔表示方式默认.thousandSeparator千分位的分隔表示方式默认,numberScaleValue两个联合一起使用，定义数据标度numberScaleValue=1000,1000,1000numberScaleUnitnumberScaleUnit=K,M,BnumberPrefix数字显示的前缀numberPrefix=$numberSuffix数字显示的后缀17、legend相关属性showLegend是否显示图例说明默认显示legendPosition设置图例说明的位置legendBgColor设置图例说明的背景颜色legendBgAlpha设置图例说明的背景透明度legendBorderColor设置图例说明的边框颜色legendBorderThickness设置图例说明的边框粗细legendBorderAlpha设置图例说明的边框透明度legendShadow是否显示为图例说明显示阴影legendScrollBgColor设置图例说明滚动条的背景颜色当图例说明中有很多事件时legendScrollBarColor设置图例说明滚动条的颜色当图例说明中有很多事件时egendScrollBtnColor设置图例说明滚动条的按钮的颜色当图例说明中有很多事件时18、3D图表属性view2D()以二维的形式显示3D图表已有的方法接口view3D()以三维的形式显示3D图表已有的方法接口resetView()重置，恢复到原先的角度3D图表已有的方法接口rotateView(x,y)旋转到所选的角度3D图表已有的方法接口getViewAngles()获得当前图表所处的横纵角度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 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设置自定义菜单的名称aboutMenuItemLabel =About My CompanyaboutMenuItemLink设置自定义菜单的链接aboutMenuItemLink=n-20、趋势线： 21、Styles属性：（eg）定义自定义效果属性，然后在一个对象上进行使用。1、定义一个styles。部分定义。基本属性有name（给type所定义的style取的名字）、type（FusionCharts 只支持下面六种styles: Font（字体）、Animation（动画）、Shadow（阴影）、Glow（轮廓线）、Blur（模糊化）、Bevel（产生透视，增强立体感）。2、作用于一个对象。定义。3、对应关系作用对象对象说明可以应用的style属性Animation Parameters SupportedBACKGROUND图表所处的整个背景AnimationShadowGlowBevelBlur_alpha_x_y_xScale_yScaleCANVAS单指图表填充的位置AnimationShadowGlowBevelBlur_alpha_x_y_xScale_yScaleCAPTION图表的标题AnimationFontShadowGlowBevelBlur_alpha_x_yDATALABELS图表X轴标签名称AnimationFontShadowGlowBevelBlur_alpha_x_yDATAPLOT组成图表的数据块AnimationShadowGlowBevelBlur_alpha_x_y_xScale_yScaleDATAVALUES图表的数据AnimationFontShadowGlowBevelBlur_alpha_x_yDIVLINES图表背景水平或者垂直的div线AnimationShadowGlowBevelBlur_alpha_y_yScaleHGRID连续的div线之间的颜色块AnimationShadowGlowBevelBlur_alpha_y_xScale_yScaleSUBCAPTION图表的二级标题AnimationFontShadowGlowBevelBlur_alpha_x_yTOOLTIP当鼠标点在图标上时出现的提示框FontTRENDLINES趋势线AnimationShadowGlowBevelBlur_alpha_y_xScale_yScaleTRENDVALUES趋势线的值AnimationFontShadowGlowBevelBlur_alpha_x_yVLINES垂直分隔线AnimationShadowGlowBevelBlur_alpha_x_y_yScaleXAXISNAMEX