萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> extjs ColumnChart設置不同的顏色實現代碼

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

  });

copyright © 萬盛學電腦網 all rights reserved