extjs ColumnChart設置不同的顏色實現代碼

　　ExtonReady(function(){

　　//定義store

　　var chartStore = new ExtdataJsonStore({

　　root:root

　　fields:[

　　{name:netype:string}//網元

　　{name:confinetype:int}//閥值

　　{name:billtype:string}//工單數

　　]

　　sortInfo:{field: bill direction: ASC}

　　});

　　//測試數據

　　var obj={

　　root:[

　　{ne:網元一confine:bill:}

　　{ne:網元二confine:bill:}

　　{ne:網元三confine:bill:}

　　{ne:網元五confine:bill:}

　　{ne:網元六confine:bill:}

　　{ne:網元七confine:bill:}

　　{ne:網元八confine:bill:}

　　{ne:網元九confine:bill:}

　　{ne:網元十confine:bill:}

　　]

　　}

　　//載入數據

　　chartStoreloadData(obj);

　　//pushlet 回調函數

　　windowonData = function (event) {

　　//alert(eventget("data"));

　　var obj = eval((+eventget("data")+));

　　//obj=obj;

　　//chartStoreloadData(obj);

　　}

　　// 系統屬性定義列數據模型

　　var cm = new ExtgridColumnModel([new ExtgridRowNumberer()

　　{header:網元dataIndex:ne}

　　{header:工單量dataIndex:billrenderer:function(value cellMeta record rowIndex columnIndex store){

　　var confine = recorddata[confine];

　　/*if(value>=confine){

　　//cellMetacss=xgridbackred;

　　var row = cmfindColumnIndex(rowIndex);

　　rowcss=xgridbackred;

　　}*/

　　return value;

　　}}

　　{header:閥值dataIndex:confine}

　　//{header:操作dataIndex:staterenderer:renderOperate}

　　]);

　　var grid = new ExtgridEditorGridPanel({

　　title:工單積壓監控統計

　　cm:cm

　　store:chartStore

　　sm : new ExtgridRowSelectionModel({

　　singleSelect : true

　　})

　　stripeRows:true

　　loadMask:true

　　clicksToEdit : //雙擊觸發

　　enableColumnMove : false

　　trackMouseOver : false

　　stripeRows:true

　　frame:true

　　loadMask:{

　　msg:"數據加載中"

　　}

　　viewConfig:{

　　forceFit:true

　　columnsText:顯示列

　　scrollOffset:

　　sortAscText:升序

　　sortDescText:降序

　　}

　　autoExpandColumn:desc

　　bbar:new ExtPagingToolbar({

　　pageSize:

　　store:chartStore

　　displayInfo:true

　　displayMsg:顯示第 {} 條到第 {} 條記錄總共 {} 條

　　emptyMsg:無記錄

　　})

　　viewConfig:{forceFit:truesortAscText:正序sortDescText:降序

　　getRowClass : function(recordrowIndexrowParamsstore){

　　if(recorddatabill>=recorddataconfine){

　　return xgridbackred;

　　}

　　}

　　}

　　});

　　var linechart = new ExtchartLineChart({

　　title:工單積壓圖表

　　xtype:linechart

　　url: AIUPP_ROOT+/css/resources/chartsswf

　　store:chartStore

　　//xField: label

　　//yField:alarmCount

　　//定義tip內容

　　tipRenderer : function(chart record){

　　//alert(recordget(startTime));

　　var ne = recordget(ne);

　　var str = Stringformat(網元:{}n工單量:{}n閥值:{}nerecordget(bill)recordget(confine))

　　return str;

　　}

　　//定義兩個圖表一個是柱狀圖一個是折線圖

　　series: [{

　　type: column

　　displayName: 工單個數

　　id:"billId"

　　xField: ne

　　yField: bill

　　style: {

　　color:xBBE

　　size:

　　}

　　}{

　　type:column

　　displayName: 閥值

　　xField: ne

　　yField: confine

　　style: {

　　color: #ff

　　size:

　　}

　　}]

　　listeners:{

　　"show":function(){

　　var c = linechartseries;

　　//alert(c[]store);

　　//c[]stylecolor=#ff;

　　}

　　}

　　//定義圖表樣式

　　chartStyle: {

　　legend:{

　　display: "top"

　　}

　　xAxis: {

　　color: xaBc

　　majorTicks: {color: xaBc length:}

　　minorTicks: {color: xaBc length: }

　　majorGridLines:{size: color: xeeeeee}

　　}

　　yAxis: {

　　color: xaBc

　　majorTicks: {color: xaBc length: }

　　minorTicks: {color: xaBc length: }

　　majorGridLines: {size: color: xdfef}

　　}

　　}

　　});

　　var contentPanel = new ExtTabPanel({

　　region:center

　　enableTabScroll:true

　　activeTab:

　　closable:false

　　split : false

　　collapsible : false

　　layoutOnTabChange:true

　　items:[linechartgrid]

　　});

　　// 間隔時間

　　var interval = new ExtformTextField({

　　name:interval

　　fieldLabel:間隔時間

　　id:"searchInterval"

　　});

　　// 分組方式

　　var groupType = new ExtformRadioGroup({

　　name:groupType

　　fieldLabel:分組方式

　　id:"searchGroupType"

　　items:[

　　new ExtformRadio({

　　name:"groupType"

　　inputValue:""

　　boxLabel:"地區"

　　})

　　new ExtformRadio({

　　name:"groupType"

　　inputValue:""

　　boxLabel:"地區+網元"

　　})

　　new ExtformRadio({

　　name:"groupType"

　　inputValue:""

　　boxLabel:"地區+網元+業務代碼"

　　})

　　]

　　});

　　// 開始按鈕

　　var startBtn = new ExtButton({

　　text:開始

　　minWidth:

　　handler:function(){

　　//storeload();

　　}

　　});

　　// 停止按鈕

　　var stopBtn = new ExtButton({

　　text:停止

　　minWidth:

　　handler:function(){

　　//storeload();

　　}

　　});

　　var searchPanel = new ExtformFormPanel({

　　labelAlign:left

　　labelWidth:

　　frame:true

　　layout:column

　　items:[

　　{columnWidth:layout:formitems:[interval]}

　　{columnWidth:layout:formitems:[groupType]}

　　{columnWidth:layout:formitems:[startBtn]}

　　{columnWidth:layout:formitems:[stopBtn]}

　　]

　　});

　　var vp = new ExtViewport({

　　layout:border

　　border:false

　　hideBorders:true

　　bufferResize:

　　items:[

　　//{region:northtitle:::監控條件autoHeight:truemargins: collapsible:trueitems:[searchPanel]}

　　{region:centerlayout:fitmargins: items:[contentPanel]}

　　]

　　});

　　vpshow();

　　});

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19845.html