知识大全 extjs ColumnChart设置不同的颜色实现代码

Posted

篇首语:志不强者智不达,言不信者行不果。本文由小常识网(cha138.com)小编为大家整理,主要介绍了知识大全 extjs ColumnChart设置不同的颜色实现代码相关的知识,希望对你有一定的参考价值。

extjs ColumnChart设置不同的颜色实现代码  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!

  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: 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:

  ]

  

  //载入数据

  chartStore loadData(obj);

  //pushlet 回调函数

  window onData = function (event)

  //alert(event get("data "));

  var obj = eval( ( +event get("data ")+ ) );

  //obj=obj ;

  //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 : //双击触发

  enableColumnMove : false

  trackMouseOver : false

  stripeRows:true

  frame:true

  loadMask:

  msg:"数据加载中 "

  

  viewConfig:

  forceFit:true

  columnsText: 显示列

  scrollOffset:

  sortAscText: 升序

  sortDescText: 降序

  

  autoExpandColumn: desc

  bbar:new Ext PagingToolbar(

  pageSize:

  store:chartStore

  displayInfo:true

  displayMsg: 显示第 条到第 条记录 总共 条

  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( 网元: n工单量: n阀值: ne record get( bill ) record get( confine ))

  return str;

  

  //定义两个图表 一个是柱状图 一个是折线图

  series: [

  type: column

  displayName: 工单个数

  id:"billId"

  xField: ne

  yField: bill

  style:

  color: x BBE

  size:

  

  

  type: column

  displayName: 阀值

  xField: ne

  yField: confine

  style:

  color: #ff

  size:

  

  ]

  listeners:

  "show":function()

  var c = linechart series;

  //alert(c[ ] store);

  //c[ ] style color= # ff ;

  

  

  //定义图表样式

  chartStyle:

  legend:

  display: "top"

  

  xAxis:

  color: x aBc

  majorTicks: color: x aBc length:

  minorTicks: color: x aBc length:

  majorGridLines:size: color: xeeeeee

  

  yAxis:

  color: x aBc

  majorTicks: color: x aBc length:

  minorTicks: color: x aBc length:

  majorGridLines: size: color: xdfe f

  

  

  );

  var contentPanel = new Ext TabPanel(

  region: center

  enableTabScroll:true

  activeTab:

  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:" "

  boxLabel:"地区"

  )

  new Ext form Radio(

  name:"groupType"

  inputValue:" "

  boxLabel:"地区+网元"

  )

  new Ext form Radio(

  name:"groupType"

  inputValue:" "

  boxLabel:"地区+网元+业务代码"

  )

  ]

  );

  // 开始按钮

  var startBtn = new Ext Button(

  text: 开始

  minWidth:

  handler:function()

  //store load();

  

  );

  // 停止按钮

  var stopBtn = new Ext Button(

  text: 停止

  minWidth:

  handler:function()

  //store load();

  

  );

  var searchPanel = new Ext form FormPanel(

  labelAlign: left

  labelWidth:

  frame:true

  layout: column

  items:[

  columnWidth: layout: form items:[interval]

  columnWidth: layout: form items:[groupType]

  columnWidth: layout: form items:[startBtn]

  columnWidth: layout: form items:[stopBtn]

  ]

  );

  var vp = new Ext Viewport(

  layout: border

  border:false

  hideBorders:true

  bufferResize:

  items:[

  //region: north title: ::监控条件 autoHeight:true margins: collapsible:true items:[searchPanel]

  region: center layout: fit margins: items:[contentPanel]

  ]

  );

  vp show();

cha138/Article/program/Java/JSP/201311/19845

相关参考

使用有毒物品的作业场所应当设置什么颜色的区域警示线?

使用有毒物品的作业场所应当设置什么颜色的区域警示线?。A.红色B.黄色C.蓝色【参考答案】B[拓展知识]使用高毒物品的作业场所应当设置什么颜色的区域警示线?A.橙色B.黑色C.红色[参考答案]C

使用有毒物品的作业场所应当设置什么颜色的区域警示线?

使用有毒物品的作业场所应当设置什么颜色的区域警示线?。A.红色B.黄色C.蓝色【参考答案】B[拓展知识]使用高毒物品的作业场所应当设置什么颜色的区域警示线?A.橙色B.黑色C.红色[参考答案]C

知识大全 Extjs407 getValue()和getRawValue()区别

Extjs407getValue()和getRawValue()区别  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快

知识大全 Extjs单独定义各组件的实例代码

Extjs单独定义各组件的实例代码  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!  网上看到的一个

知识大全 Extjs4 类的定义和扩展实例

Extjs4类的定义和扩展实例  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!  一般定义方式注意方

知识大全 ExtJs与WCF之间的跨域访问

ExtJs与WCF之间的跨域访问  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!  在前面文章Ext

知识大全 解析Extjs与php数据交互(增删查改)

解析Extjs与php数据交互(增删查改)  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!  代码如

知识大全 Extjs4 Treegrid 使用心得分享(经验篇)

Extjs4Treegrid使用心得分享(经验篇)  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 

知识大全 利用ExtJS构建客户端三层初探

利用ExtJS构建客户端三层初探  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!  在软件架构中特别

知识大全 用ExtJs为表格单元格增加Tooltips浮动信息

用ExtJs为表格单元格增加Tooltips浮动信息  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!