当前位置：首页 → 问答吧 → EXT 二维柱状图已经做出来了，如何做3D立体的柱状图？

EXT 二维柱状图已经做出来了，如何做3D立体的柱状图？

时间：2011-03-03

来源：互联网

用ext已经实现二维图了，代码如下：
Ext.chart.Chart.CHART_URL = 'resources/charts.swf';
Ext.onReady(function(){

var listStore = new Ext.data.Store({
// autoLoad: true,
url: 'getwebapps.do',
reader: new Ext.data.XmlReader({
record: 'item'
}, [{
name: 'name'
}, {
name: 'value'
}]),
listeners: {
'load': function(store){
webappForm2.form.findField('ip').setValue(store.getAt(0).get('value'));
}
}
});
listStore.load();
var listStore2 = new Ext.data.Store({
// autoLoad: true,
url: 'getattacktypes.do',
reader: new Ext.data.XmlReader({
record: 'item'
}, [{
name: 'name'
}, {
name: 'value'
}]),
listeners: {
'load': function(store){
webappForm2.form.findField('attacktype').setValue(store.getAt(0).get('value'));
}
}
});
listStore2.load();

var chartStore = new Ext.data.XmlStore({
// autoLoad: true,
url: 'plants.xml',
record: 'hourly',

sortInfo:{field:'time', direction:'ASC'},
fields: [ {name:'label',
mapping:'time',
convert:function(v,record){
// return Date.parseDate(v, 'Y-m-d H:i:s').format('H:i');
return new Date(parseInt(v*1000)).format('H:i');
}
},{
name: 'time',type: 'int'
}, {
name: 'count',
type: 'int',
mapping:'attacktype/count'
},
{name:'attacktype', mapping:'attacktype/name'}]
});
// chartStore.load();

var gridHandler = {
gettables: function(){
var ip = webappForm2.form.findField('ip');
var attacktype = webappForm2.form.findField('attacktype');
// disname=attacktype.value;
var date=Ext.getCmp('date');
if (ip.validate() && attacktype.validate()&& date.validate()) {
var params = {
'ip': ip.getValue(),
'attacktype': attacktype.getValue(),
'day':date.getValue().getTime()/1000,
'time':'daily'

}
chartStore.baseParams = params;
// chartStore.on('load', function(record){
// disname=record.getAt(0).get('attacktype')}) ;

chartStore.load();
var chart = Ext.getCmp('chart');
chart.setYAxis(new Ext.chart.NumericAxis({
// minimum: 0,
// maximum :10
}));
//
}

}

}
var webappForm2 = new Ext.FormPanel({
width: 250,
border: false,
defaults: {
xtype: 'ctextfield',
anchor: '95%',

allowBlank:false
},
items: [{
xtype:'combo',
displayField: 'name',
valueField: 'value',
triggerAction: 'all',
// readOnly: true,
store:listStore,
fieldLabel: 'web-app名称',
name: 'ip',
anchor: '98%'
},{
xtype: 'combo',
// vtype:'iporsubnetcheck',
displayField: 'name',
valueField: 'value',
triggerAction: 'all',
// readOnly: true,
store:listStore2,
fieldLabel: '攻击类型',
name: 'attacktype',
anchor: '98%'
}]
});

var date = new Ext.form.DateField({
xtype: 'datefield',
fieldLabel: '日期',
bodyStyle:'padding:10px 10px 10px 30px;background:#1E4176;',
width:120,
id:'date',
allowBlank: false,
name:'date',
format : "Y年m月d日",
anchor: '95%'

});
date.setValue(new Date);
var chartWin= new Ext.Panel({
title:
'<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td><font color=white size=4>&nbsp&nbsp&nbsp每小时攻击统计</font></td><td class="titlebutton"><div align=right width=100%> <input type=button id="帮助" name="帮助" value="帮助" onClick=window.open("#","help","width=500,height=400,scrollbars=yes,resizable=1");></div></td></tr></table>',
// '<tr> <td><font color=white>&nbsp&nbsp&nbsp每日攻击统计</font><div align=right width=100%> <input type=button id="帮助" name="帮助" value="帮助" onClick=window.open("#","help","width=500,height=400,scrollbars=yes,resizable=1")></div></td> </tr>',
renderTo: 'container3',
frame:true,
border : false ,
width: 470,
height: 340,
layout: 'fit',
tbar: {
items:[webappForm2,date,{

text: '显示',
width: 50,
anchor: '95%',
iconCls: 'arrow_refresh',
handler:
gridHandler.gettables

}]
}
,
items:[
{
xtype:'columnchart',
// url: 'resources/charts.swf',
store:chartStore,
id:'chart',
tipRenderer : function(chart, record,index,series){

// var startTime = record.get('time').format('y-m-d H:i');
// var endTime = record.get('time').format('y-m-d H:i');
if(series.yField == 'count'){
return String.format('时间:{0}\n攻击数:{1}\n攻击类型:{2}',new Date(parseInt(record.get('time'))*1000).format('Y-m-d H:i'),record.get('count'),record.get('attacktype').trim())
}else{
return String.format('时间:{0}\n攻击数:{1}\n攻击类型:{2}',record.get('time'),record.get('count2'),record.get('attacktype2'))
}
},
//
yAxis: new Ext.chart.NumericAxis({
// title: '<font style= "layout-flow: vertical-ideographic;height:399;float:right; ">攻击个数：k</font> '
// displayName: 'Visits'
}),

series: [{
type: 'column',
// displayName:disname=='0'?'攻击类型':disname,
displayName:'每小时攻击',
xField: 'label',
yField: 'count',
style: {
color:'#6633ff',
size: 9,
backdepth:'15pt'
}
}],
chartStyle: {
dataTip: {
padding: 2,
border: {
color: 0x99bbe8,
size:1
},
background: {
color: '#ccffcc',
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 14,
bold: true
}
},
//chart背景
background: {
color: 0xDAE7F6,
alpha: .9
},
// legend:{
// display: "top"
//
// },
font: {
name: 'Tahoma',
color: '#cc00cc',
size: 10,
bold: true
},
xAxis: {

color: '#cc00cc',
labelRotation: -80,
majorTicks: {color: 0x69aBc8, length:24},

minorTicks: {color: 0x69aBc8, length: 22},

majorGridLines:{size: 1, color: 0xeeeeee}

},
yAxis: {
// color: 0x69aBc8,
color: '#cc00cc',
minimum: 1,

// majorTicks: {color: 0x69aBc8, length: 4},
//
// minorTicks: {color: 0x69aBc8, length: 5},

majorGridLines: {size: 1, color: 0xeeeeee}

}

}

}]

});

chartWin.header.setStyle( {
// color: '#0099ff', //设置颜色
background : '', //去掉默认的背景
'background-color': '#0099ff' //设置背景色
});
// chartWin.body.setStyle( {
// color: '#F00', //设置颜色
// background : '', //去掉默认的背景
// 'background-color': '#999999' //设置背景色
// });

});

*************************
plant.xml代码如下：
<?xml version="1.0" encoding="UTF-8"?>
<daily>
<hourly>
<time>
1299168480
</time>
<allow>
12
</allow>
<deny>
0
</deny>
<attacktype>
<name>
cross-site-scripting
</name>
<count>
17777k
</count>
</attacktype>
</hourly>
<hourly>
<time>
1299168540
</time>
<allow>
12
</allow>
<deny>
0
</deny>
<attacktype>
<name>
cross-site-scripting
</name>
<count>
4421k
</count>
</attacktype>
</hourly>
</daily>

效果图不知道怎么传上来。大家自己试一下吧

作者: hanhan1720 发布时间: 2011-03-03

该回复于2011-03-04 09:01:15被管理员删除