extjs+amcharts生成3D柱状图和数据表格使用总结

废话不多说，使用extjs+amcharts创建3d柱状图和数据表实例，如下：

　　1.首先定义一个数据模型

 Ext.define("cacheHijack", {
         extend : 'Ext.data.Model',
         fields : [ {
             name : 'id',
             type : 'double'
         }, {
             name : 'site',
             type : 'string'
         }, {
             name : 'domain',
             type : 'string'
         }, {
             name : 'date',
             type : 'string'
         }, {
             name : 'ip',
             type : 'string'
         }, {
             name : 'areaIsp',
             type : 'string'
         }, {
             name : 'hot_num',
             type : 'double'
         }, {
             name : 'hijack_rate',
             type : 'float'
         } ]
     });

　　2.创建一个store，extjs中的数据来源，这里作为ext和amcharts用到的共同的数据源。

     var itemsPerPage = 20;   //用于显示每一页的记录
     var store = Ext.create("Ext.data.Store", {
         model : 'cacheHijack',
         remoteSort : false,
         pageSize : itemsPerPage,
         autoLoad: true,
         proxy : {
             type : 'ajax',
             url : '/netmonitor/resource/cacheHijackedManager',   //这个地方是远程请求的地址，返回的是json类型的数据
             method : 'POST',
             timeout : 600000,
             reader : {
                 type : 'json',
                 root : 'items',
                 totalProperty : 'total'
             }
         }
     });

　　3.ext远程数据加载后的操作，这边操作主要是将store里的数据进行转化，转化成json对象数组的形式用于amcharts的3d图的数据源。

　　　　解释：因为下面amcharts的3d柱状图需要store里的domain,hijack_rate以后额外定义的color数据，所以这个地方我便获取出来，

