从服务器获取Chart的数据
ExtJs提供了绘制图表的功能，可以绘制折线图、条形图和饼图。这里是一个从servlet获取数据绘制折线图和饼图的例子。下图是最后的结果：
客户端html代码如下:
客户端chart.js代码如下:
其中第一句Ext.chart.Chart.CHART_URL = '../ext/resources/charts.swf';是为了使用当前服务器的文件，如果没有这句话，默认会去adobe的站点取。
折线图和饼图的数据都是通过JsonStore取得的，可以通过url属性指定提供数据的地址，通过baseParam属性指定参数，其实这两个就是向服务器发送POST命令的url地址和参数。
折线图和饼图都是通过Panel的items属性定义的。折线图的xtype是linechart，x轴和y轴通过xField，和yField定义。饼图的xtype是piechart，分类通过categoryField定义，数据通过dataField定义。两者都可以通过listeners定义事件响应函数，这里分别定义了鼠标点击事件。
以下是服务器端的servlet的代码片段：
服务器端比较简单，根据参数分别返回折线图和饼图的数据。
客户端html代码如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>chart demo</title> <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" /> <script type="text/javascript" src="../ext/adapter/ext/ext-base-debug.js"></script> <script type="text/javascript" src="../ext/ext-all-debug.js"></script> <script type="text/javascript" src="chart.js"></script> </head> <body> <div id="line-chart"></div> <div id="pie-chart"></div> </body> </html>
客户端chart.js代码如下:
Ext.chart.Chart.CHART_URL = '../ext/resources/charts.swf';
Ext.onReady(function() {
var lineStore = new Ext.data.JsonStore({
autoDestroy : true,
url : '/extapp/ChartServlet',
baseParams : {
'type' : 'line'
},
root : 'data',
fields : ['name', 'visits', 'views']
});
lineStore.load();
// extra extra simple
new Ext.Panel({
title : '线图',
renderTo : 'line-chart',
width : 300,
height : 200,
layout : 'fit',
items : {
xtype : 'linechart',
store : lineStore,
xField : 'name',
yField : 'visits',
listeners : {
itemclick : function(o) {
var rec = lineStore.getAt(o.index);
Ext.Msg.alert('Item Selected', 'You chose '
+ rec.get('name'));
}
}
}
});
var pieStore = new Ext.data.JsonStore({
autoDestroy : true,
url : '/extapp/ChartServlet',
baseParams : {
'type' : 'pie'
},
root : 'data',
fields : ['season', 'total']
});
pieStore.load();
// extra extra simple
new Ext.Panel({
title : '饼图',
renderTo : 'pie-chart',
width : 300,
height : 300,
layout : 'fit',
items : {
xtype : 'piechart',
store : pieStore,
dataField : 'total',
categoryField : 'season',
extraStyle : {
legend : {
display : 'bottom',
padding : 5,
font : {
family : 'Tahoma',
size : 13
}
}
},
listeners : {
itemclick : function(o) {
var rec = pieStore.getAt(o.index);
Ext.Msg.alert('Item Selected', 'You chose '
+ rec.get('season'));
}
}
}
});
});
其中第一句Ext.chart.Chart.CHART_URL = '../ext/resources/charts.swf';是为了使用当前服务器的文件，如果没有这句话，默认会去adobe的站点取。
折线图和饼图的数据都是通过JsonStore取得的，可以通过url属性指定提供数据的地址，通过baseParam属性指定参数，其实这两个就是向服务器发送POST命令的url地址和参数。
折线图和饼图都是通过Panel的items属性定义的。折线图的xtype是linechart，x轴和y轴通过xField，和yField定义。饼图的xtype是piechart，分类通过categoryField定义，数据通过dataField定义。两者都可以通过listeners定义事件响应函数，这里分别定义了鼠标点击事件。
以下是服务器端的servlet的代码片段：
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
System.out.println("doPost");
String type = request.getParameter("type");
System.out.println("type = " + type);
PrintWriter out = response.getWriter();
if (type.equals("line")) {
out.print(lineChartData());
} else if (type.equals("pie")) {
out.print(pieChartData());
}
}
private String lineChartData() {
StringBuilder sb = new StringBuilder();
sb.append("{");
sb.append(" data : [{");
sb.append(" name : 'Jul 07',visits : 245000,views : 3000000");
sb.append(" },{");
sb.append(" name : 'Aug 07',visits : 205000,views : 3000000");
sb.append(" },{");
sb.append(" name : 'Sep 07',visits : 115000,views : 3000000");
sb.append(" },{");
sb.append(" name : 'Oct 07',visits : 255000,views : 3000000");
sb.append(" },{");
sb.append(" name : 'Nov 07',visits : 345000,views : 3000000");
sb.append(" },{");
sb.append(" name : 'Dec 07',visits : 315000,views : 3000000");
sb.append(" }]");
sb.append("}");
return sb.toString();
}
private String pieChartData() {
StringBuilder sb = new StringBuilder();
sb.append("{");
sb.append(" data : [{");
sb.append(" season: 'Summer',total: 150");
sb.append(" },{");
sb.append(" season: 'Fall',total: 245");
sb.append(" },{");
sb.append(" season: 'Winter',total: 117");
sb.append(" },{");
sb.append(" season: 'Spring',total: 184");
sb.append(" }]");
sb.append("}");
return sb.toString();
}
服务器端比较简单，根据参数分别返回折线图和饼图的数据。