【技术实现步骤摘要】
一种交互式视图生成方法和装置
本专利技术涉及计算机
,尤其涉及一种交互式视图生成方法和装置。
技术介绍
多维数据的可视化是数据分析系统中最常用的场景之一。一个系统视图会有多个图表或文字,在多维数据分析的聚合和汇总过程中,多个图表需要实现数据的下钻、上钻等级联操作。然而图表的布局形式多样,要实现不同布局下多维视图的交互展示,需要工作人员手工编写视图页面代码。现有技术中的视图生成包括栅格布局和前端组件化架构。栅格布局提供了一种标准尺寸的设计,通过用等长等宽的线将视图划分为若干个小栅格来规范视图中的元素。而在前端组件化架构中,视图由若干可重用的组件组成,一个组件包括显示在网页上的视图模板和对应的数据。组件可以嵌套,当一个组件被加载时,视图生成装置会编译该组件及其子组件:将数据填入模板的对应位置并生成HTML(HyperTextMarkupLanguage,超文本标记语言)片段,监听对该片段的操作(例如,点击按钮或标签,编辑文本等操作),最终插入视图。组件提供“属性注入”和“事件传播”两种方式在嵌套时和其他组件 ...
【技术保护点】
1.一种交互式视图生成方法,其特征在于,包括:/n基于栅格布局通过视图布局视图中的预定义组件生成布局树;/n设置视图中预定义组件的数据接口定义和数据流信息生成数据流图;/n基于所述布局树和所述数据流图创建组件树;以及/n通过组件化方式动态地加载组件树,并通过与数据的交互而生成交互式视图。/n
【技术特征摘要】
1.一种交互式视图生成方法,其特征在于,包括:
基于栅格布局通过视图布局视图中的预定义组件生成布局树;
设置视图中预定义组件的数据接口定义和数据流信息生成数据流图;
基于所述布局树和所述数据流图创建组件树;以及
通过组件化方式动态地加载组件树,并通过与数据的交互而生成交互式视图。
2.根据权利要求1所述的方法,其特征在于,所述视图布局包括:
记录每个预定义组件的类型、位置、长度和宽度,形成若干叶子布局节点;以及
通过布局树生成算法进行布局解析,按行和列来交替分隔整个栅格,同时生成内部布局节点。
3.根据权利要求2所述的方法,其特征在于,
内部布局节点和叶子布局节点都包含类型、位置和长宽信息;以及
每个预定义组件都对应一个叶子布局节点。
4.根据权利要求1所述的方法,其特征在于,所述布局树生成算法包括:布局树行分隔算法和布局树列分隔算法,所述布局树行分隔算法和布局树列分隔算法交替执行,用于获取内部布局节点和叶子布局节点的类型、位置和长宽信息。
5.根据权利要求1所述的方法,其特征在于,设置视图中预定义组件的数据接口定义包括:定义预定义组件的数据接口的输入和输出,并解析该输入和输出形成数据流。
6.根据权利要求5所述的方法,其特征在于,基于所述预定义组件和其数据流构成数据流图,在该数据流图中,预定义组件和其输入、输出数据是互相交错的。
7.根据权利要求1所述的方法,其特征在于,基于所述布局树和所述数据流图创建组件树包括:
基于所述数据流图通过组件上浮算法生成上浮后的组件树,以及
基于所述布局树和生成的上浮后的组件树生成组件树。
8.根据权利要求7所述的方法,其特征在于,所述上浮算法包括:
将数据流图中的预定义组件改为叶子节点,
提取出可合并的数据,以及
新建自定义组件使得生成一个上浮后的组件树,
其中,所述自定义组件中包含了会被传播至该组件的输入和输出的数据。
9.根据权利要求7所述的方法,其特征在于,所述下沉算法包括:
将上浮后的组件树和布局树进行比对,以及
如果布局树中的组件和上浮后的组件树中的划分方式不一样,则合并该组件和其父组件。
10.一种交互式视图生成装置,其特征在于,包括:
视图布局模块,其基于栅格布局通过视图布局视图中的预定义组件生成布局树;
数据流设置模块,其设置视图中预定义组件的数据接口定义和数据流信息生成数据流图;
组件树生成模块,其基于所述布局树和所述数据流图创建组件...
【专利技术属性】
技术研发人员:谭格帆,
申请(专利权)人:北京京东尚科信息技术有限公司,北京京东世纪贸易有限公司,
类型:发明
国别省市:北京;11
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。