数据可视化的实现方法及装置制造方法及图纸

本发明专利技术提供一种数据可视化的实现方法及装置，其中，该方法包括：配置数据源、可视化样式，以及数据源和可视化样式之间的关联关系；当收到触发请求时，将数据源、可视化样式、关联关系的配置信息通过定制化接口导入可视化渲染框架；可视化渲染框架根据配置信息进行渲染，并输出至浏览器引擎。本发明专利技术的有益效果是：将可视化渲染框架和数据源、可视化样式及其关联关系独立封装，用户只需要对数据源、可视化样式及其关联关系进行配置，即可导入可视化渲染框架进行渲染，提高了研发效率和前端性能。

Method and device for realizing data visualization

The present invention provides a method and a device, to achieve a data visualization, the method comprises the following steps: configure the data source, visual styles, and between the data source and visual style relationship; when receiving a trigger request, the data source, visual style, the relationship of configuration information through customized interface into the visualization framework; visualization the rendering framework for rendering according to the configuration information, and output to the browser engine. The beneficial effect of the invention is: the visualization framework and data source, visual style and its related independent package, users only need to configure the data source, the visual style and association, you can import the visualization framework for rendering, improve the development efficiency and front-end performance.

【技术实现步骤摘要】

本专利技术涉及一种数据可视化的实现方法及装置，尤其涉及一种前端数据可视化的实现方法及装置。
技术介绍
随着技术的进步，大数据分析越发升温，除了海量数据计算和存储的难题，还有一个影响产品研发效率和用户体验的重要环节，即数据可视化。然而即使有EXT、GoogleLineChart等众多可供选择的前端报表技术，也只能被当做工具使用，没有形成一套可扩展的前端IOC开发框架，不能够有效降低研发成本。在前端报表技术中，常见的包括Ext、GoogleLineChart、HighChart等等。这些技术通常重渲染而轻框架，仅能作为工具使用。它们各自都规定了自身的数据结构，用户必须自己做AJAX查询，解析JSON，再将data适配为这些工具要求的结构……，这个过程中，工具能够帮助用户解决的仅仅是报表渲染环节，而数据可视化技术的环节还涉及到数据查询、数据解析、数据缓存、结构转换、数据交互、定时驱动、布局控制、弹出拖拽浮动、公用参数控制等等。如果放任这些环节由开发人员自行解决，往往会导致风格迥异的javascript充斥在各个产品代码中(我们不能保证每个前端开发人员都有很高的重构抽象能力)，一旦公用的逻辑没有沉淀重用，接下来的维护和扩展工作就会浪费大量的编码成本、学习成本、返工成本。
技术实现思路
本专利技术的目的在于提供一种数据可视化的实现方法及装置。为实现上述专利技术目的之一，本专利技术一实施方式提供了一种数据可视化的实现方法，所述方法包括：配置数据源、可视化样式，以及所述数据源和所述可视化样式之间的关联关系；当收到触发请求时，将所述数据源、可视化样式、关联关系的配置信息通过定制化接口导入可视化渲染框架；所述可视化渲染框架根据所述配置信息进行渲染，并输出至浏览器引擎。作为本专利技术一实施方式的进一步改进，所述数据源、可视化样式，以及所述可视化渲染框架分别独立封装。作为本专利技术一实施方式的进一步改进，所述定制化接口为IOC接口。作为本专利技术一实施方式的进一步改进，所述数据源和所述可视化样式为多对多的关联关系，每一个数据源对应至少一个可视化样式，每一个可视化样式对应至少一个数据源。作为本专利技术一实施方式的进一步改进，所述『所述可视化渲染框架根据所述配置信息进行渲染』具体包括：根据所述数据源中配置的服务查询地址及参数信息，获取相应的数据；根据所述关联关系将所述数据转换为可视化样式匹配的渲染模型；根据所述渲染模型，调用渲染工具进行渲染。作为本专利技术一实施方式的进一步改进，所述参数信息包括：查询数据的周期、粒度、数据ID的至少其中之一。作为本专利技术一实施方式的进一步改进，『根据所述渲染模型，调用渲染工具进行渲染』具体包括：根据所述可视化样式提供的结构转换逻辑，将所述渲染模型转换为对应的渲染工具所要求参数格式；根据所述参数格式，调用对应的渲染工具进行渲染。作为本专利技术一实施方式的进一步改进，『根据所述参数格式，调用对应的渲染工具进行渲染』具体包括：根据所述参数格式以及所述可视化样式提供的参数逻辑，调用相应的渲染工具进行渲染。作为本专利技术一实施方式的进一步改进，所述『根据所述关联关系将所述数据转换为可视化样式匹配的渲染模型』具体包括：根据所述关联关系将所述数据转换为可视化样式匹配的的数据结构；调取所述数据结构并根据与所述数据结构关联的可视化样式，将所述数据结构转换为可视化样式匹配的渲染模型。作为本专利技术一实施方式的进一步改进，所述数据源为插件形式，每个插件中包括数据的服务查询地址及参数信息；所述可视化样式为插件形式，每个插件中包括一种可视化样式。作为本专利技术一实施方式的进一步改进，所述方法还包括：将事件监听逻辑注册到浏览器引擎。作为本专利技术一实施方式的进一步改进，所述方法包括：配置获取页面坐标函数，以获取触发事件相应的页面元素的页面坐标；配置获取数据函数，以在获取触发事件相应的页面元素的页面坐标后，调取与所述页面坐标相应的数据；其中，每一报表类型只对应一个页面元素。为实现上述专利技术目的之一，本专利技术一实施方式提供了一种数据可视化的实现装置，所述数据可视化的实现装置包括：配置模块，用于配置数据源、可视化样式，以及所述数据源和所述可视化样式之间的关联关系；导入模块，用于当收到触发请求时，将所述数据源、可视化样式、关联关系的配置信息通过定制化接口导入可视化渲染框架；所述可视化渲染框架还用于根据所述配置信息进行渲染，并输出至浏览器引擎。作为本专利技术一实施方式的进一步改进，所述数据源、可视化样式，以及所述可视化渲染框架分别独立封装。作为本专利技术一实施方式的进一步改进，所述定制化接口为IOC接口。作为本专利技术一实施方式的进一步改进，所述数据源和所述可视化样式为多对多的关联关系，每一个数据源对应至少一个可视化样式，每一个可视化样式对应至少一个数据源。作为本专利技术一实施方式的进一步改进，所述可视化渲染框架具体用于：根据所述数据源中配置的服务查询地址及参数信息，获取相应的数据；根据所述关联关系将所述数据转换为可视化样式匹配的渲染模型；根据所述渲染模型，调用渲染工具进行渲染。作为本专利技术一实施方式的进一步改进，所述参数信息包括：查询数据的周期、粒度、数据ID的至少其中之一。作为本专利技术一实施方式的进一步改进，所述可视化渲染框架具体用于：根据所述可视化样式提供的结构转换逻辑，将所述渲染模型转换为对应的渲染工具所要求参数格式；根据所述参数格式，调用对应的渲染工具进行渲染。作为本专利技术一实施方式的进一步改进，所述可视化渲染框架具体用于：根据所述参数格式以及所述可视化样式提供的参数逻辑，调用相应的渲染工具进行渲染。作为本专利技术一实施方式的进一步改进，所述可视化渲染框架具体用于：根据所述关联关系将所述数据转换为可视化样式匹配的的数据结构；调取所述数据结构并根据与所述数据结构关联的可视化样式，将所述数据结构转换为可视化样式匹配的渲染模型。作为本专利技术一实施方式的进一步改进，所述数据源为插件形式，每个插件中包括数据的服务查询地址及参数信息；所述可视化样式为插件形式，每个插件中包括一种可视化样式。作为本专利技术一实施方式的进一步改进，所述可视化渲染框架还用于将事件监听逻辑注册到浏览器引擎。作为本专利技术一实施方式的进一步改进，所述配置模块还用于：配置获取页面坐标函数，以获取触发事件相应的页面元素的页面坐标；<本文档来自技高网...

