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

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

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

 1 Ext.define("cacheHijack", {
 2         extend : 'Ext.data.Model',
 3         fields : [ {
 4             name : 'id',
 5             type : 'double'
 6         }, {
 7             name : 'site',
 8             type : 'string'
 9         }, {
10             name : 'domain',
11             type : 'string'
12         }, {
13             name : 'date',
14             type : 'string'
15         }, {
16             name : 'ip',
17             type : 'string'
18         }, {
19             name : 'areaIsp',
20             type : 'string'
21         }, {
22             name : 'hot_num',
23             type : 'double'
24         }, {
25             name : 'hijack_rate',
26             type : 'float'
27         } ]
28     });

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

 1     var itemsPerPage = 20;   //用于显示每一页的记录
 2     var store = Ext.create("Ext.data.Store", {
 3         model : 'cacheHijack',
 4         remoteSort : false,
 5         pageSize : itemsPerPage,
 6         autoLoad: true,  
 7         proxy : {
 8             type : 'ajax',
 9             url : '/netmonitor/resource/cacheHijackedManager',   //这个地方是远程请求的地址，返回的是json类型的数据
10             method : 'POST',
11             timeout : 600000,
12             reader : {
13                 type : 'json',
14                 root : 'items',
15                 totalProperty : 'total'
16             }
17         }
18     });

　　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 柱状图。接着往下看。。。

 1 store.on('load', function(records, options, success){
 2         var jsontext = "[";
 3         for (var i = 0; i < store.getCount(); i++) {  
 4             var record = store.getAt(i);
 5             var domain = record.get('domain');
 6             var hijack_rate = record.get('hijack_rate');
 7             jsontext += "{";
 8             jsontext += "domain:""+ domain + "",hijack_rate:"+ hijack_rate +",color:"#0D8ECF"},";
 9         }
10         jsontext = jsontext.substring(0, jsontext.length-1)+"]";
11         var jsonO = Ext.decode(jsontext);
12          create3dChart(jsonO);
13     });

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

 1 var gridPanel = Ext.create('Ext.grid.Panel', {
 2         id : 'cacheHijack-dataPanel',
 3         border : false,
 4         flex: 7,
 5         store : store,
 6         // 表格中间展示数据
 7         columns : [ {
 8             text : '序号',
 9             dataIndex : 'id',
10             width : 60
11         }, {
12             text : '网站',
13             dataIndex : 'site',
14             width : 130
15         }, {
16             text : '域名',
17             dataIndex : 'domain',
18             width : 180
19         }, {
20             text : '日期',
21             dataIndex : 'date',
22             width : 140
23         }, {
24             text : '服务器IP',
25             dataIndex : 'ip',
26             width : 190
27         }, {
28             text : '资源归属地',
29             dataIndex : 'areaIsp',
30             width : 200
31         }, {
32             text : '热度数量',
33             dataIndex : 'hot_num',
34             width : 150
35         }, {
36             text : '劫持率',
37             dataIndex : 'hijack_rate',
38             width : 150,
39             renderer:DomUrl
40         }],
41         listeners: {
42             itemclick: function (me, record, item, index, e, eOpts) {
43                     //双击事件的操作
44                     var domain = record.data['domain'];
45                     var site = record.data['site'];
46                     var date = record.data['date'];
47                     createUniqWin(domain,site,date);
48                 }
49             }
50     });

