FusionCharts图表控件中文版使用手册Word格式文档下载.docx

1、 前言 先谈谈我对fusionCharts的看法：swf、data.xml、承载图表的载体1、Swf：按照你所设计的图表类型加载相应的.swf文件到你的工程即可（eg：若你想生成一张二维柱状图，那么在你的工程里就必须包含Column2D.swf文件）2、Data.xml：方法一：直接用data.jsp文件替代data.xml文件，写法格式同xml。图表所需的属性直接在里面写死就行，只是所需的横纵坐标的数据调用后台的方法从数据库里面取得。这样就可以省去xmlBuilder这部分代码。方法二：从后台取数据，然后调用相应的xmlBuiler方法生成所需的xml。项目中已有一些XmlBuilder的方

2、法可供调用。3、承载图表的载体：HTML、JSP等都可以。调用fusionCharts开发方提供的fusioncharts.js里面写的fusionchart方法设置相关的参数直接生产相应的图表，产生一个fusioncharts图表的div节点。但是现在fusionCharts图表还不能直接嵌入到ext框架里面。只能通过iframe嵌入。这样每次刷新的时候都会从新载入。图表转换成图片或者pdf导出、热点链接1、图表转换成图片或者PDF导出：fusionCharts开发方提供了两种方法实现，一种的客户端导出，一种是服务器端导出。建议使用客户端导出，使用开发方提供的服务器端导出的jar包时在IE上

3、会抛出异常，在火狐上图表一般能显示，但在控制器也会抛出异常。开发方写的方法，有一些内部机制，没有完全理解。用服务器端的方法，可以正常使用。2、热点链接：主要应该是数据传递问题。一方面可以直接从data.xml文件里面的link属性设置你要传过来的参数，然后在你要连接的页面用get方法去获取。另一方面可以直接调用后台的方法把xml文件里面的数据以js的形式直接导入到你要连接的页面。三、重点1、FusionCharts的三要素2、xml各属性的应用 fusionCharts的基本知识部分：一 、SWF 动画文件1. SWF文件在目录FusionCharts_SiteCharts下2. 包括：1）

4、单一系列图表（9种）：（数据格式结构可共用，即单一系列的任何一种图表都可以用其他单一系列的图表代替）二维柱状图、三维柱状图、二维饼图、三维饼图、二维线图、二维条形图、二维块图、二维圆环图、三维圆环图。2） 多序列图（6种）：（主要用于比较，数据格式结构可共用）二维多序列柱状图、三维多序列柱状图、二维多序列线图、二维多序列块图、二维多序列条形图、三维多序列条形图。3） 堆栈图（6种）：二维堆栈柱状图、三维堆栈柱状图、二维堆栈块图、二维堆栈条形图、三维堆栈条形图、二维堆栈多序列柱状图（除最后一个图，其他的图数据可共享）4） 联合系列（7种）：（单一系列的图形可以联合使用，在一张图表中显示）5） 点

5、分布图（2种）：（主要用来描述事件发生的分布情况，数据格式结构可共用）点状图、气泡状图。6） 带滚动条系列（6种）：多序列图（包括二维柱状图、二维线图、二维块图）、二维堆状柱状图、二维联合图、二维联合双Y轴图。7） Grid形式（1种）：SSGrid.swf用法同上，可以结合上面的图形，一起使用。注意：grid的形式只支持单一系列图表的数据。二、XML数据文件1. XML文件以 开头，以结束；或者以/graph结束2. 属性：（详细见附注）XML标签属性有以下四种数据类型：布尔型、数字型、字符型、十六进制颜色代码（只支持十六进制的颜色表示，且去掉前面的#号）3. 注意点：1） 当数字前缀num

6、berPrefix为、%使用dataURL时可直接使用，但是当使用dataXML时需进行相应的编码即%E2%82%AC、%A3、%E2%82%A3、%A5、%A2、%25。2） 当标题caption含有&在dataXML中要被编码为%26。3） Fusioncharts不支持号，需编码成<、>4） 当需要显示“”时（eg: Johns）使用dataURL时需被编译成'使用dataXML时需被编译成%26apos;5） 当数据不连续时可以使用connectNullData属性设置是否让其连续显示（不连续点的直接用直线相连，也可以再不连续点的前一属性中设置dashed=1可以

7、用虚线链接不连续点）三、HTML（当然也可以使用JSP）嵌入charts文件1、不使用JS情况：（不推荐使用） 使用和嵌入swf文件，并设置&dataUrl=data.xml的路径 2、使用JS情况：（推荐使用这种方法嵌入Charts文件）1） 必须包含fusioncharts.js文件2） new FusionCharts（“swf”,”id”,”width”,”height”,”debugmodel”,”registerwithjs”）创建一个fusioncharts对象3） 用这个对象的setDataURL方法包含data.xml文件或者用这个对象的setDataXML方法包含数据源的x

