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

　　});