NeralJS需求整理及思路

浏览数：116 / 时间：2015年06月09日

NeralJs希望通过解析json数据，动态创建和渲染报表，每个报表呈现一定时间范围的数据，通过使用表格图表等不同的方式，使数据的呈现不死板，且更容易看出规律。

说通俗点，就是动态在一个区域内生成多张图表。

经过深思熟虑（其实写之前什么都没想，想到一点写一点），有以下几个问题需要考虑：

1、由于数据是在报表呈现时从后台直接拉取的，那么在json中应该保存的就是这组数据的定义,如何定义？

　　如某淘宝商店销售天数据：[10,12,8,9,3,1,12]，这些数据都被保存在后台，并被命名为DayIncom，当然天数据每天都有，所以数据库中根据时间存了很多组，所以还需要确定时间区间。如时间是2014/12/5至2014/12/12日。

最后json中保存格式变成这样：

{
    title:‘淘宝销售天数据‘,//对应到图例
    uid: ‘DayIncome‘,
    dataRange: { start: ‘2014/11/8‘, end: ‘2014/-1/-1‘ },
}

通过ajax向后台发送请求，请求内容如上，后台解析数据返回需要的内容。

2、动态数据加载，如果数据组太多，如何减少请求？

　　如果一个报表页面每个需要加载10个左右的数据组，那么ajax服务就需要请求10次，不仅效率低下而且服务器会负载，所以需要建立一个ajax的管理模块，将需要请求的数据收集起来，一次发送，同时在接收完毕时触发自定义消息，通知视图管理模块更新图表内容。

3、ajax管理模块ajaxManager的功能确定

　　ajax管理模块需要接收多组如上1中所说的数据对象，并统一发送请求，并允许对象监听请求成功事件，将指定的数据告诉视图管理模块。整理一下这句需求得到下面的几个函数：

function AjaxManager(){
    void addRequest(info);//接收多组数据对象
    void DoRequest();//统一发送请求
    void OnReady(uid,function);//允许对象监听请求成功事件,并返回对应的数据      
}

4、视图管理模块ViewManager的确定

　　视图管理模块需要对所有的视图进行管理，考虑到之后可能会需要修改和移动视图的功能，暂定功能为增、删、改。同时，为了模块清晰，功能单一，只是生产一个空的div框，内部实现，如多标签等功能，交给Panel模块实现。模块需要增删，所以不能简单的使用内部index的方式定位到模块（原来有3个div，编号0,1,2。现在删除1号视图框，则2号的实际保存编号变成1），使用随机生成的GUid作为框体的id属性

{
    x: 20,
    y: 20,
    width: 800,
    height: 510
}

5、Panel模块的确定

　　Panel模块用于生成多标签的框体，同时控制内部内容的显示。何为内部内容显示，即需要解析json数据，向Ajax管理模块增加ajax请求，并读取返回的内容，渲染图表。

下图创建一个两个标签的panel：

{
    tab_count:2,
    tab_text:["标签1","标签2"]
}

6、综合

{
    components: [
        {//对应一个chart控件
            type: ‘line‘,
            series:[
                {
                    title:‘淘宝销售天数据‘,//对应到图例
                    uid: ‘DayIncome‘,
                    dataRange: { start: ‘2014/11/8‘, end: ‘2014/-1/-1‘ },
                }
            ],
            panel_index:"标签2"
        }
    ],

    panels: {
        canvas: {
            width: 1200,
            height: 600
        },
        data: [
            {
                x: 20,
                y: 20,
                width: 800,
                height: 510,
                tab_count:2,
                tab_text:["标签1","标签2"]
            },
            {
                x: 835,
                y: 20,
                width: 300,
                height: 250,
                tab_count:1,
                tab_text:["标签3"]
            },
            {
                x: 835,
                y: 280,
                width: 300,
                height: 250,
                tab_count:1,
                tab_text:["标签4"]
            }
        ]
    }
};