首页 > 代码库 > NeralJS需求整理及思路
NeralJS需求整理及思路
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"] } ] }};
NeralJS需求整理及思路