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

1、1FusionCharts 图表控件中文版使用手册图表控件中文版使用手册根据网上资料编辑以及个人经验并汇总根据网上资料编辑以及个人经验并汇总2前言前言 .3 先谈谈我对先谈谈我对 FUSIONCHARTS 的看法：的看法：.3一、构成FUSIONCHARTS的三要素：SWF、DATA.XML、承载图表的载体 .3二、对于我们还未使用的功能：图表转换成图片或者PDF导出、热点链接.3三、重点.4 FUSIONCHARTS 的基本知识部分：的基本知识部分：.4一 、SWF 动画文件.4二、XML 数据文件.4三、HTML（当然也可以使用 JSP）嵌入CHARTS文件.5四、结合JAVASCRIPT

2、 的应用：.5五、热点链接：LINK= .5六、图表数据导出.6七、图表导出为PDF或者图片（JPEG 和 PNG）形式.6八、中文编码解决方法：.7附注FUSIONCHARTS详细属性：.71、边框及整个背景的属性：.82、图表背景属性：.83、外部引入LOGO: .94、图表名称和轴属性：.95、data plot属性.96、数据横纵轴属性.107、图表上的数据显示.108、图表调色板.109、横轴坐标最大值、最小值属性.1010、图表内部的div线相关属性.1111、图表内部垂直div线的相关属性.1112、Zero plan相关属性.1113、Anchors相关属性（针对线图）.111

3、4、tool-tip 属性.1115、padding属性.1216、数据格式相关属性.1217、legend相关属性.1218、3D图表属性.1319、自定义菜单属性.1320、趋势线：.1321、Styles属性：（eg）定义自定义效果属性，然后在一个对象上进行使用。.14按照编程xml构造结构分：（只列举出了几种主要属性，主要用于xmlBuiler）.16 3前言前言先谈谈我对先谈谈我对 fusionCharts 的看法：的看法：一、构成一、构成 fusionCharts 的三要素：的三要素：swf、data.xml、承载、承载图表的载体图表的载体1、Swf：按照你所设计的图表类型加载相应

4、的.swf 文件到你的工程即可(eg：若你想生成一张二维柱状图，那么在你的工程里就必须包含 Column2D.swf 文件)2、Data.xml：方法一：直接用 data.jsp 文件替代 data.xml 文件，写法格式同 xml。图表所需的属性直接在里面写死就行，只是所需的横纵坐标的数据调用后台的方法从数据库里面取得。这样就可以省去 xmlBuilder 这部分代码。方法二：从后台取数据，然后调用相应的 xmlBuiler 方法生成所需的 xml。项目中已有一些XmlBuilder 的方法可供调用。3、承载图表的载体：、承载图表的载体：HTML、JSP 等都可以。调用 fusionChar

5、ts 开发方提供的 fusioncharts.js 里面写的 fusionchart方法设置相关的参数直接生产相应的图表，产生一个 fusioncharts 图表的 div 节点。但是现在 fusionCharts 图表还不能直接嵌入到 ext 框架里面。只能通过 iframe 嵌入。这样每次刷新的时候都会从新载入。二、对于我们还未使用的功能：图表转换成图片或者二、对于我们还未使用的功能：图表转换成图片或者 pdf导出、热点链接导出、热点链接1、图表转换成图片或者、图表转换成图片或者 PDF 导出：导出：fusionCharts 开发方提供了两种方法实现，一种的客户端导出，一种是服务器端导出。

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

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

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

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

10、;apos;使用5dataXML 时需被编译成%26apos;5)当数据不连续时可以使用 connectNullData 属性设置是否让其连续显示（不连续点的直接用直线相连，也可以再不连续点的前一属性中设置 dashed=1可以用虚线链接不连续点）三、三、HTML（当然也可以使用（当然也可以使用 JSP）嵌入）嵌入 charts 文件文件1、不使用、不使用 JS 情况：（不推荐使用）情况：（不推荐使用）使用和嵌入 swf 文件，并设置&dataUrl=data.xml 的路径 2、使用、使用 JS 情况：（推荐使用这种方法嵌入情况：（推荐使用这种方法嵌入 Charts 文件）文件）1)

11、必须包含 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)：描述当 SWF 文件在客户端已经

12、完成下载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)：同上3)print

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

14、能6超过两个，当超过两个则必须追加为一个字符串用逗号分隔）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：设置属性 showExportDataMenuIte

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

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

