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

Posted 2022-07-20 知

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

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

　　Ext onReady(function()

　　//定义store

　　var chartStore = new Ext data JsonStore(

　　root: root

　　fields:[

　　]

　　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(

　　fieldLabel: 间隔时间

　　id:"searchInterval"

　　);

　　// 分组方式

　　var groupType = new Ext form RadioGroup(

　　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

　　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(

　　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