ExtJScolumnchart集不同颜色的实现代码
复制代码代码如下所示：Ext.onReady（function（）{（）
商店的定义
无功chartstore =新ext.data.jsonstore（{
根：'root，
领域：{
{姓名：'ne，类型：'String' }，NE / /
{姓名：'confine型：'int}， / /阈值
{姓名：比尔，类型：'String' } / /工作单
}，
SortInfo：{场：比尔，方向：'asc}
}）；
测试数据
var obj = {
根：{
{ NE：网络元素之一，范围：80，比尔：150 }，
{ NE：网络元两，范围：150，比尔：140 }，
{ NE：网络元素三，范围：180，比尔：160 }，
{ NE：网络元素五，范围：120，比尔：180 }，
{ NE：网络元素六，范围：165，比尔：13 }，
{ NE：网络元素七，范围：54，比尔：12 }，
{ NE：网络元素八，范围：55，比尔：44 }，
{ NE：网络元素九，范围：33，比尔：113 }，
{ NE：网络元素十，范围：122，比尔：77 }
}
}
加载数据
chartstore.loaddata（obj）；
/ / Pushlet回调函数
window.ondata =函数（事件）{
/ /警报（event.get（资料））；
var obj1（= eval（+ event.get（数据）+））；
/ / obj = obj1；
/ / chartstore.loaddata（obj）；
}
系统属性定义列数据模型
VaR厘米=新ext.grid.columnmodel（{新ext.grid.rownumberer（）），
{头：网络元素，'ne dataIndex：}，
{标题：工作单数量，数据的索引：比尔，渲染器：功能（价值，cellmeta，记录开始，columnindex，店）{
VaR限制= { } 'confine数据的记录；
如果（值>限制）{
/ / cellmeta CSS = 'x-grid-back-red；
无功行= cm.findcolumnindex（开始）；
CSS = 'x-grid-back-red行；
}
返回值；
} }，
{标题：'threshold，dataIndex：'confine}
/ / {标题：手术的，国家的，渲染器：数据的索引：renderoperate }
}）；
无功网=新ext.grid.editorgridpanel（{
标题：'backlog监测统计，
Cm：厘米，
店：chartstore，
SM：新ext.grid.rowselectionmodel（{
单选：真
}），
striperows：真，
LoadMask：真的，
clickstoedit： / / 2，双击触发，
enablecolumnmove：假，
trackmouseover：假，
striperows：真，
框架：真实，
LoadMask：{
MSG：数据加载…
}，
ViewConfig：{
forcefit：真，
columnstext：'displays列，
ScrollOffset：25，
SortAscText：'ascending，
SortDescText：'descending
}，
autoexpandcolumn：'desc，
带间俄歇复合：新ext.pagingtoolbar（{
PageSize：24，
店：chartstore，
displayinfo：真，
displaymsg：'shows第{ 0 }第{ 1 }，{ 2 }共，
emptymsg：没有记录
}），
ViewConfig：{ forcefit：真的，sortasctext：正面的序列，sortdesctext：'descending，
GetRowClass：功能（记录开始，rowparams，店）{
如果（记录、数据、记录、记录、数据、限制）{
return'x-grid-back-red；
}
}
}
}）；
VaR的lineChart =新ext.chart.linechart（{
标题：工作表积压图，
Xtype：'linechart，
网址：aiupp_root + / / / CSS资源SWF的图表，
店：chartstore，
/ / xfield：'label，
/ / yfield：'alarmcount，
小费/内容的定义
tiprenderer：功能（图，记录）{
/ /警报（record.get（'starttime '））；
VaR NE = record.get（'ne）；
var str = string.format（网络元素：{ 0 } 单个卷：{ 1 }门槛：{ 2 }，NE，record.get（比尔），record.get（'confine '））
返回字符；
}，
定义两个图表是条形图、折线图。
系列：{
类型：'column，
DisplayName：'工作单编号，
身份：billid
XField：'ne，
YField：比尔，
风格：{
颜色：0x99bbe8，
尺寸：20
}
{ }。
类型：'column，
DisplayName：门槛，
XField：'ne，
YField：'confine，
风格：{
颜色：# FF0000，
尺寸：20
}
} }，
听众：{
显示：函数（）{
var c = linechart.series；
警报（C { 1 }。存储）；
/ / C { 1 }。风格。颜色=# 00ff00；
}
}，
定义/图表样式
chartstyle：{
传说：{
显示：顶部
}，
XAxis：{
颜色：0x69abc8，
majorticks：{颜色：0x69abc8，长度：4 }，
minorticks：{颜色：0x69abc8，长度：2 }，
majorgridlines：{大小：1，颜色：0xeeeeee }
}，
YAxis：{
颜色：0x69abc8，
majorticks：{颜色：0x69abc8，长度：4 }，
minorticks：{颜色：0x69abc8，长度：2 }，
majorgridlines：{大小：1，颜色：0xdfe8f6 }
}
}
}）；
无功contentpanel =新ext.tabpanel（{
地区：'center，
enabletabscroll：真，
activetab：0，
合：假，
分裂：假，
可折叠的：假的，
LayoutOnTabChange：真的，
项目：{ } lineChart，网格
}）；
间隔
VaR区间=新ext.form.textfield（{
名称：区间，
fieldlabel：区间，
身份：searchinterval
}）；
分组
无功grouptype =新ext.form.radiogroup（{
名称：'grouptype，
fieldlabel：'grouping法，
身份：searchgrouptype
项目：{
新的ext.form.radio（{
名称：grouptype
输入值：1
boxlabel：地区
}），
新的ext.form.radio（{
名称：grouptype
输入值：2
boxlabel：地区+网络元素
}），
新的ext.form.radio（{
名称：grouptype
输入值：3
boxlabel：地区+网络元+业务代码
}）
}
}）；
启动按钮
无功startbtn =新Ext. Button（{
正文：'begins，
MinWidth：80，
汉德勒：函数（）{
/ / store.load（）；
}
}）；
停止按钮
无功stopbtn =新Ext. Button（{
正文：'stops，
MinWidth：80，
汉德勒：函数（）{
/ / store.load（）；
}
}）；
无功searchpanel =新ext.form.formpanel（{
labelalign：右，
LabelWidth：60，
框架：真实，
布局：'column，
项目：{
{ ColumnWidth：。28、布局：‘形'，项目：{区间} }，
{ ColumnWidth：。38、布局：‘形'，项目：{ grouptype } }，
{ ColumnWidth：。10、布局：‘形'，项目：{ startbtn } }，
{ ColumnWidth：。16、布局：‘形'，项目：{ stopbtn } }
}
}）；
VaR VP =新Ext. Viewport（{
布局：'border'，
边界：假，
hideborders：真，
bufferresize：100，
项目：{
/ / {区域：'north，标题：：：监测条件的，真实的，利润率：5 autoheight：510 5，湿陷性：真的，项目：{ searchpanel } }，
{区域：'center，布局：配合，利润率：55年5、项目：{ contentpanel } }
}
}）；
Vp.show（）；
}）；