Extjs中使用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 mk=new Ext.LoadMask(Ext.getBody(),{
msg:'正在加载数据,请稍候!',
removeMask:true//完成后移除
});
mk.show();
Ext.Ajax.request(
{
url:"CountFileManager.asp?FileCtype=30",  //后台返回Chart需要的数据
success:function (response)
{
var Result=Ext.decode(response.responseText);
if(Result.flag!=0)
{
;
}else if(Result.flag==0)
{
var strXml=Result.strXML;
strXml="<chart caption='发布文件统计'subCaption='按发布单位统计' xAxisName='单位' yAxisName='文件数' rotateYAxisName='1' showValues='1' decimalPrecision='0' showNames='1' baseFontSize='12' outCnvBaseFontSiz='20'numberSuffix=' 个'  pieSliceDepth='30'formatNumberScale='0'>"+strXml+"</chart>"; //构造FusionChart需要的XML格式数据,这里面属性,可参考官方文件。
var fusionPanel=new 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 Fwin=new 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' value='1' /><set name='行政人事部' value='1' /><set name='研发中心' value='117' /><set name='运管部' value='38' /><set name='制造部' value='34' /><set name='资产财务部' value='1' />'"}

extjs中使用FusionChart举例
   这里面要注意:页面文件保存为utf-8格式,可消除中文乱码现象,不同FusionChart版本,在Y轴方向存在显示中文BUG,目前3.1版本可解决中文乱码问题(注意是Y轴标签进行了旋转,如上述的rotateYAxisName='1'属性,当然也可rotateYAxisName='0',不进行旋转,可保证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轴)名称
imageSave='1'      是否保存图片
imageSaveURL='Path/FusionChartsSave.jsp '图片路径
hoverCapSepChar=','。鼠标放到柱面上时显示的提示信息的分隔符
showhovercap='1'        鼠标放到柱面上时是否显示提示信息 
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                     横向坐标轴标签名称
showFCMenuItem='0' 设置右键显示不显示
1. varmyChart=newFusionCharts("../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 caption='Monthly Sales Summary'subcaption='For the year 2006 '
2. xAxisName='Month' yAxisName='Sales'numberPrefix='$'>
3. <set name='Jan' value='1 7400'link='n-DemoLinkPages/DemoLink1.html' color='AFD8F8'/>
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’ 
对于百分比的常用bgColor='999999,FFFFFF‘
渐变bgColor=‘999999 ’ 单色
useRoundEdges=‘1’ 光线效果
baseFont=‘宋体‘
baseFontSize='12' 
baseFontColor='333333'

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276740.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

drawitem设置指定行的背景颜色_Java 为 Excel 中的行设置交替背景色

点击上方 好好学java &#xff0c;选择 星标 公众号重磅资讯、干货&#xff0c;第一时间送达今日推荐&#xff1a;牛人 20000 字的 Spring Cloud 总结&#xff0c;太硬核了~作者&#xff1a;Jazzz链接&#xff1a;https://www.cnblogs.com/jazz-z/p/12665819.html在制作Excel表…

常见的关系型数据库和非关系型数据及其区别

一、关系型数据库 关系型数据库最典型的数据结构是表&#xff0c;由二维表及其之间的联系所组成的一个数据组织 优点&#xff1a;1、易于维护&#xff1a;都是使用表结构&#xff0c;格式一致&#xff1b;2、使用方便&#xff1a;SQL语言通用&#xff0c;可用于复杂查询&#x…

逆序数技巧 - 牛客

链接&#xff1a;https://ac.nowcoder.com/acm/contest/308/D来源&#xff1a;牛客网 题目描述 tokitsukaze给你一个长度为n的序列&#xff0c;这个序列是1到n的一种排列。然后她会进行q次操作。每次操作会给你L R k这三个数&#xff0c;表示区间[L,R]往右移动k次。移动一次的…

Ajax跨域提交JSON和JSONP

可以直接使用$.getJSON()方法实现跨域请求&#xff0c;参数中必须加上callback&#xff0c;如&#xff1a; var jsonpUrl http://www.test.com/index.php?cApi_Order&aAddOrder&callback?;var param {uid:uid,type:type,cityId:cityId};$.getJSON(jsonpUrl, param,…

mysql数据库商业版与社区版的区别

1、商业版本组织管理与测试环节控制更严格&#xff0c;稳定性方面&#xff0c;会比社区版本更稳定。 2、mysql是成熟产品&#xff0c;商业版与社区版之间性能方面相差不大。 3、商业版不遵守GPL协议&#xff0c;社区版遵守GPL协议可以免费使用。 4、使用商业版后可以购买相关的…

UML的奥妙 - 学习UML笔记(1)

前两天买了一本《大象 Thinking in UML》&#xff0c;其实本就有学习UML的念头&#xff0c;但都因这样那样的事儿耽搁了&#xff0c;当然&#xff0c;也有些惰性在作祟...... 闲话少说&#xff0c;这本书看完了一章&#xff0c;发现还是不错的&#xff0c;先把这两天的学习情况…

无法检查指定的位置是否位于cfs上_(干货分享)一文搞明白 节气门位置传感器的作用、故障类型与症状、诊断方法...

1 位置节气门位置传感器(ThrottlePositionSensor&#xff0c;TPS)&#xff0c;位于节气门体上&#xff0c;其安装形式因节气门结构的不同而有所差异&#xff1a;对于传统的机械拉索式节气门&#xff0c;节气门位置传感器通常以一个独立元件的形式安装在节气门体的侧面&#xf…

盒子模型

1 <!doctype html>2 <html>3 <head>4 <title>盒子模型</title>5 <meta charset"utf-8">6 <meta name"keywords", content"">7 <meta name"description&…

表单跨域提交

利用form表单跨域post 现在ajax应用这么广泛&#xff0c;一般的应用都是直接通过异步调用就可以了&#xff0c;但是有些东西必须要使用post&#xff0c;而且是跨域的时候&#xff0c;ajax异步调用的方式就无能为力了。当然现在也有很多种办法&#xff0c;比如通过flash中转去po…

Asp.net(C#)-显示所有缓存 清除所有缓存

//清除所有缓存protectedvoidRemoveAllCache() { System.Web.Caching.Cache _cache HttpRuntime.Cache; IDictionaryEnumerator CacheEnum _cache.GetEnumerator(); ArrayList al new ArrayList(); while (CacheEnum.MoveNext()) { …

mysql数据库三大引擎优缺点

1.MyISAM 特性&#xff1a; ①不支持事务。 ②表级锁定&#xff0c;并发性能大大降低。 ③读写互相阻塞。 适用场景&#xff1a; ①不支持事务。 ②并发相对较低&#xff0c;表锁定。 ③执行大量select语句操作的表。 ④count(*)操作较快。 ⑤不支持外键。 注&#xff1a;查询速…

Python--day60--一个简单(不完整)的web框架

转载于:https://www.cnblogs.com/xudj/p/10091775.html

activemq 发两条只收到一条_浅谈ActiveMQ与使用

更多大数据架构、实战经验&#xff0c;欢迎关注【大数据每日哔哔】&#xff0c;期待与你一起成长&#xff01;本文将介绍一下 ActiveMQ 的安装、原理和简单实战。一、什么是消息中间件消息中间件顾名思义实现的就是在两个系统或两个客户端之间进行消息传送二、什么是ActiveMQAc…

php发送get、post请求的几种方法

方法1: 用file_get_contents 以get方式获取内容 <?php $urlhttp://www.domain.com/; $html file_get_contents($url); echo $html; ?>方法2: 用fopen打开url, 以get方式获取内容<?php $fp fopen($url, r); stream_get_meta_data($fp); while(!feof($fp)) { $res…

ZZ:深入理解new

new的过程当我们使用关键字new在堆上动态创建一个对象时&#xff0c;它实际上做了三件事&#xff1a;获得一块内存空间、调用构造函数、返回正确的指针。当然&#xff0c;如果我们创建的是简单类型的变量&#xff0c;那么第二步会被省略。假如我们定义了如下一个类A&#xff1a…

mysql数据库的优缺点

优点1. 通常存储过程 标题有助于提高应用程序的性能。因为当你创建他的时候就已经编译了&#xff0c;只不过是按需编译的。2.存储过程有助于减少应用程序和数据库服务器之间的流量&#xff0c;因为应用程序不必发送多个冗长的SQL语句&#xff0c;而只能发送存储过程的名称和参数…

大数据小白系列——HDFS(1)

【注1&#xff1a;结尾有大福利&#xff01;】 【注2&#xff1a;想写一个大数据小白系列&#xff0c;介绍大数据生态系统中的主要成员&#xff0c;理解其原理&#xff0c;明白其用途&#xff0c;万一有用呢&#xff0c;对不对。】 大数据是什么&#xff1f;抛开那些高大上但笼…

PHP检测远端文件是否存在

简单解释一下上面的代码。get_headers的作用就是访问一个远程地址&#xff0c;把服务器发送的HTTP头以数组形式返回。而$header[0]则是服务器返回的状态码&#xff08;如果不出意外的话状态码应该都是第一个返回的&#xff09;。 要确定一个文件在远端服务器上存在&#xff0c…

C#中使用DTS来导入数据及相关问题

向Sql 中导入Excel数据时&#xff0c;使用MS SQL的DTS功能 可以很方便的导入&#xff0c;同时引用Dll文件&#xff0c;可以在程序中对导入过程进行控制。 创建DTS包的过程如下&#xff1a; &#xff11;。在&#xff33;&#xff31;&#xff2c;企业管理器中&#xff0c;工具菜…

html select选择事件_一道搜狗面试题:IO多路复用中select、poll、epoll之间的区别...

(1)select>时间复杂度O(n)它仅仅知道了&#xff0c;有I/O事件发生了&#xff0c;却并不知道是哪那几个流(可能有一个&#xff0c;多个&#xff0c;甚至全部)&#xff0c;我们只能无差别轮询所有流&#xff0c;找出能读出数据&#xff0c;或者写入数据的流&#xff0c;对他们…