EXTJS实现的饼图
最近实习没什么时间写阅读笔记，就把项目中用到的一些技术点记录一下，写的不是很详细，只是把一些大概的代码贴出来：
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>
效果图：
