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();
- }
服务器端比较简单,根据参数分别返回折线图和饼图的数据