17、面)、还可以设置 exportAction（选择导出的图片会到客户端作为下载还是直接保存到服务器） 、exportAtClient（选择是选择客户端导出还是选择服务器端导出）等属性4)把 FCExporter.jsp、FCExporterError.jsp 放在 web 工程下面（注意：FCExporter.jsp里 WEB_ROOT_PATH 的路径，默认情况是 Resources 文件直接放在 web 工程下的，若将 Resources 文件放在其他文件包下面时注意修改 WEB_ROOT_PATH 路径5)处理流程：data.xml 中指明 exportHandler 路径。触发导出时转向

18、 exportHandler 所指向的路径 FCExporter.jsp，在 FCExporter.jsp 中调用FusionChartsExportHelper.class 中的 HttpServletRequest 类将 data.xml 中的数据以流的形式传进来，将 charts 的宽度、高度、颜色、domid 作为元数据传入。并且根据选择是导出 pdf 还是图片导向 resource 下面的不同页面路径。 （导出时会遇到数据传入的数据为空的情况，推荐使用客户端图表导出的方法）2、客户端图表导出、客户端图表导出1)包含 FusionChartsExportComponent.js 文件2

19、)包含 FCExporter.swf 文件3)设置 xml 文件里的一下属性：exportEnabled=1（允许导出） exportAtClient=1 （客户端导出方式）exportHandler=fcExporter1（处理导出）74)Html 文件里加入FusionCharts Export Handler ComponentVar myExportComponent = new FusionChartsExportObject(fcExporter1, ././FusionCharts/FCExporter.swf); myExportComponent.Render(fcexpDi

20、v);3、批图表导出处理：、批图表导出处理：1)前提：要批导出的数据共用一个 xml 文件，即共用数据。2)与单个导出的不同之处：myExportComponent.sourceCharts = myChartId1,myChartId2,myChartId3;用 sourceCharts 方法包含需导出的所以图表 DOMid设置导出图片相关的属性：componentAttributes。八、中文编码解决方法：八、中文编码解决方法：提供字符串数据源的页面必须硬编码才行，可以是提供字符串数据源的页面必须硬编码才行，可以是 GBK 或或 UTF-8。1、动态产生的动态产生的 XML 文档，即使用文

21、档，即使用 dataURL 方法加载的数据，编码须是方法加载的数据，编码须是 GBK或者或者 gb2312。做法：只需在包含数据源的 jsp 页面加入2、提供字符串数据源（即使用提供字符串数据源（即使用 dataXML 方法加载的数据）的页面必须硬编码方法加载的数据）的页面必须硬编码才行，可以是才行，可以是 GBK 或或 UTF-8。做法：只需在包含 xml 的 jsp 页面加入附注附注 fusionCharts 详细属性：详细属性：按照模块分类：按照模块分类：81、边框及整个背景的属性：、边框及整个背景的属性：属性名称属性说明示例或说明bgColor背景颜色bgColor=999999,FF

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

23、Color图表背景边框颜色canvasBorderThickness图表背景边框线粗细canvasBorderAlpha图表背景边框透明度3、外部引入、外部引入 LOGO:属性名称属性说明示例或说明logoURLLOGO 引入的地址logoURL=logo_fc.giflogoPositionLOGO 在图表中的位置TL 左上 TR 右上 BL 左下 BR 右下 CC 中间logoAlphaLOGO 的透明度logoScaleLOGO 比例4、图表名称和轴属性：、图表名称和轴属性：属性名称属性说明示例或说明caption标题subcaption子标题xAxisNameX 轴名称yAxisNam

24、eY 轴名称rotateYAxisNameY 轴名称是否旋转的显示rotateNamesX 轴名称是否旋转的显示slantLabels=1时，斜 45 度，否则斜 90度竖排outCnvbaseFontCanvas 外面的字体即标题、子标题、X/Y 轴名称字体outCnvbaseFontSizeCanvas 外面的字体大小范围在 0-72outCnvbaseFontColorCanvas 外面的字体颜色baseFontCanvas 里面的字体baseFontSizeCanvas 里面的字体大小baseFontColorCanvas 里面的字体颜色5、data plot 属性属性取消梯度颜色pl

25、otGradientColor=plotGradientColor指明渐变是明度还是灰度（默认为明度，即加白色渐变）plotGradientColor=333333showPlotBorder是否显示数据块的边框柱状图是否显示外框plotBorderDashed数据块的边框是否虚线显示useRoundEdges对于柱状图是否使用圆角并且加入了 glass 效果plotFillAngle使用梯度颜色时，选择梯度角度plotFillAlpha使用梯度颜色时，选择透明度106、数据横纵轴属性、数据横纵轴属性showLabels是否显示 X 轴标签名称默认显示showYAxisValues是否显示 Y

