1、先看一下效果图。一 前言： 在项目实施中，设计统计部分经常会使用图表进行显示，在 Extjs3 中内置了图表控件，但实际表现无法达到 3D 的美观效果，通过查找 FusionChart 可以实现比较美观的 3D 或 2D 图表显示。注：FusionChart 是个商业图表，不过有免费版本使用. 官方网站：http:/ 实现方法1：在 Extjs 中使用 FusionChart 需要使用到第三方插件 uxChartPack（目前版本 2.13，下载地址：http:/ FusionChart 前，页面中需要引用uxmedia.js uxflash.js uxchart.js uxfusion.js
2、 四个文件。2：代码举例:我是使用桌面菜单的形式做的。其中对应资源中对应的中文如： opac.fines ： 罰款記錄javascript view plaincopy1. function getRecordsPanel() 2. var mes = ; 3. Ext.Ajax.request( 4. url : “, 5. success : function(response) 6. var Result = Ext.decode(response.responseText); 7. if (Result.flag != 0) 8. else if (Result.flag = 0) 9
3、. var strXml = Result.strXML; 10. strXml = “ 11. + strXml 12. + “; 15. fusionPanel = new Ext.ux.Chart.Fusion.Panel( 16. collapsible : false, 17. chartCfg : 18. id : chart1, 19. params : 20. flashVars : 21. debugMode : 0, 22. lang : EN 23. 24. 25. , 26. autoScroll : true, 27. id : chartpanel, 28. cha
4、rtURL : , 29. / dataURL : , 使用dataURL 時可直接使用 xML 文件 30. dataXML : strXml, 31. width : 500, 32. height : 310 33. ); 34. 35. fusionPanel.setHeight(300); 36. win.add(fusionPanel); 37. fusionPanel.show(); 38. fusionPanel.doLayout(); 39. win.doLayout(); 40. 41. , 42. failure : function(response) 43. Ext.
5、Msg.alert(“eorro!“); 44. 45. ); 46. Json 返回字符串：“success“:true,“flag“:0,“strXML“:“ “原文地址：http:/ FusionChart 属性说明：（转摘至其他网站,供参考！）FusionCharts 参数说明功能特性animation 是否动画显示数据，默认为 1(True)showNames 是否显示横向坐标轴(x 轴)标签名称rotateNames 是否旋转显示标签，默认为 0(False):横向显示showValues 是否在图表显示对应的数据值，默认为1(True)yAxisMinValue 指定纵轴(y 轴
6、)最小值，数字yAxisMaxValue 指定纵轴(y 轴)最小值，数字showLimits 是否显示图表限值(y 轴最大、最小值)，默认为 1(True)showColumnShadow 是否显示各条形图间的阴影（若柱面图在一起并列的话）showAlternateHGridColor 是否隔行显示不同颜色图表标题和轴名称caption 图表主标题subCaption 图表副标题xAxisName 横向坐标轴(x 轴)名称yAxisName 纵向坐标轴(y 轴)名称imageSave=1 是否保存图片imageSaveURL=Path/FusionChartsSave.jsp 图片路径hove
7、rCapSepChar=，。鼠标放到柱面上时显示的提示信息的分隔符showhovercap=1 鼠标放到柱面上时是否显示提示信息 hoverCapBgColor=ffffff提示信息背景颜色图表和画布的样式bgColor 图表背景色，6 位 16 进制颜色值canvasBgColor 画布背景色，6 位 16 进制颜色值canvasBgAlpha 画布透明度，0-100canvasBorderColor 画布边框颜色，6 位 16 进制颜色值canvasBorderThickness 画布边框厚度，0-100shadowAlpha 投影透明度，0-100showLegend 是否显示系列名，默
8、认为 1(True)字体属性baseFont 图表字体样式baseFontSize 图表字体大小baseFontColor 图表字体颜色，6 位 16 进制颜色值outCnvBaseFont 图表画布以外的字体样式outCnvBaseFontSize 图表画布以外的字体大小outCnvBaseFontColor 图表画布以外的字体颜色，6 位 16 进制颜色值分区线和网格numDivLines 画布内部水平分区线条数，数字divLineColor 水平分区线颜色，6 位 16 进制颜色值divLineThickness 水平分区线厚度，1-5divLineAlpha 水平分区线透明度，0-10
9、0showAlternateHGridColor 是否在横向网格带交替的颜色，默认为0(False)alternateHGridColor 横向网格带交替的颜色，6 位 16 进制颜色值alternateHGridAlpha 横向网格带的透明度，0-100showDivLineValues 是否显示 Div 行的值，默认？numVDivLines 画布内部垂直分区线条数，数字vDivLineColor 垂直分区线颜色，6 位 16 进制颜色值vDivLineThickness 垂直分区线厚度，1-5vDivLineAlpha 垂直分区线透明度，0-100showAlternateVGridCo
10、lor 是否在纵向网格带交替的颜色，默认为0(False)alternateVGridColor 纵向网格带交替的颜色，6 位 16 进制颜色值alternateVGridAlpha 纵向网格带的透明度，0-100数字格式numberPrefix 增加数字前缀numberSuffix 增加数字后缀 % 为 % / (吨)为（吨）（Server.UrlEncode 编码）formatNumberScale 是否格式化数字,默认为 1(True),自动的给你的数字加上 K（千）或 M（百万）；若取 0,则不加 K 或 MdecimalPrecision 指定小数位的位数， 0-10 例如：=0 取
11、整divLineDecimalPrecision 指定水平分区线的值小数位的位数， 0-10limitsDecimalPrecision 指定 y 轴最大、最小值的小数位的位数，0-10formatNumber 逗号来分隔数字(千位，百万位),默认为1(True)；若取 0,则不加分隔符decimalSeparator 指定小数分隔符,默认为.thousandSeparator 指定千分位分隔符,默认为,Tool- tip/Hover 标题showhovercap 是否显示悬停说明框，默认为 1(True)hoverCapBgColor 悬停说明框背景色，6 位 16 进制颜色值hoverCa
12、pBorderColor 悬停说明框边框颜色，6 位 16 进制颜色值hoverCapSepChar 指定悬停说明框内值与值之间分隔符,默认为,折线图的参数lineThickness 折线的厚度anchorRadius 折线节点半径，数字anchorBgAlpha 折线节点透明度，0-100anchorBgColor 折线节点填充颜色，6 位 16 进制颜色值anchorBorderColor 折线节点边框颜色，6 位 16 进制颜色值Set 标签使用的参数value 数据值color 颜色link 链接（本窗口打开Url，新窗口打开n-Url，调用 JS 函数JavaScript:函数）na
13、me 横向坐标轴标签名称showFCMenuItem=0 设置右键显示不显示1. varmyChart= newFusionCharts(“/FusionCharts/FCF_Column3D.swf“, “myChartId“, “600“, “500“);第一个参数是 SWF 文件的地址。第二个是图形的 id。这个 id 你可以随便叫什么，但是要注意，在后面我们讲到一个页面里有多个图形的时候，这个 id 一定要是唯一的。第三个参数是图形的宽。第四个参数是图形的高。我们还要设置数据文件的地址。1. myChart.setDataURL(“Data.xml“);最后，我们把图形渲染在指定的地方
14、。1. myChart.render(“chartdiv“);“chartdiv“就是前面的 DIV 的 id，这就表示把图形 render 到“chartdiv“。现在你运行 JSChart.html，你会看到同 Chart.html 一样的效果。很显然使用JavaScript 加载图形，更方便，更直观。如果你想在一个新的窗口打开页面，只需要在连接的前面加上“n-”，就像下面的代码一样：1. 3. XML 数据节点和常用属性详解caption=标题subcaption=子标题clickURL=abc.jsp 点击整个图表时跳转到 abc.jspxAxisName=部门numberPrefix =￥ 数据前缀单位numberSuffix =个 数据后缀单位 Decimals=2 保留两位小数，四舍五入forceDecimals=2 强制保留两位小数，对于 5.1 转换为 5.10 yAxisName=完成率 如果使用汉字汉符需加属性：rotateYAxisName=1showValues=1yAxisMaxValue=100 对于百分比的常用 bgColor=999999,FFFFFF渐变 bgColor=999999 单色useRoundEdges=1 光线效果baseFont=宋体baseFontSize=12 baseFontColor=333333
