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…

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

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

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

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

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

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

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

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

ZZ:深入理解new

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

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

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

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

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

delphi tclientsocket接收不到返回数据_RS—485中教你主站发送报文结构、从站返回报文结构?系列11...

作者&#xff1a;马乐1.主站发送报文结构大家可以看到我之前写的文章中的程序都是没有什么具体功能的&#xff0c;都是两个站点之间互相传递数据&#xff0c;这些数据我们只是看看是否可以正常接收发送&#xff0c;数据本身是没有任何含义的。很明显在实际使用过程中我们是不会…

MybatisPlus 通用枚举无法正确取值

正常使用mybatisplus <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.0.4</version></dependency> 使用后发现项目中原先对枚举值的转换存在异常&#xff1a; ER…

python input 文件名_Python播放音频与录音

这一讲主要介绍些音频基本处理方式&#xff0c;为接下来的语音识别打基础。三种播放音频的方式使用 python 播放音频有以下几种方式&#xff1a;os.system()os.system(file) 调用系统应用来打开文件&#xff0c;file 可为图片或者音频文件。缺点&#xff1a;要打开具体的应用&a…

ActionScript 3.0 Step By Step系列(四):来自面向对象开发之前的呐喊:“学会写可重用的代码”...

增强代码的可重用能力&#xff0c;从创建可重用的代码开始&#xff0c;可重用的代码则是通过从现有代码中重构加以封装,使其成为功能单一的可复用代码块。这句话笼统点说便是“封装”或“抽象”。 在实际的编程开发中&#xff0c;要实现代码重用&#xff0c;而不是每次都去Copy…

express利用nodemailer发送邮件(163邮箱)

Nodemailer 是一个简单易用的Node.js邮件发送组件 首先安装这个组件 npm install nodemailer --save安装之后&#xff0c;可以在某个get请求下&#xff0c;发送邮件&#xff0c;具体路由代码&#xff1a; const express require("express"); const nodemailer requ…

使用 Solid 私有化存储 IPFS 文件哈希值

背景 星际文件系统 IPFS&#xff08;InterPlanetary File System&#xff09;是一个面向全球的、点对点的分布式文件系统&#xff0c;目标是为了补充&#xff08;甚至是取代&#xff09;目前统治互联网的超文本传输协议&#xff08;HTTP&#xff09;&#xff0c;将所有具有相同…

appium启动app失败_Appium-Desktop Capability 配置及启动App演示

Appium-Desktop Capability配置介绍desired capability的功能是配置Appium会话。为什么要配置capability&#xff0c;目的就是为了告诉Appium服务器您想要自动化的平台和应用程序。Desired Capabilities是一组设置的键值对的集合&#xff0c;其中键对应设置的名称&#xff0c;而…

以Windows服务方式运行.NET Core程序

原文:以Windows服务方式运行.NET Core程序在之前一篇博客《以Windows服务方式运行ASP.NET Core程序》中我讲述了如何把ASP.NET Core程序作为Windows服务运行的方法&#xff0c;而今&#xff0c;我们又遇到了新的问题&#xff0c;那就是&#xff1a;我们的控制台程序&#xff0c…

好用的shell工具_精选5个酷毙的Python工具

来自&#xff1a;Python之禅工欲善其事必先利其器&#xff0c;一个好的工具能让起到事半功倍的效果&#xff0c;Python社区提供了足够多的优秀工具来帮助开发者更方便的实现某些想法&#xff0c;下面这几个工具给我的工作也带来了很多便利&#xff0c;推荐给追求美好事物的你。…

承载辉煌历史 畅想无线未来

看了JustDI的文章“手机也能当电脑用&#xff1f;&#xff0d;&#xff0d;谈谈未来智能手机操作系统的走向”&#xff0c;作为嵌入式爱好者&#xff0c;我也想谈谈自己的看法。首先&#xff0c;从网络发展的角度看&#xff0c;移动互联网的宽带化&#xff0c;宽带互联网的移动…

6款国内外SNS开源软件 搭建社交网站利器

SNS(Social Network Service)&#xff0c;有时称为社交网络&#xff0c;有时称为社会化网络&#xff0c;专指旨在帮助人们建立社会性网络的互联网应用服务。如果对SNS概念还很模糊&#xff0c;说到人人网、开心网你就明白了。 去年360圈、蚂蚁网接连关站给SNS前景蒙上一层阴影&…