8、ml字符串1. 前提：置FusionCharts中的registerwithjs为12. 事件：1） FC_Loaded（DOMId）：描述当SWF文件在客户端已经完成下载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

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

10、参数3. 链接到一个指定的frame：F-FrameName-指定页面%3F参数（注参数一般不能超过两个，当超过两个则必须追加为一个字符串用逗号分隔）4. 链接到一个弹出框：link=P-detailsWin,width=400,height=300,toolbar=no,scrollbars=no, resizable=no-ShowDetails.asp%3FMonth%3DJan5. 整个图表链接：clickURL=指定路径6. 链接到Js ：j-function（）7. Click 事件处理：S-parameter（此方法是整个图表的链接情况）六、图表数据导出1. 使用context

11、menu：设置属性showExportDataMenuItem=，并可以通过exportDataMenuItemLabel=” ”设置导出标签的名称。这样就可以把图表中的数据复制到剪贴板上了，然后打开记事本之类的东东就可以把数据粘贴到上面去了。2. 使用JavaScript Menu：首先置registerWithJS为1，即var chart1 = new FusionCharts（././FusionCharts/Column3D.swf, chart1Id40030001）。然后根据charts节点id获得一个对象，使用var chartObj = getChartFromId（）方法。

12、最后从这个对象取出图表里的数据，使用chartObj.getDataAsCSV（ ）,然后就可以进行你需要的处理了七、图表导出为pdf或者图片（JPEG和PNG）形式1、服务器端图表导出1） 把jar包Builderpath到web app libraries下面2） 把classes文件发布到web-info下面3） 在data.xml文件里加入exportEnabled=（允许导出）、exportHandler=JSP/FCExporter.jsp（即处理导出的路径，注意：默认是在跟data.xml在同一个跟目录下面）、还可以设置exportAction（选择导出的图片会到客户端作为下载还

13、是直接保存到服务器）、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中调用Fus

14、ionChartsExportHelper.class中的HttpServletRequest类将data.xml中的数据以流的形式传进来，将charts的宽度、高度、颜色、domid作为元数据传入。并且根据选择是导出pdf还是图片导向resource下面的不同页面路径。（导出时会遇到数据传入的数据为空的情况，推荐使用客户端图表导出的方法）2、客户端图表导出1） 包含FusionChartsExportComponent.js文件2） 包含FCExporter.swf文件3） 设置xml文件里的一下属性：exportEnabled=（允许导出） exportAtClient= （客户端导出方式

15、）exportHandler=fcExporter1（处理导出）4） Html文件里加入FusionCharts Export Handler Componentscript type=text/javascriptVar myExportComponent = new FusionChartsExportObject（fcExporter1././FusionCharts/FCExporter.swf）;myExportComponent.Render（/script3、批图表导出处理：1） 前提：要批导出的数据共用一个xml文件，即共用数据。2） 与单个导出的不同之处： myExportC

16、omponent.sourceCharts = myChartId1,myChartId2myChartId3; 用sourceCharts方法包含需导出的所以图表DOMid 设置导出图片相关的属性：componentAttributes。提供字符串数据源的页面必须硬编码才行，可以是GBK或UTF-8。1、动态产生的XML文档，即使用dataURL方法加载的数据，编码须是GBK或者gb2312。做法：只需在包含数据源的jsp页面加入2、提供字符串数据源（即使用dataXML方法加载的数据）的页面必须硬编码才行，可以是GBK或UTF-8。只需在包含xml的jsp页面加入text/html; ch

17、arset=UTF-8按照模块分类：属性名称属性说明示例或说明bgColor背景颜色bgColor=999999,FFFFF渐变 bgColor=999999 单色bgAlpha背景透明度设置范围在1-100showBorder图表外是否显示边框默认二维图表显示，三维不显示borderColor边框颜色十六进制表示去掉前面的#号borderThickness边框线的粗细像素表示borderAlpha边框透明度bgSWF背景图片或动画保证此图片和SWF文件在同一个文件夹bgSWFAlpha设置背景图片的透明度canvasbgColor图表背景颜色可设置单色也可以使用梯度设置渐变色canvasbg

