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 Ajax请求代码(2)
Jan 07 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
解决vue自定义组件@click点击失效问题
Apr 30 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 Socket技术
2013/08/02 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
浅析为什么a="abc" 不等于 a=new String("abc")
2017/10/25 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
python中int与str互转方法
2018/07/02 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
Python列表对象实现原理详解
2019/07/01 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
公司企业表扬信
2014/01/11 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
感谢信模板大全
2015/01/23 职场文书
副总经理岗位职责
2015/02/02 职场文书
出纳岗位职责范本
2015/03/31 职场文书
签字仪式主持词
2015/07/03 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书