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

  });

时间: 2025-01-21 12:29:21

extjs ColumnChart设置不同的颜色实现代码的相关文章

extjs ColumnChart设置不同的颜色实现代码_extjs

复制代码 代码如下: 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'

extjs grid设置某列背景颜色和字体颜色的方法_extjs

css代码: 复制代码 代码如下: .x-grid-back-red { background: #FF0000; } js代码: 复制代码 代码如下: { header : '分成类型', dataIndex : 'divideType', renderer : function(v,m){ m.css='x-grid-back-red'; return v; }, width : 60 } 或者直接这样写也可以 复制代码 代码如下: { header : '编号', dataIndex :

extjs grid设置某列背景颜色和字体颜色的实现方法_extjs

css代码: 复制代码 代码如下: .x-grid-back-red { background: #FF0000; } js代码: 复制代码 代码如下: { header : '分成类型', dataIndex : 'divideType', renderer : function(v,m){ m.css='x-grid-back-red'; return v; }, width : 60 } 或者直接这样写也可以 复制代码 代码如下: { header : '编号', dataIndex :

IOS中一段文字设置多种字体颜色代码

  这篇文章主要介绍了IOS中一段文字设置多种字体颜色代码,十分的实用,有需要的小伙伴可以参考下. 给定range和需要设置的颜色,就可以给一段文字设置多种不同的字体颜色,使用方法如下: 代码如下: [self fuwenbenLabel:contentLabel FontNumber:[UIFont systemFontOfSize:15] AndRange:NSMakeRange(6, 1) AndColor:RGBACOLOR(34, 150, 253, 1)]; 代码如下: //设置不同

IOS中一段文字设置多种字体颜色代码_IOS

给定range和需要设置的颜色,就可以给一段文字设置多种不同的字体颜色,使用方法如下: 复制代码 代码如下: [self fuwenbenLabel:contentLabel FontNumber:[UIFont systemFontOfSize:15] AndRange:NSMakeRange(6, 1) AndColor:RGBACOLOR(34, 150, 253, 1)]; 复制代码 代码如下: //设置不同字体颜色 -(void)fuwenbenLabel:(UILabel *)lab

IOS之UI--动态设置NavigationBar的颜色以及透明度

前言:有时候我们需要设置UINavigationController的导航条NavigationBar的颜色为透明度,这时候就需要使用到NavigationBar的barStyle这个属性: 再看QQ空间的仿制项目示例: 代码使用示例:nc.navigationBar.barStyle = UIBarStyleDefault;<备注:下面全部展示的UI图例,window.view背景是绿色的> 一.在没有设置背景图片的情况下: 1.UIBarStyleDefaul 因为是默认,所以可以不设置b

js实现点击按钮后给Div图层设置随机背景颜色的方法

  这篇文章主要介绍了js实现点击按钮后给Div图层设置随机背景颜色的方法,实例分析了javascript操作页面div元素属性及随机数的相关技巧,需要的朋友可以参考下 本文实例讲述了js实现点击按钮后给Div图层设置随机背景颜色的方法.分享给大家供大家参考.具体如下: 给myDiv设置随机背景颜色,用随机颜色代码赋值给DIV的背景颜色 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

表格奇偶行设置不同颜色的核心JS代码

 表格奇偶行设置不同颜色,在某些情况下还是比较实用的,下面有个不错的示例,大家可以参考下,希望对大家有所帮助 这是一个比较实用的功能,设置奇偶行颜色不同后阅读表格数据的体验明显变好,否则数据会显得非常繁杂拥挤(当表格数据行多时体验尤为明显).只有当你自己真正做这方面的东西接触到时才有强烈的体会,反正我是刚刚经历了,留在这里备参考吧~    核心JS脚本代码如下(table元素的id根据自己的情况调整,代码中的jquery-1.7.min.js可以到jquery的官网上下载)   代码如下: <s

Python实现设置终端显示颜色、粗体、下划线等效果

也许你希望在终端上输出一些带有颜色或者粗体.下划线等样式的信息,就像man中的那样,那么这篇文章将会起到些许作用. 事件起因 在Python开发项目过程中,为了方便调试代码,经常会向stdout中输出一些日志,默认的这些日志就直接显示在了终端中. 但是很杂乱的信息显示在一起,往往没有重点,一个一个找我们需要的信息往往特别复杂. Linux下的终端设置 linux终端颜色设置信息 在Linux终端中,使用转义序列来进行如上所述的显示,转义序列以ESC开头,即ASCII码下的\033,其格式为: \