　　　　　　　组合成  jsontext = [{domain:xxx1,hijack_rate:xxx1,color:#oD8ECF},{domain:xxx2,hijack_rate:xxx2,color:#oD8ECF},　　　　　　                                                     {domain:xxx3,hijack_rate:xxx3,color:#oD8ECF},......],然后通过Ext.decode将其转化成标准的json对象

　　　　　　　数组，通过create3dChart这个方法传递给amcharts创建的3d 柱状图。接着往下看。。。

 store.on('load', function(records, options, success){
         var jsontext = "[";
         for (var i = 0; i < store.getCount(); i++) {
             var record = store.getAt(i);
             var domain = record.get('domain');
             var hijack_rate = record.get('hijack_rate');
             jsontext += "{";
             jsontext += "domain:\""+ domain + "\",hijack_rate:"+ hijack_rate +",color:\"#0D8ECF\"},";
         }
         jsontext = jsontext.substring(0, jsontext.length-1)+"]";
         var jsonO = Ext.decode(jsontext);
          create3dChart(jsonO);
     });

　　4.以上都属于先准备好数据，下面就是创建显示的面板了，首先，我先创建一个ext数据表格面板，

 var gridPanel = Ext.create('Ext.grid.Panel', {
         id : 'cacheHijack-dataPanel',
         border : false,
         flex: 7,
         store : store,
         // 表格中间展示数据
         columns : [ {
             text : '序号',
             dataIndex : 'id',
             width : 60
         }, {
             text : '网站',
             dataIndex : 'site',
             width : 130
         }, {
             text : '域名',
             dataIndex : 'domain',
             width : 180
         }, {
             text : '日期',
             dataIndex : 'date',
             width : 140
         }, {
             text : '服务器IP',
             dataIndex : 'ip',
             width : 190
         }, {
             text : '资源归属地',
             dataIndex : 'areaIsp',
             width : 200
         }, {
             text : '热度数量',
             dataIndex : 'hot_num',
             width : 150
         }, {
             text : '劫持率',
             dataIndex : 'hijack_rate',
             width : 150,
             renderer:DomUrl
         }],
         listeners: {
             itemclick: function (me, record, item, index, e, eOpts) {
                     //双击事件的操作
                     var domain = record.data['domain'];
                     var site = record.data['site'];
                     var date = record.data['date'];
                     createUniqWin(domain,site,date);
                 }
             }
     });

实现的效果是这个样子

然后是一个创建3d柱状图的方法

 function create3dChart(options) {
     var chart = new AmCharts.AmSerialChart();
     chart.autoMarginOffset = 0;
     chart.dataProvider = options;
     chart.categoryField = "domain";
     chart.startDuration = 1;
 //    chart.fontSize = 3;
     chart.angle = 30;
     chart.depth3D = 15;

     // AXES
     // category
     var categoryAxis = chart.categoryAxis;
     categoryAxis.labelRotation = 15; // this line makes category values to be rotated
     categoryAxis.gridAlpha = 0;
     categoryAxis.fillAlpha = 1;
     categoryAxis.fillColor = "#FAFAFA";
     categoryAxis.gridPosition = "start";

     // value
     var valueAxis = new AmCharts.ValueAxis();
     valueAxis.dashLength = 5;
     valueAxis.title = "劫持率";
     valueAxis.minimum = 0;
     valueAxis.maximum = 100;
     valueAxis.axisAlpha = 0;
     valueAxis.unit = "%";
     chart.addValueAxis(valueAxis);

     // GRAPH
     var graph = new AmCharts.AmGraph();
     graph.valueField = "hijack_rate";
     graph.colorField = "color";
     graph.balloonText = "[[category]]: [[value]]" + "%";
     graph.type = "column";
     graph.lineAlpha = 0;
     graph.fillAlphas = 1;
     graph.bulletSize = 10;
     chart.addGraph(graph);

     // WRITE
     chart.write("chart3dDiv");      //这个地方的"chart3dDiv"是一个div的id，这个div在总面板上，下面即将看到
 }

　　5.下面这个是组合两者的总面板，请看代码：

 var resultsPanel = Ext.create('Ext.panel.Panel', {
         title: '白名单劫持率',
         frame: true,
         width: getPanelWidth(),
         height: getPanelHeight(),
         layout: {
             type: 'vbox',
             align: 'stretch'
         },
         items: [{
             xtype: 'container',
             layout: {
                 type: 'hbox',
                 align: 'stretch'
             },
             flex: 3,
             html: '<div id="chart3dDiv" style="width:' + getPanelWidth() + ' px;height:235px;"></div>'   //这个地方就是用于放置3d图的div
         },{
             xtype: 'container',
             layout: {type: 'hbox', align: 'stretch'},
             flex: 3,
             items: [gridPanel,{
                 xtype: 'form',
                 layout: {
                     type: 'vbox',
                     align:'stretch'
                 }
             }]
         }],
         dockedItems : [ {
             xtype : 'pagingtoolbar',
             pageSize : itemsPerPage,
             store : store,
             dock : 'bottom',
             displayInfo : true,
             displayMsg : '显示{0}-{1}条,共计{2}条',
             emptyMsg : '没有数据',
             beforePageText : '当前页',
             afterPageText : '共{0}页'
         } ],
         renderTo: 'main' + typeId
     });

　　6.最终实现的效果是下满这个样子：

　　7.还有就是后台获取数据部分的代码

 public void cacheHijackedManager(HttpServletRequest req, HttpServletResponse resp) throws Exception
     {
         resp.setContentType("text/json; charset=utf-8");
         String start = req.getParameter("start");  //起始条
         String limit = req.getParameter("limit");

         int total = getTotalAmount(); 

         Connection conn = null;
         PreparedStatement pst = null;
         ResultSet rs = null;
         String sql = "SELECT * FROM w_cache_hijack_day limit " + start + "," + limit;
         try {
             conn = new DBManager().DataManagerConn(Conf.customerID,Conf.NETRESOURCE);
             pst = conn.prepareStatement(sql);
             rs = pst.executeQuery();
             JSONArray ret = new JSONArray();
             while (rs.next()) {
                 JSONObject cacheHijack = new JSONObject();
                 cacheHijack.put("id", rs.getDouble(1));
                 cacheHijack.put("site", rs.getString(3));
                 cacheHijack.put("domain", rs.getString(4));
                 cacheHijack.put("date", rs.getDate(2).toString());
                 cacheHijack.put("ip", rs.getString(5));
                 cacheHijack.put("areaIsp", rs.getString(6));
                 cacheHijack.put("hot_num", rs.getDouble(7));
                 cacheHijack.put("hijack_rate", rs.getFloat(8) + "%");

                 ret.add(cacheHijack);
             }
             resp.getWriter().print("{\"success\":\"true\",\"items\":" + ret + ",\"total\":\"" + total + "\"}");
         } catch (Exception e) {
             e.printStackTrace();
         } finally{
             try {
                 if(rs!=null) rs.close();
                 if(pst!=null) pst.close();
                 if(conn!=null) conn.close();
             } catch (SQLException e) {
                 e.printStackTrace();
             }
         }
     }

 /**
      * 统计总数，用于分页
      * @param domain
      * @param date
      * @return
      */
     public int getTotalAmount() {
         int totalPages = 0;// 默认值为0
         String sql = "SELECT count(*) FROM w_cache_hijack_day";

         Connection conn = null;
         PreparedStatement pstm = null;
         ResultSet rs = null;
         try {
             conn = new DBManager().DataManagerConn(Conf.customerID,Conf.NETRESOURCE);
             pstm = conn.prepareStatement(sql);
             rs = pstm.executeQuery();
             if (rs.next()) {
                 totalPages = rs.getInt(1);
             }
         } catch (Exception e) {
             e.printStackTrace();
         } finally {
             try {
                 if(rs!=null) rs.close();
                 if(pstm!=null) pstm.close();
                 if(conn!=null) conn.close();
             } catch (SQLException e) {
                 e.printStackTrace();
             }
         }
         return totalPages;
     }

　　记录可能略粗略，以备遗忘。