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

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();
});