大型论坛网站建设,wordpress捐,企业信息查询系统官网北京,建立自己网站免费一 前言#xff1a; 在项目实施中#xff0c;设计统计部分经常会使用图表进行显示#xff0c;在Extjs3中内置了图表控件#xff0c;但实际表现无法达到3D的美观效果#xff0c;通过查找FusionChart可以实现比较美观的3D或2D图表显示。注#xff1a;FusionChart是个商业…一 前言 在项目实施中设计统计部分经常会使用图表进行显示在Extjs3中内置了图表控件但实际表现无法达到3D的美观效果通过查找FusionChart可以实现比较美观的3D或2D图表显示。 注FusionChart是个商业图表不过有免费版本使用.官方网站http://www.fusioncharts.com/ 二 实现方法 1在Extjs中使用FusionChart需要使用到第三方插件uxChartPack目前版本2.13下载地址http://code.google.com/p/uxmedia/downloads/list在使用FusionChart前页面中需要引用uxmedia.js uxflash.js uxchart.jsuxfusion.js四个文件。 2代码举例: 笔者使用的是弹出式窗体显示Chart方式 function _Count()
{
var mknew Ext.LoadMask(Ext.getBody(),{
msg:正在加载数据请稍候,
removeMask:true//完成后移除
});
mk.show();
Ext.Ajax.request(
{
url:CountFileManager.asp?FileCtype30, //后台返回Chart需要的数据
success:function (response)
{
var ResultExt.decode(response.responseText);
if(Result.flag!0)
{
;
}else if(Result.flag0)
{
var strXmlResult.strXML;
strXmlchart caption发布文件统计subCaption按发布单位统计 xAxisName单位 yAxisName文件数 rotateYAxisName1 showValues1 decimalPrecision0 showNames1 baseFontSize12 outCnvBaseFontSiz20numberSuffix 个 pieSliceDepth30formatNumberScale0strXml/chart; //构造FusionChart需要的XML格式数据这里面属性可参考官方文件。
var fusionPanelnew Ext.ux.Chart.Fusion.Panel({
collapsible:false,
chartCfg:{
id:chart1,
params:{
flashVars:{
debugMode:0,
lang:EN
}
}
},
autoScroll:true,
id:chartpanel,
chartURL:charts/Column3D.swf,//定义图表显示类型例如直方饼图等 dataXML:strXml,
width:500,
height:310
});
var Fwinnew Ext.Window(
{
name:Fwin,
width:520,
height:330,
layout:fit,
closeAction:close,
title:统计图表显示,
buttonAlign:center,
resizable:true,
modal:true,
items:[fusionPanel],
buttons:[
{
text:退出,
iconCls:icon_exit,
handler:function(){Fwin.close();}
}]
});
mk.hide();
Fwin.show();
}
},
failure:function (response)
{
mk.hide();
Ext.Msg.alert(提示,服务器请求错误,请稍后再试);
}
});
} 服务器端返回字符 {success:true,flag:0,strXML:set name动力TEAM value1 /set name行政人事部 value1 /set name研发中心 value117 /set name运管部 value38 /set name制造部 value34 /set name资产财务部 value1 /}这里面要注意页面文件保存为utf-8格式可消除中文乱码现象不同FusionChart版本在Y轴方向存在显示中文BUG目前3.1版本可解决中文乱码问题注意是Y轴标签进行了旋转如上述的rotateYAxisName1属性当然也可rotateYAxisName0不进行旋转可保证Y轴中文正常显示) 三、部分FusionChart属性说明转摘至其他网站,供参考 FusionCharts参数说明 功能特性 animation 是否动画显示数据默认为 1(True) showNames 是否显示横向坐标轴(x轴)标签名称 rotateNames 是否旋转显示标签默认为0(False):横向显示 showValues 是否在图表显示对应的数据值默认为1(True) yAxisMinValue 指定纵轴(y轴)最小值数字 yAxisMaxValue 指定纵轴(y轴)最小值数字 showLimits 是否显示图表限值(y轴最大、最小值)默认为1(True) showColumnShadow 是否显示各条形图间的阴影若柱面图在一起并列的话 showAlternateHGridColor 是否隔行显示不同颜色 图表标题和轴名称 caption 图表主标题 subCaption 图表副标题 xAxisName 横向坐标轴(x轴)名称 yAxisName 纵向坐标轴(y轴)名称 imageSave1 是否保存图片 imageSaveURLPath/FusionChartsSave.jsp 图片路径 hoverCapSepChar。鼠标放到柱面上时显示的提示信息的分隔符 showhovercap1 鼠标放到柱面上时是否显示提示信息 hoverCapBgColor‘ffffff’提示信息背景颜色 图表和画布的样式 bgColor 图表背景色6位16进制颜色值 canvasBgColor 画布背景色6位16进制颜色值 canvasBgAlpha 画布透明度[0-100] canvasBorderColor 画布边框颜色6位16进制颜色值 canvasBorderThickness 画布边框厚度[0-100] shadowAlpha 投影透明度[0-100] showLegend 是否显示系列名默认为1(True) 字体属性 baseFont 图表字体样式 baseFontSize 图表字体大小 baseFontColor 图表字体颜色6位16进制颜色值 outCnvBaseFont 图表画布以外的字体样式 outCnvBaseFontSize 图表画布以外的字体大小 outCnvBaseFontColor 图表画布以外的字体颜色6位16进制颜色值 分区线和网格 numDivLines 画布内部水平分区线条数数字 divLineColor 水平分区线颜色6位16进制颜色值 divLineThickness 水平分区线厚度[1-5] divLineAlpha 水平分区线透明度[0-100] showAlternateHGridColor 是否在横向网格带交替的颜色默认为0(False) alternateHGridColor 横向网格带交替的颜色6位16进制颜色值 alternateHGridAlpha 横向网格带的透明度[0-100] showDivLineValues 是否显示Div行的值默认 numVDivLines 画布内部垂直分区线条数数字 vDivLineColor 垂直分区线颜色6位16进制颜色值 vDivLineThickness 垂直分区线厚度[1-5] vDivLineAlpha 垂直分区线透明度[0-100] showAlternateVGridColor 是否在纵向网格带交替的颜色默认为0(False) alternateVGridColor 纵向网格带交替的颜色6位16进制颜色值 alternateVGridAlpha 纵向网格带的透明度[0-100] 数字格式 numberPrefix 增加数字前缀 numberSuffix 增加数字后缀 % 为 % /(吨)为‘吨’Server.UrlEncode编码 formatNumberScale 是否格式化数字,默认为1(True),自动的给你的数字加上K千或M百万若取0,则不加K或M decimalPrecision 指定小数位的位数 [0-10] 例如0 取整 divLineDecimalPrecision 指定水平分区线的值小数位的位数 [0-10] limitsDecimalPrecision 指定y轴最大、最小值的小数位的位数[0-10] formatNumber 逗号来分隔数字(千位百万位),默认为1(True)若取0,则不加分隔符 decimalSeparator 指定小数分隔符,默认为. thousandSeparator 指定千分位分隔符,默认为, Tool- tip/Hover标题 showhovercap 是否显示悬停说明框默认为1(True) hoverCapBgColor 悬停说明框背景色6位16进制颜色值 hoverCapBorderColor 悬停说明框边框颜色6位16进制颜色值 hoverCapSepChar 指定悬停说明框内值与值之间分隔符,默认为, 折线图的参数 lineThickness 折线的厚度 anchorRadius 折线节点半径数字 anchorBgAlpha 折线节点透明度[0-100] anchorBgColor 折线节点填充颜色6位16进制颜色值 anchorBorderColor 折线节点边框颜色6位16进制颜色值 Set标签使用的参数 value 数据值 color 颜色 link 链接本窗口打开[Url]新窗口打开[n-Url]调用JS函数[JavaScript:函数] name 横向坐标轴标签名称 showFCMenuItem0 设置右键显示不显示 1. varmyChartnewFusionCharts(../FusionCharts/FCF_Column3D.swf, myChartId,600, 500); 第一个参数是SWF 文件的地址。 第二个是图形的id。这个id 你可以随便叫什么但是要注意在后面我们讲到一个页面里有 多个图形的时候这个id 一定要是唯一的。 第三个参数是图形的宽。 第四个参数是图形的高。 我们还要设置数据文件的地址。 1. myChart.setDataURL(Data.xml); 最后我们把图形渲染在指定的地方。 1. myChart.render(chartdiv); chartdiv就是前面的DIV 的id这就表示把图形render 到chartdiv。 现在你运行JSChart.html你会看到同Chart.html 一样的效果。很显然使用JavaScript加载 图形更方便更直观。 如果你想在一个新的窗口打开页面只需要在连接的前面加上“n-”就像下面的代码一样 1. graph captionMonthly Sales SummarysubcaptionFor the year 2006 2. xAxisNameMonth yAxisNameSalesnumberPrefix$ 3. set nameJan value1 7400linkn-DemoLinkPages/DemoLink1.html colorAFD8F8/ XML数据节点和常用属性详解 caption‘标题‘ subcaption‘子标题‘ clickURL‘abc.jsp‘ 点击整个图表时跳转到abc.jsp xAxisName部门‘ numberPrefix ‘’ 数据前缀单位 numberSuffix ‘个’ 数据后缀单位 Decimals‘2’ 保留两位小数四舍五入 forceDecimals‘2’ 强制保留两位小数对于5.1转换为5.10 yAxisName‘完成率’ 如果使用汉字汉符需加属性rotateYAxisName‘1’ showValues‘1’ yAxisMaxValue‘100’ 对于百分比的常用bgColor999999,FFFFFF‘ 渐变bgColor‘999999 ’ 单色 useRoundEdges‘1’ 光线效果 baseFont‘宋体‘ baseFontSize12 baseFontColor333333
