熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

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

2022-06-13   來源: JSP教程 

  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
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.