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 相关文章推荐
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
JS中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
$("").click与onclick的区别示例介绍
Sep 25 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 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
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
浅谈js的setInterval事件
2014/12/05 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
Python类属性与实例属性用法分析
2015/05/09 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
linux面试题参考答案(9)
2016/01/29 面试题
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
行政管理专业推荐信
2013/11/02 职场文书
优秀毕业生求职信范文
2014/01/02 职场文书
物业管理计划书
2014/01/10 职场文书
铲车司机岗位职责
2014/03/15 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
2016年情人节问候语
2015/11/11 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫
docker 制作mysql镜像并自动安装
2022/05/20 Servers