26、 轴标签名称默认显示numberPrefixY 轴数据加上前缀如 numberPrefix = anumberSuffixY 轴数据加上后缀如 numberPrefix = bformatNumberScale是否格式化数字,默认为1(True),自动的给你的数字加上 K（千）或 M（百万） ；若取 0,则不加 K 或MformatNumberScale=0即可去除掉这个klabelDisplay标签显示格式WRAP（重叠）ROTATE（旋转）Stagger（交错）slantLabels标签旋转显示时的倾斜角度staggerLines标签交错显示时的交错行数labelStep横轴标签隔几个显示

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

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

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

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

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

32、Canvas 上边线离图表标题的距离xAxisNamePadding横坐标离横轴标题的距离yAxisNamePadding纵坐标离纵轴标题的距离yAxisValuesPaddingCanvas 左边线离纵坐标标签的距离labelPaddingCanvas 下边线横坐标标签的距离valuePadding图表上面的数据里图表的距离canvasPaddingCanvas 左边线离第一个 Anchor 的距离只限于线图和块图16、数据格式相关属性、数据格式相关属性decimals设置小数点后面保留的位数forceDecimals是否强制保留小数点后面的decimals 设置的位数formatNumbe

33、rScale是否按默认的数据格式显示decimalSeparator小数点的分隔表示方式默认.thousandSeparator千分位的分隔表示方式默认,numberScaleValuenumberScaleValue=1000,1000,1000numberScaleUnit两个联合一起使用，定义数据标度numberScaleUnit=K,M,BnumberPrefix数字显示的前缀numberPrefix=$numberSuffix数字显示的后缀17、legend 相关属性相关属性showLegend是否显示图例说明默认显示legendPosition设置图例说明的位置legendBgCo

34、lor设置图例说明的背景颜色legendBgAlpha设置图例说明的背景透明度legendBorderColor设置图例说明的边框颜色legendBorderThickness设置图例说明的边框粗细legendBorderAlpha设置图例说明的边框透明度legendShadow是否显示为图例说明显示阴影13legendScrollBgColor设置图例说明滚动条的背景颜色当图例说明中有很多事件时legendScrollBarColor设置图例说明滚动条的颜色当图例说明中有很多事件时egendScrollBtnColor设置图例说明滚动条的按钮的颜色当图例说明中有很多事件时18、3D 图表属性

35、图表属性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 默认

36、为-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 面的深度ZXW

37、allDepth设置 zx 面的深度XYWallDepth设置 xy 面的深度clustered图表是否嵌入显示默认前后重叠显示19、自定义菜单属性、自定义菜单属性showAboutMenuItem是否显示自定义菜单默认显示aboutMenuItemLabel设置自定义菜单的名称aboutMenuItemLabel =About My CompanyaboutMenuItemLink设置自定义菜单的链接aboutMenuItemLink=n-http:/20、趋势线：、趋势线： 14dashed是否虚线显示默认实线显示dashLen设置虚线长度dashGap设置虚线间隙宽度startValue

38、起始值单个时一条横线，有结束值时，两点连线endValue结束值displayvalue线标示valueOnRight设置 displayvalue 显示右边valueOnRight =1color设置线颜色21、Styles 属性：（属性：（eg）定义自定义效果属性，然后在一个对象上）定义自定义效果属性，然后在一个对象上进行使用。进行使用。1、定义一个 styles。部分定义。基本属性有 name（给 type 所定义的 style 取的名字） 、type（FusionCharts 只支持下面六种 styles: Font（字体） 、Animation（动画） 、Shadow（阴影） 、Gl

39、ow（轮廓线） 、Blur（模糊化） 、Bevel（产生透视，增强立体感） ） 。2、作用于一个对象。定义。3、对应关系作用对象对象说明可以应用的 style 属性Animation Parameters SupportedBACKGROUND图表所处的整个背景AnimationShadowGlowBevelBlur_alpha_x_y_xScale_yScaleCANVAS单指图表填充的位置AnimationShadowGlowBevelBlur_alpha_x_y_xScale_yScaleCAPTION图表的标题AnimationFontShadowGlowBevelBlur_alpha

40、_x_yDATALABELS图表 X 轴标签名称AnimationFontShadowGlow_alpha_x_y15BevelBlurDATAPLOT组成图表的数据块AnimationShadowGlowBevelBlur_alpha_x_y_xScale_yScaleDATAVALUES图表的数据AnimationFontShadowGlowBevelBlur_alpha_x_yDIVLINES图表背景水平或者垂直的 div线AnimationShadowGlowBevelBlur_alpha_y_yScaleHGRID连续的 div 线之间的颜色块AnimationShadowGlowBevelBlur_alpha_y_xScale_yScaleSUBCAPTION图表的二级标题Anima