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} 工单量:{1} 阀值:{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（）;
}）;