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 相关文章推荐
javascript &&和||运算法的另类使用技巧
Nov 28 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
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实现ping
2006/10/09 PHP
php开启openssl的方法
2014/05/15 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
Bootstrap进度条组件知识详解
2016/05/01 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
js中开关变量使用实例
2017/02/24 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
vue中的过滤器实例代码详解
2019/06/06 Javascript
在windows系统中实现python3安装lxml
2016/03/23 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Python有参函数使用代码实例
2020/01/06 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
SQL数据库笔试题
2016/03/08 面试题
UDP协议功能
2013/01/06 面试题
机械设计专业应届生求职信
2013/11/21 职场文书
小学教研工作制度
2014/01/15 职场文书
国培远程培训感言
2014/03/08 职场文书
项目施工员岗位职责
2014/03/09 职场文书
大家访活动实施方案
2014/03/10 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL