echarts和dataTable

    最近做了个数据库课设，用到了echarts和DataTable，下面就来谈一谈二者后台传数据传数据的区别

    首先来说说echarts，博主在之前做的一个项目要求将数据库中的数字信息实时返回到前端的一个折线图，而且要求无刷新显示，这就不得不用到图表库了。稍微介绍一下echarts

echarts是由百度团队打造的一款纯js的图表库，官网的下载路径如下：http://echarts.baidu.com/download.html

或者可以从博主的一个实时显示折线图的优快云下载获取：https://download.youkuaiyun.com/download/skyrim835/10402319。    

echarts的特性：

1.丰富的图表类型

包括我们常用的折线图，柱状图，饼状图，散点图以及可以用于地理数据可视化的地图，热力图，线图等。

2.多个坐标系的支持

直角坐标系(catesian, 同grid)、极坐标(polar)、地理坐标系(geo）

3.深度的交互数据探索

支持在数据的各种坐标轴、维度进行数据过滤、缩放以及在更多的图中采用这些组件

    光了解这些是没法做出实时显示的，首先我们得掌握一定的ajax，这里我要说明的是jQuery的ajax，而非原生js的ajax，因为jQuery的ajax很是强大，提供了很多内容的封装。

以下是我的数据库课设中echarts图表中“data”的一段代码：

'data':(function(){
                            var data=[];
                                    var arr=[];                                   
                                        $.ajax({
                                        type : "post",
                                        async : false, //同步执行
                                        url : "read.php",
                                        data : {},
                                        dataType : "json", //返回数据形式为json
                                        success : function(json){
                        var obj=json;  
                        obj_length=obj.length;
                          for (i = 0; i <obj_length; i++) 
                           {              
                            data.push(
                            {
                            flow_id:obj[i][0],
                            protocol:obj[i][1],
                            packetcount:obj[i][2],
                            octetcount:obj[i][3],
                            flow_end:obj[i][4],
                            host_ip:obj[i][5]
                            }
                            ) ;
                           } 
for(var j=0;j<data.length;j++)
{
if(data[j].protocol=='TCP')
{
arr[j]=data[j].packetcount;
}
else{
arr[j]=0;
}
}
                        },
                                   })
                                   return arr;

                                })()   

可以看出我后台传来的是json形式的数组。这样我就可以直接从obj里面列与行找到我需要的数据。

再来说说DataTable

Datatable是一款jquery表格插件。它是一个高度灵活的工具，可以给任何HTML表格添加高级的交互功能。提供分页，即时搜索和排序等功能，另外官网还给出了一些实现个性化功能的demo，如行内编辑，行折叠特效等。

更多特性请到官网查看： http://datatables.club/example/ 

以下是我的DataTable代码：

$('#dataTable').DataTable({
                "processing": true,
                "searching": true,
                "bPaginate": true, //翻页功能
                "bLengthChange": true, //改变每页显示数据数量
                "bSort": false, //排序功能
                "bAutoWidth": false ,//自动宽度
                "ajax": {
                    "url": "datatable.php",
                    "async":"true" ,
                    "dataSrc" : '',
                },
                "columns": [
                    {"defaultContent": "null"},
                    {"data": "protocol"},
                    {"data": "packetcount"},
                    {"data": "octetcount"},
                    {"data": "flow_end"},
                    {"data": "host_ip"}
                ],
                "columnDefs": [//列定义
                    {
                        "targets": [0],
                        "render":function(data,type,full,meta){
                            return "<a onclick=updateCid(this)>"+full.flow_id+"</a>";
                        }
                    }
                ]
            });

            $.fn.dataTable.ext.errMode = 'none'; 

此时得注意不同了，DataTable插件读取的是一个对象，是将一个元组的数据读取到表里面，我后台传来的是json形式的对象。

详细的代码可以从我的下载获取https://download.youkuaiyun.com/download/skyrim835/10511410