extjs ColumnChart で異なる色を設定する実装 code_extjs

Ext.onReady(function(){
//ストアを定義します
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:'ネットワーク要素 1',confine:80,bill:150},
{ne:'ネットワーク要素 2',confine:150,bill : 140},
{ne:'ネットワーク要素 3',confine:180,bill:160},
{ne:'ネットワーク要素 5',confine:120,bill:180},
{ ne :'ネットワーク要素 6',confine:165,bill:13},
{ne:'ネットワーク要素 7',confine:54,bill:12},
{ne:'ネットワーク要素 8', confine :55,bill:44},
{ne:'ネットワーク要素 9',confine:33,bill:113},
{ne:'ネットワーク要素 10',confine:122,bill:77}
]
}
//データをロード
chartStore.loadData(obj);
//プッシュレット コールバック関数
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, records, rowIndex, columnIndex, store){
var confine = Record.data['confine'];
/*if(value>=confine){
//cellMeta.css='x-grid-back-red'; row = cm.findColumnIndex(rowIndex);
row.css='x-grid-back-red';
}*/
戻り値; ' しきい値',dataIndex:'confine'}
//{header:'operation',dataIndex:'state',renderer:renderOperate}
]);
var Grid = new Ext.grid.EditorGridPanel ({
title:'作業指示書のバックログ監視統計',
cm:cm,
store:chartStore,
sm : new Ext.grid.RowSelectionModel({
singleSelect : true
})、
ストライプRows:true、
loadMask:true、
clicksToEdit : 2、//ダブルクリックトリガー、
enableColumnMove : false、
trackMouseOver : false、
ストライプRows :true ,
frame:true,
loadMask:{
msg: "データの読み込み中..."
},
viewConfig:{
forceFit:true,
columnsText :'表示列'、
scrollOffset:25、
sortAscText:'Ascending'、
sortDescText:'Descending'
}、
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/ resource/charts.swf',
store:chartStore,
//xField: 'label',
//yField:'alarmCount',
// ヒントのコンテンツを定義
tipRenderer : function (チャート, レコード){
//alert(record.get('ne'));
var ne = Record.get('ne');
var str = String.要素: {0}n 作業指示数量: {1}n しきい値: {2}',ne,record.get('bill'),record.get('confine'))
return str; },
//2 つのグラフを定義します。1 つは棒グラフ、もう 1 つは折れ線グラフです
series: [{
type: 'column',
displayName: 'work single number',
id: "billId"、
xField: 'ne'、
yField: 'bill'、
style: {
color:0x99BBE8、
size: 20
}
},{
type:'column',
displayName: 'threshold',
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,
closeable: false,
split : false,
collapsible : false,
layoutOnTabChange:true,
items:[linechart,grid]
}); interval = new Ext.form.TextField({
name:'interval',
fieldLabel:'interval',
id:"searchInterval"
}); // グループ化メソッド
var groupType = new Ext.form.RadioGroup({
name:'groupType',
fieldLabel:'グループ化メソッド',
id:"searchGroupType",
items :[
new Ext.form.Radio({
name: "groupType",
inputValue: "1",
boxLabel: "Region"
}),
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();
});