最近實習沒什么時間寫閱讀筆記，就把項目中用到的一些技術點記錄一下，寫的不是很詳細，只是把一些大概的代碼貼出來：
EXTJS3.4實現的餅圖，帶點擊聯動事件，就是點擊第一個圖出現第二個圖，點擊第二個圖出現第三個圖：
JSP頁面
<link rel="stylesheet" type="text/css"
href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="ext/ext-all.js">
</script>
<link rel="stylesheet" type="text/css" href="ext/shared/examples.css" />
<script type="text/javascript">
Ext.chart.Chart.CHART_URL = 'ext/resources/charts.swf';
var store;
var panel;
var store2;
var panel2;
var store3;
var panel3;
//顯示第三幅圖
function showThree(year, proName) {
store3 = new Ext.data.JsonStore( {
autoDestroy : true,
url : 'statistics_queryByProjectNameAndYear.action',
storeId : 'myStore3',
root : 'frontStatisticsList',
idProperty : 'name',
fields : [ 'name', 'value', 'rate' ]
});
var div3 = document.getElementById("panel3");
if (div3 != null && div3 != undefined) {
div3.removeNode(true);
}
;
panel3 = new Ext.Panel( {
width : 350,
height : 350,
title : '月度報表',
id : 'panel3',
renderTo : 'container3',
items : {
store : store3,
xtype : 'piechart',
dataField : 'value',
categoryField : 'name',
extraStyle : {
legend : {
display : 'bottom',
padding : 5,
font : {
family : 'Tahoma',
size : 13
}
}
}
}
});
store3.load( {
params : {
projectName : proName,
year : year
}
});
};
//顯示第二幅圖
function showTwo(proName) {
store2 = new Ext.data.JsonStore( {
autoDestroy : true,
url : 'statistics_queryByProjectName.action',
storeId : 'myStore2',
root : 'frontStatisticsList',
idProperty : 'name',
fields : [ 'name', 'value', 'rate' ]
});
var div = document.getElementById("panel2");
if (div != null && div != undefined) {
div.removeNode(true);
}
;
var div3 = document.getElementById("panel3");
if (div3 != null && div3 != undefined) {
div3.removeNode(true);
}
;
panel2 = new Ext.Panel( {
width : 350,
height : 350,
title : '年度報表',
id : 'panel2',
renderTo : 'container2',
items : {
store : store2,
xtype : 'piechart',
dataField : 'value',
categoryField : 'name',
listeners : {
itemclick : function(o) {
var rec = store2.getAt(o.index);
showThree(rec.get('name'), rec.get('rate'));
}
},
extraStyle : {
legend : {
display : 'bottom',
padding : 5,
font : {
family : 'Tahoma',
size : 13
}
}
}
}
});
store2.load( {
params : {
projectName : proName
}
});
};
//顯示第一幅圖
Ext.onReady(function() {
store = new Ext.data.JsonStore( {
autoDestroy : true,
url : 'statistics_queryByCbdw.action',
storeId : 'myStore',
root : 'frontStatisticsList',
idProperty : 'name',
fields : [ 'name', 'value', 'rate' ]
});
panel = new Ext.Panel( {
width : 350,
height : 350,
title : '按承辦單位統計',
renderTo : 'container',
items : {
store : store,
xtype : 'piechart',
dataField : 'value',
categoryField : 'name',
listeners : {
itemclick : function(o) {
var rec = store.getAt(o.index);
showTwo(rec.get('name'));
}
},
extraStyle : {
legend : {
display : 'bottom',
padding : 5,
font : {
family : 'Tahoma',
size : 13
}
}
}
}
});
});
function show() {
store.load( {
params : {
cbdw : document.getElementById('name').value
}
});
var div = document.getElementById("panel2");
if (div != null && div != undefined) {
div.removeNode(true);
}
;
var div3 = document.getElementById("panel3");
if (div3 != null && div3 != undefined) {
div3.removeNode(true);
}
;
}
</script>
Struts.xml
<action name="statistics_*" class="StatisticsAction" method="{1}">
<result type="json" name="success" />
</action>
效果圖：
