extjs ColumnChart设置不同的颜色实现代码


Posted in Javascript onMay 17, 2013
Ext.onReady(function(){ 
//定义store 
var chartStore = new Ext.data.JsonStore({ 
root:'root', 
fields:[ 
{name:'ne',type:'string'},//网元 
{name:'confine',type:'int'},//阀值 
{name:'bill',type:'string'}//工单数 
], 
sortInfo:{field: 'bill', direction: 'ASC'} 
}); 
//测试数据 
var obj={ 
root:[ 
{ne:'网元一',confine:80,bill:150}, 
{ne:'网元二',confine:150,bill:140}, 
{ne:'网元三',confine:180,bill:160}, 
{ne:'网元五',confine:120,bill:180}, 
{ne:'网元六',confine:165,bill:13}, 
{ne:'网元七',confine:54,bill:12}, 
{ne:'网元八',confine:55,bill:44}, 
{ne:'网元九',confine:33,bill:113}, 
{ne:'网元十',confine:122,bill:77} 
] 
} 
//载入数据 
chartStore.loadData(obj); 
//pushlet 回调函数 
window.onData = function (event) { 
//alert(event.get("data1")); 
var obj1 = eval('('+event.get("data1")+')'); 
//obj=obj1; 
//chartStore.loadData(obj); 
} 
// 系统属性定义列数据模型 
var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), 
{header:'网元',dataIndex:'ne'}, 
{header:'工单量',dataIndex:'bill',renderer:function(value, cellMeta, record, rowIndex, columnIndex, store){ 
var confine = record.data['confine']; 
/*if(value>=confine){ 
//cellMeta.css='x-grid-back-red'; 
var row = cm.findColumnIndex(rowIndex); 
row.css='x-grid-back-red'; 
}*/ 
return value; 
}}, 
{header:'阀值',dataIndex:'confine'} 
//{header:'操作',dataIndex:'state',renderer:renderOperate} 
]); 
var grid = new Ext.grid.EditorGridPanel({ 
title:'工单积压监控统计', 
cm:cm, 
store:chartStore, 
sm : new Ext.grid.RowSelectionModel({ 
singleSelect : true 
}), 
stripeRows:true, 
loadMask:true, 
clicksToEdit : 2,//双击触发, 
enableColumnMove : false, 
trackMouseOver : false, 
stripeRows:true, 
frame:true, 
loadMask:{ 
msg:"数据加载中....." 
}, 
viewConfig:{ 
forceFit:true, 
columnsText:'显示列', 
scrollOffset:25, 
sortAscText:'升序', 
sortDescText:'降序' 
}, 
autoExpandColumn:'desc', 
bbar:new Ext.PagingToolbar({ 
pageSize:24, 
store:chartStore, 
displayInfo:true, 
displayMsg:'显示第 {0} 条到第 {1} 条记录,总共 {2} 条', 
emptyMsg:'无记录' 
}), 
viewConfig:{forceFit:true,sortAscText:'正序',sortDescText:'降序', 
getRowClass : function(record,rowIndex,rowParams,store){ 
if(record.data.bill>=record.data.confine){ 
return 'x-grid-back-red'; 
} 
} 
} 
}); 
var linechart = new Ext.chart.LineChart({ 
title:'工单积压图表', 
xtype:'linechart', 
url: AIUPP_ROOT+'/css/resources/charts.swf', 
store:chartStore, 
//xField: 'label', 
//yField:'alarmCount', 
//定义tip内容 
tipRenderer : function(chart, record){ 
//alert(record.get('startTime')); 
var ne = record.get('ne'); 
var str = String.format('网元:{0}\n工单量:{1}\n阀值:{2}',ne,record.get('bill'),record.get('confine')) 
return str; 
}, 
//定义两个图表,一个是柱状图,一个是折线图 
series: [{ 
type: 'column', 
displayName: '工单个数', 
id:"billId", 
xField: 'ne', 
yField: 'bill', 
style: { 
color:0x99BBE8, 
size: 20 
} 
},{ 
type:'column', 
displayName: '阀值', 
xField: 'ne', 
yField: 'confine', 
style: { 
color: '#ff0000', 
size: 20 
} 
}], 
listeners:{ 
"show":function(){ 
var c = linechart.series; 
//alert(c[1].store); 
//c[1].style.color='#00ff00'; 
} 
}, 
//定义图表样式 
chartStyle: { 
legend:{ 
display: "top" 
}, 
xAxis: { 
color: 0x69aBc8, 
majorTicks: {color: 0x69aBc8, length:4}, 
minorTicks: {color: 0x69aBc8, length: 2}, 
majorGridLines:{size: 1, color: 0xeeeeee} 
}, 
yAxis: { 
color: 0x69aBc8, 
majorTicks: {color: 0x69aBc8, length: 4}, 
minorTicks: {color: 0x69aBc8, length: 2}, 
majorGridLines: {size: 1, color: 0xdfe8f6} 
} 
} 
}); 
var contentPanel = new Ext.TabPanel({ 
region:'center', 
enableTabScroll:true, 
activeTab:0, 
closable:false, 
split : false, 
collapsible : false, 
layoutOnTabChange:true, 
items:[linechart,grid] 
}); 
// 间隔时间 
var interval = new Ext.form.TextField({ 
name:'interval', 
fieldLabel:'间隔时间', 
id:"searchInterval" 
}); 
// 分组方式 
var groupType = new Ext.form.RadioGroup({ 
name:'groupType', 
fieldLabel:'分组方式', 
id:"searchGroupType", 
items:[ 
new Ext.form.Radio({ 
name:"groupType", 
inputValue:"1", 
boxLabel:"地区" 
}), 
new Ext.form.Radio({ 
name:"groupType", 
inputValue:"2", 
boxLabel:"地区+网元" 
}), 
new Ext.form.Radio({ 
name:"groupType", 
inputValue:"3", 
boxLabel:"地区+网元+业务代码" 
}) 
] 
}); 
// 开始按钮 
var startBtn = new Ext.Button({ 
text:'开始', 
minWidth:80, 
handler:function(){ 
//store.load(); 
} 
}); 
// 停止按钮 
var stopBtn = new Ext.Button({ 
text:'停止', 
minWidth:80, 
handler:function(){ 
//store.load(); 
} 
}); 
var searchPanel = new Ext.form.FormPanel({ 
labelAlign:'left', 
labelWidth:60, 
frame:true, 
layout:'column', 
items:[ 
{columnWidth:.28,layout:'form',items:[interval]}, 
{columnWidth:.38,layout:'form',items:[groupType]}, 
{columnWidth:.10,layout:'form',items:[startBtn]}, 
{columnWidth:.16,layout:'form',items:[stopBtn]} 
] 
}); 
var vp = new Ext.Viewport({ 
layout:'border', 
border:false, 
hideBorders:true, 
bufferResize:100, 
items:[ 
//{region:'north',title:'::监控条件',autoHeight:true,margins:'5 5 10 5',collapsible:true,items:[searchPanel]}, 
{region:'center',layout:'fit',margins:'5 5 5 5',items:[contentPanel]} 
] 
}); 
vp.show(); 
});
Javascript 相关文章推荐
jquery 缓存问题的几个解决方法
Nov 11 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
详解Vue router路由
Nov 20 Vue.js
JQuery设置和去除disabled属性的5种方法总结
May 16 #Javascript
javascript检测页面是否缩放的小例子
May 16 #Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 #Javascript
js如何获取file控件的完整路径具体实现代码
May 15 #Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 #Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 #Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 #Javascript
You might like
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
详解webpack进阶之插件篇
2017/07/06 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
python数组循环处理方法
2019/08/26 Python
python设置随机种子实例讲解
2019/09/12 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
护士实习鉴定范文
2013/12/22 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
大四毕业生自荐书
2014/07/05 职场文书
人事专员岗位说明书
2014/07/29 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
环境卫生整治简报
2015/07/20 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL