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 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
Vue slot用法(小结)
Oct 22 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
原生JS实现九宫格抽奖
Sep 13 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中计算时间差的几种方法
2009/12/31 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
PHP重载基础知识回顾
2020/09/10 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子
2007/05/30 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
在Docker上开始部署Python应用的教程
2015/04/17 Python
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
Python3多线程操作简单示例
2018/05/22 Python
python实现梯度下降算法
2020/03/24 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
django rest framework serializers序列化实例
2020/05/13 Python
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
应届生保险求职信
2013/11/11 职场文书
教师应聘个人求职信
2013/12/10 职场文书
党员大会主持词
2014/04/02 职场文书
建筑工地质量标语
2014/06/12 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书