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

(0)

相关推荐

  • 浅析jquery的js图表组件highcharts

    Highcharts是一个制作图表的纯Javascript类库, 主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对于非商用用户免费(包括个人网站.非盈利性组织.学生团体等). 纯JS,无BS: 支持大部分的图表类型:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图.散布图: 跨语言:不管是PHP..net还是Java都可以使用,它只需要三个文件:一个是 Highcharts的核心文件highcharts.js,还有a canvas emulator for

  • jsp JFreeChart使用心得与例子

    当前的JFreeChart的最新版本为jfreechart-1.0.11.zip.可以到http://www.jfree.org/jfreechart/index.html找到 二.JFreeChart的基本使用 不论创建的是什么图,JFreeChart都遵循以下的这个使用步骤: 1.建立Dataset.所有的数据都存放在Dataset中的.(创建一个数据源(dataset)来包含将要在图形中显示的数据) 2.建立JFreeChart.将dataset中的数据导入到JFreeChart中.(创建

  • jQuery.Highcharts.js绘制柱状图饼状图曲线图

    在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. 复制代码 代码如下: var chart;             $(document).ready(function() {                 chart = new Highcharts.Chart({                     c

  • JSP FusionCharts Free显示图表 具体实现

    FusionCharts Free的下载地址:http://www.fusioncharts.com/goodies/fusioncharts-free/ 接下来在jsp页面中引入js 复制代码 代码如下: <script type="text/javascript" src="FusionChartsFree/JSClass/FusionCharts.js"></script> 然后写入 复制代码 代码如下: <script type

  • JSChart轻量级图形报表工具(内置函数中文参考)

    因为网上讲这个框架的文章不是很多,而且它本身对中文支持不是很好,手册什么的都是英文的,虽然不是很多,但考虑到一些新手可能没有时间和精力来阅读参考手册,为了让更多的朋友了解它,所以工作之余就大概的翻译了一下它的内置函数,因为时间仓促,有些地方翻译的很大概,也难免混杂了一些错误,算是抛砖引玉吧,希望大家不明白的地方亲手测试一下,参照它的官方提供的例子很容易上手. JSChart内置函数参考 colorizeBars(array colordata)设置柱状图各矩形颜色. colorizePie(ar

  • 使用Chart.js图表库制作漂亮的响应式表单

    入门基础 Chart.js是一个基于HTML5的开源图表库,可以方便简洁的绘制美观的图表. 主要特性包括: 1.支持6种不同的表格类型:曲线图.柱状图.饼状图.雷达图.极坐标区域图.环图. 2.基于HTML5开发,支持所有浏览器(包括IE7/8). 3.不依赖于其他任何库,仅有4.5k大小,并且可以进行定制. Chart.js 是一个基于 HTML5 canvas 的响应式.灵活的.轻量化的图表库.库中提供了六种不同的图表类型,每种类型都带有一系列的自定义选项.如果这些还不够,你还可以创造自己的

  • 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'

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

    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设置某列背景颜色和字体颜色的实现方法

    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中一段文字设置多种字体颜色代码

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

  • vscode设置Fira_Code字体及改变编辑器字体、背景颜色的代码详解

    一.设置Fira_Code字体 1.下载字体 这里给出github下载链接,点击链接后在README.md中的Download & Install一栏中即可下载,链接中也包括字体示例及介绍,可自行查看. Fira_Code字体下载 2,安装字体 下载并解压,进入里面的ttf文件夹,双击或右击后点击安装,里面包含六种样式,可以选择性安装或全安装即可. 3,设置vscode 打开vscode,点击左下角齿轮形状图标,选择settings,得到下图所示界面: 根据上图箭头所示依次点击Font,Edit

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

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

  • jQuery编写设置和获取颜色的插件

    分享一下编写设置和获取颜色的插件,首先我将插件的名字命名为jquery.color.js. 该插件用来实现以下两个功能 设置元素的颜色. 获取元素的颜色. 先在搭建好如下编写插件的框架: ;(function($){ //这里编写插件代码 })(jQuery); 我这里采用jQuery.fn.extend().这种方法来编写,代码如下: ;(function($){ $.fn.extend({ "color":function(value){ //这里写插件代码 } }); })(jQ

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

    本文实例讲述了js实现点击按钮后给Div图层设置随机背景颜色的方法.分享给大家供大家参考.具体如下: 给myDiv设置随机背景颜色,用随机颜色代码赋值给DIV的背景颜色 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"/> <title>js设置随机颜色 <

  • Android中EditText和AutoCompleteTextView设置文字选中颜色方法

    EditText和AutoCompleteTextView设置文字选中颜色 大多数Android Rom上,文本选择的背景色都是很好看的鲜绿色, 但是在某些垃圾的三星手机上,居然是蓝色,令人恶心反感,其实完全可以通过程序来修改,文本的默认选中背景色. 所用API解释 复制代码 代码如下: android:textColorHighlight Color of the text selection highlight. EditText设置效果 AutoCompleteTextView 设置效果

  • Android设置PreferenceCategory背景颜色的方法

    本文实例讲述了Android设置PreferenceCategory背景颜色的方法.分享给大家供大家参考.具体分析如下: 大家可能遇到,PreferenceCategory默认是黑色背景,如何我们更换了PreferenceScreen的背景,那么这种分隔栏看上去很丑,那么怎么更改背景呢?我们可以通过自定义VIEW来实现. 代码如下: public class MyPreferenceCategory extends PreferenceCategory { public MyPreference

随机推荐