18、Alpha图表背景透明度canvasBorderColor图表背景边框颜色canvasBorderThickness图表背景边框线粗细canvasBorderAlpha图表背景边框透明度logoURLLOGO引入的地址logoURL=logo_fc.giflogoPositionLOGO在图表中的位置TL 左上TR 右上BL 左下BR 右下CC 中间logoAlphaLOGO的透明度logoScaleLOGO比例caption标题subcaption子标题xAxisNameX轴名称yAxisNameY轴名称rotateYAxisNameY轴名称是否旋转的显示rotateNamesX轴名称是否旋

19、转的显示slantLabels=1时，斜45度，否则斜90度竖排outCnvbaseFontCanvas外面的字体即标题、子标题、X/Y轴名称字体outCnvbaseFontSizeCanvas外面的字体大小范围在0-72outCnvbaseFontColorCanvas外面的字体颜色baseFontCanvas里面的字体baseFontSizeCanvas里面的字体大小baseFontColorCanvas里面的字体颜色5、data plot属性plotGradientColor取消梯度颜色plotGradientColor=指明渐变是明度还是灰度（默认为明度，即加白色渐变）333333sh

20、owPlotBorder是否显示数据块的边框柱状图是否显示外框plotBorderDashed数据块的边框是否虚线显示useRoundEdges对于柱状图是否使用圆角并且加入了glass效果plotFillAngle使用梯度颜色时，选择梯度角度plotFillAlpha使用梯度颜色时，选择透明度6、数据横纵轴属性showLabels是否显示X轴标签名称默认显示showYAxisValues是否显示Y轴标签名称numberPrefixY轴数据加上前缀如numberPrefix = anumberSuffixY轴数据加上后缀如numberPrefix = bformatNumberScale是否格

21、式化数字,默认为1（True）,自动的给你的数字加上K（千）或M（百万）；若取0,则不加K或MformatNumberScale=0即可去除掉这个klabelDisplay标签显示格式WRAP（重叠）ROTATE（旋转）Stagger（交错）slantLabels标签旋转显示时的倾斜角度staggerLines标签交错显示时的交错行数labelStep横轴标签隔几个显示yAxisValuesStep纵轴标签隔几个显示7、图表上的数据显示showValues是否显示图表上的数据displayValue自定义图表上显示的内容rotateValues是否旋转90度显示图表上的数据placeValue

22、sInside是否在图表内部显示数据8、图表调色板palette图表块框框的渐变程度1-5可供选择paletteColors图表块里面的渐变颜色paletteColors=FF5904,0372AB,FF00009、横轴坐标最大值、最小值属性yAxisMinValueY轴坐标的最小值yAxisMaxValueY轴坐标的最大值xAxisMinValueX轴坐标的最小值xAxisMaxValueX轴坐标的最大值10、图表内部的div线相关属性divLineColor设置div的颜色divLineThickness设置div的线条粗细1-5divLineAlpha设置div的线条透明度1-100di

23、vLineIsDashed设置div是否虚线显示showAlternateHGridColor设置div块是否高亮显示11、图表内部垂直div线的相关属性vDivLineColor设置垂直div的颜色vDivLineThickness设置垂直div的线条粗细vDivLineAlpha设置垂直div的线条透明度vDivLineIsDashed设置垂直div是否虚线显示showAlternateVGridColor设置垂直div块是否高亮显示alternateVGridAlpha （透明度）alternateVGridColor （颜色）12、Zero plan相关属性zeroPlaneColor

24、设置零线（面）的颜色zeroPlaneThickness设置零线（面）的粗细zeroPlaneAlpha设置零线（面）的透明度zeroPlaneShowBorder是否显示零面的外框只针对3D图表zeroPlaneBorderColor设置零面外框的颜色13、Anchors相关属性（针对线图）drawAnchors是否显示线图的AnchorsanchorSides设置Anchors是几边形3-20anchorRadius设置Anchors的大小anchorBorderColor设置Anchors外框颜色anchorBorderThickness设置Anchors外框线条粗细anchorBgCo

25、lor设置Anchors里面的颜色anchorAlpha设置Anchors整体的透明度anchorBgAlpha设置Anchors所处背景的透明度14、tool-tip 属性showToolTip鼠标放上去是否显示提示Set属性里可自定义设置toolTexttoolText自定义提示框显示的内容toolTipBorderColor提示框边框的颜色toolTipBgColor提示框背景颜色15、padding属性chartLeftMargin纵轴标题离外边框的距离chartRightMarginCanvas右边线离外边框的距离chartTopMargin标题离外边框的距离chartBottomMargin横轴标题离外边框的距离captionPaddingCanvas上边线离图表标题的距离xAxisNamePadding横坐标离横轴标题的距离yAxisNamePadding纵坐标离纵轴标题的距离yAxisValuesPaddingCanvas左边线离纵坐标标签的距离labelPaddingCanvas下边线横坐标标签的距离