【技术保护点】
一种数据可视化的实现方法，其特征在于，所述方法包括：配置数据源、可视化样式，以及所述数据源和所述可视化样式之间的关联关系；当收到触发请求时，将所述数据源、可视化样式、关联关系的配置信息通过定制化接口导入可视化渲染框架；所述可视化渲染框架根据所述配置信息进行渲染，并输出至浏览器引擎。

【技术特征摘要】
1.一种数据可视化的实现方法，其特征在于，所述方法包括：
配置数据源、可视化样式，以及所述数据源和所述可视化样式之间的关联关
系；
当收到触发请求时，将所述数据源、可视化样式、关联关系的配置信息通过
定制化接口导入可视化渲染框架；
所述可视化渲染框架根据所述配置信息进行渲染，并输出至浏览器引擎。
2.根据权利要求1所述的数据可视化的实现方法，其特征在于，所述数据
源、可视化样式，以及所述可视化渲染框架分别独立封装。
3.根据权利要求1所述的数据可视化的实现方法，其特征在于，所述定制
化接口为IOC接口。
4.根据权利要求1所述的数据可视化的实现方法，其特征在于，所述数据
源和所述可视化样式为多对多的关联关系，每一个数据源对应至少一个可视化
样式，每一个可视化样式对应至少一个数据源。
5.根据权利要求1所述的数据可视化的实现方法，其特征在于，所述『所
述可视化渲染框架根据所述配置信息进行渲染』具体包括：
根据所述数据源中配置的服务查询地址及参数信息，获取相应的数据；
根据所述关联关系将所述数据转换为可视化样式匹配的渲染模型；
根据所述渲染模型，调用渲染工具进行渲染。
6.根据权利要求5所述的数据可视化的实现方法，其特征在于，所述参数
信息包括：
查询数据的周期、粒度、数据ID的至少其中之一。
7.根据权利要求5所述的数据可视化的实现方法，其特征在于，『根据所
述渲染模型，调用渲染工具进行渲染』具体包括：
根据所述可视化样式提供的结构转换逻辑，将所述渲染模型转换为对应的渲
染工具所要求参数格式；
根据所述参数格式，调用对应的渲染工具进行渲染。
8.根据权利要求7所述的数据可视化的实现方法，其特征在于，『根据所
述参数格式，调用对应的渲染工具进行渲染』具体包括：
根据所述参数格式以及所述可视化样式提供的参数逻辑，调用相应的渲染工
具进行渲染。
9.根据权利要求5所述的数据可视化的实现方法，其特征在于，所述『根
据所述关联关系将所述数据转换为可视化样式匹配的渲染模型』具体包括：
根据所述关联关系将所述数据转换为可视化样式匹配的的数据结构；
调取所述数据结构并根据与所述数据结构关联的可视化样式，将所述数据结
构转换为可视化样式匹配的渲染模型。
10.根据权利要求5所述的数据可视化的实现方法，其特征在于，
所述数据源为插件形式，每个插件中包括数据的服务查询地址及参数信息；
所述可视化样式为插件形式，每个插件中包括一种可视化样式。
11.根据权利要求1所述的数据可视化的实现方法，其特征在于，所述方
法还包括：
将事件监听逻辑注册到浏览器引擎。
12.根据权利要求1所述的数据可视化的实现方法，其特征在于，所述方
法包括：
配置获取页面坐标函数，以获取触发事件相应的页面元素的页面坐标；
配置获取数据函数，以在获取触发事件相应的页面元素的页面坐标后，调取
与所述页面坐标相应的数据；
其中，每一报表类型只对应一个页面元素。

【专利技术属性】
技术研发人员：储晓颖，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：开曼群岛;KY