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'}
});
//測試資料
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 ExtPanelel ({
title:'工單積壓監控統計',
cm:cm,
store:chartStore,
sm : new Ext.grid.RowSelectionModel({
singleSelect : true
}),
stripeRows:true,
loadMask:true,
clicksToEdit : 2,//雙擊觸發,
enableColumnMove : false,
twsMouseOver : fstr. ,
frame:true,
loadMask:{
msg:"資料載入中....."
},
viewConfig:{
forceFit:true,
columnsText:'顯示列',
scrollOffset:25,
sortAscText:'升序',
sortDescText:'降序'
},
autoExpandColumn:'下desc', 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_ROurl: AIUPP_RO '/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(){
vareners:{
"show":function(){
var = linechart.series;
//alert(c[1].store);
//c[1].style.color='#00ff00';
}
},
//定義圖表樣式
chartStyle: {
legend:{
display: "top"
},
xAxis: {
color: 0x69aBc8,
color: 0x69aBc8, length:4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines:{size: 1, color: 0xeeeeee}
majorGridLines:{size: 1, color: 0xeeeeee}
},
🎜>color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2}, }
}
});
var contentPanel = new Ext.TabPanel({
region:'center',
enableTabScroll:true,
activeTab:0, <0>