EXT chartpanel 饼状图拆线图

来源：互联网发布：java中合法的标识符编辑：程序博客网时间：2024/04/29 12:51

ExtJs提供了绘制图表的功能，可以绘制折线图、条形图和饼图。这里是一个从servlet获取数据绘制折线图和饼图的例子。下图是最后的结果：

客户端html代码如下:

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代码如下:

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的代码片段：

Java代码  
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();  
}  

服务器端比较简单，根据参数分别返回折线图和饼图的数据

EXT chartpanel 饼状图 拆线图

EXT chartpanel 饼状图拆线图