实现的效果是这个样子

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

 1 function create3dChart(options) {
 2     var chart = new AmCharts.AmSerialChart();
 3     chart.autoMarginOffset = 0;
 4     chart.dataProvider = options;
 5     chart.categoryField = "domain";
 6     chart.startDuration = 1;
 7 //    chart.fontSize = 3;
 8     chart.angle = 30;
 9     chart.depth3D = 15;
10     
11     // AXES
12     // category
13     var categoryAxis = chart.categoryAxis;
14     categoryAxis.labelRotation = 15; // this line makes category values to be rotated
15     categoryAxis.gridAlpha = 0;
16     categoryAxis.fillAlpha = 1;
17     categoryAxis.fillColor = "#FAFAFA";
18     categoryAxis.gridPosition = "start";
19     
20     // value
21     var valueAxis = new AmCharts.ValueAxis();
22     valueAxis.dashLength = 5;
23     valueAxis.title = "劫持率";
24     valueAxis.minimum = 0;
25     valueAxis.maximum = 100;
26     valueAxis.axisAlpha = 0;
27     valueAxis.unit = "%";
28     chart.addValueAxis(valueAxis);
29 
30     // GRAPH
31     var graph = new AmCharts.AmGraph();
32     graph.valueField = "hijack_rate";
33     graph.colorField = "color";
34     graph.balloonText = "[[category]]: [[value]]" + "%";
35     graph.type = "column";
36     graph.lineAlpha = 0;
37     graph.fillAlphas = 1;
38     graph.bulletSize = 10;
39     chart.addGraph(graph);
40 
41     // WRITE
42     chart.write("chart3dDiv");      //这个地方的"chart3dDiv"是一个div的id，这个div在总面板上，下面即将看到
43 }

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

 1 var resultsPanel = Ext.create('Ext.panel.Panel', {
 2         title: '白名单劫持率',
 3         frame: true,
 4          getPanelWidth(),
 5         height: getPanelHeight(),
 6         layout: {
 7             type: 'vbox',       
 8             align: 'stretch'
 9         },
10         items: [{
11             xtype: 'container',
12             layout: {
13                 type: 'hbox', 
14                 align: 'stretch'
15             },
16             flex: 3,
17             html: '<div id="chart3dDiv" style="' + getPanelWidth() + ' px;height:235px;"></div>'   //这个地方就是用于放置3d图的div
18         },{
19             xtype: 'container',
20             layout: {type: 'hbox', align: 'stretch'},
21             flex: 3,
22             items: [gridPanel,{
23                 xtype: 'form',
24                 layout: {
25                     type: 'vbox',
26                     align:'stretch'
27                 }
28             }]
29         }],
30         dockedItems : [ {
31             xtype : 'pagingtoolbar',
32             pageSize : itemsPerPage,
33             store : store,
34             dock : 'bottom',
35             displayInfo : true,
36             displayMsg : '显示{0}-{1}条,共计{2}条',
37             emptyMsg : '没有数据',
38             beforePageText : '当前页',
39             afterPageText : '共{0}页'
40         } ],
41         renderTo: 'main' + typeId
42     });

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

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

 1 public void cacheHijackedManager(HttpServletRequest req, HttpServletResponse resp) throws Exception
 2     {    
 3         resp.setContentType("text/json; charset=utf-8"); 
 4         String start = req.getParameter("start");  //起始条
 5         String limit = req.getParameter("limit");
 6         
 7         int total = getTotalAmount(); 
 8         
 9         Connection conn = null;
10         PreparedStatement pst = null;
11         ResultSet rs = null;
12         String sql = "SELECT * FROM w_cache_hijack_day limit " + start + "," + limit;
13         try {
14             conn = new DBManager().DataManagerConn(Conf.customerID,Conf.NETRESOURCE);
15             pst = conn.prepareStatement(sql);
16             rs = pst.executeQuery();
17             JSONArray ret = new JSONArray();
18             while (rs.next()) {
19                 JSONObject cacheHijack = new JSONObject();
20                 cacheHijack.put("id", rs.getDouble(1));
21                 cacheHijack.put("site", rs.getString(3));
22                 cacheHijack.put("domain", rs.getString(4));
23                 cacheHijack.put("date", rs.getDate(2).toString());
24                 cacheHijack.put("ip", rs.getString(5));
25                 cacheHijack.put("areaIsp", rs.getString(6));
26                 cacheHijack.put("hot_num", rs.getDouble(7));
27                 cacheHijack.put("hijack_rate", rs.getFloat(8) + "%");
28                 
29                 ret.add(cacheHijack);
30             }
31             resp.getWriter().print("{"success":"true","items":" + ret + ","total":"" + total + ""}");
32         } catch (Exception e) {
33             e.printStackTrace();
34         } finally{
35             try {
36                 if(rs!=null) rs.close();
37                 if(pst!=null) pst.close();
38                 if(conn!=null) conn.close();
39             } catch (SQLException e) {
40                 e.printStackTrace();
41             }
42         }
43     }
 1 /**
 2      * 统计总数，用于分页
 3      * @param domain
 4      * @param date
 5      * @return
 6      */
 7     public int getTotalAmount() {
 8         int totalPages = 0;// 默认值为0
 9         String sql = "SELECT count(*) FROM w_cache_hijack_day";
10         
11         Connection conn = null;
12         PreparedStatement pstm = null;
13         ResultSet rs = null;
14         try {
15             conn = new DBManager().DataManagerConn(Conf.customerID,Conf.NETRESOURCE);
16             pstm = conn.prepareStatement(sql);
17             rs = pstm.executeQuery();
18             if (rs.next()) {
19                 totalPages = rs.getInt(1);
20             }
21         } catch (Exception e) {
22             e.printStackTrace();
23         } finally {
24             try {
25                 if(rs!=null) rs.close();
26                 if(pstm!=null) pstm.close();
27                 if(conn!=null) conn.close();
28             } catch (SQLException e) {
29                 e.printStackTrace();
30             }
31         }
32         return totalPages;
33     }

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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/0519xf/p/6226133.html