大数据可视化数据加载模式比较分析

宋文文 孙力群

摘要：大数据可视化是使用形象直观的图表组件显示数据分析的统计结果，一般是以web技术构建可视化应用系统，实现可视化数据提取、整理、加载到显示渲染的整体过程。该文总结分析了三种大数据可视化数据的供给模式。比较了在原生处理、框架技术和aj ax優化框架下的组件结构和处理流程。表现了三种模式之间了继承且持续优化的关系特征。

关键词：大数据可视化.flask.echarts;node.js;网页渲染;ORM

中图分类号：TP311 文献标识码：A

文章编号：1009-3044（2019）36-0011-02

1大数据可视化实现模式

大数据可视化本文指使用echarts图表组件以曲线图，柱状图等形式显示大数据分析结果。echarts以json格式定义结构，其中的数据属性一般是javaScipt数组方式提供。例如，data：[周一，周二，′周三′，′周四′，′周五′，′周六′，′周日′]，而echarts组件的完整显示效果是由json定义的属性树实现的，显示过程处理模式通常为，根据客户端查询需求，服务端生成可视化网页;网页推送到客户端;客户端加载网页时，自动启动echarts控件的生成显示代码，完成echarts图表的创建。这一过程可以利用b/s架构下http访问协议的内在特点，采用不同的设计策略，最终都是保证客户端生成显示echarts前，所需数据已经加载到初始化环境中。本文将分析三种设计策略，比较不同数据加载方式的特点。第一种采用原生模式，即在服务端完整生成客户端页面。重点是网页模板文件的替换操作。第二种是采用flask框架，网页模板文件使用渲染方式完成数据填充。第三种是更加轻便的基于ajax的二次数据加载模式。

2基于原生模式的数据加载分析

这里以node.js技术为例，程序执行流程如图l所示。按功能角色可分为服务器控制器、数据库访问、数据变换和网页模板加载。当客户端通过http协议发起访问，服务端流程控制器根据访问路径，定向到不同处理流程。正常情况下，会继续发起数据库访问，加载可视化的源数据集。

加载后的数据集根据可视化数据结构要求，进行必要的形式变换，数据变换是根据需要典型分两种，一种是将数据记录集进行转置，将记录集中的列转为行，例如，绘制散点图时，一行作为x，另一行作为v轴上的数据集。另一种是将两列进行合并操作，每行形成一个2个元素的元组，如用于饼图的数据格式[ {value：335， name：'直接访问′），{value：3 10，name：′邮件营销′）]。

3框架模式下的数据加载分析

图2为框架模式的可视化数据加载。

框架模式以node.js express和falsk为典型，将上述原生模式下的处理流程进一步封装成开源框架的模式。以falsk框架为例，和原生模式相比，以程序控制结构实现的服务端控制器优化成以访问路径声明实现直接路由的模式。网页模板手动加载、数据替换占位符和客户端输出进化成网页模板一次性渲染方式。数据访问也以数据映射对象的形式实现。

数据映射对象flask_sqlalchemy是Flask Web框架的扩展，使Web服务器以ORM（ Object Relational Mapping）对象关系映射的方式与数据库交互，如一个user数据库表可以通过字段与属性的绑定实现到模型的映射。

class User（db.Model）：

___tablename____=”user”

id= db.Column（db.lnteger， primary_key=True）

userName= db.Column（db.String（32》

利用数据模型对象获取数据库数据，sqlalchemy支持以对象模型集合的方式进行查询，不用编写sql语句，如User.query.filter（User. score l>60，User. score2>60，User. score3 >60）. all（）。也支持分组、排序等查询，如User.query.group_by（User.age）。all0。获取的实际数据更新模板文件的占位符，推送到客户端，例如：

@main.route（′/index/′）

def display（）：

userS =Lrser.query.order_by（desc（′userName′》.all（）

return render_template（′/main/index.html′，users=users）

开源框架下的网页模板渲染比原生模式更新下轻松很多，细节处理都被隐藏起来，不用再考虑js库二次加载的问题。模板其实是一个包含响应文本的文件，其中用占位符（变量）表示动态部分，告诉模板引擎其具体的值需要从使用的数据中获取。使用真实值替换变量，再返回最终得到的字符串，这个过程称为“渲染”，Flask是使用Jinja2这个模板引擎来渲染模板。在模板文件中，嵌入以循环结构生成Js数据源变量的代码。形如：

Var xData=[（%for user in users%）（{user.name}}（%end-for%）]。这样render_template（′/main/index. html′， users=users）就可以用实际数据替换。

4使于ajax技术改进框架

前面两种模式需要服务端读取扫描模板文件，用实际数据替换占位符标签，传送到客户端是最终目标网页，直接在浏览器中以纯静态的方式渲染生成echarts，当服务端访问频繁或访问并发数大时，服务端计算资源消耗比较大，用户响应可能延时较长。而利用ajax（ Asynchronous JavaScript and XML）异步传输技术只需在服务端和客户端之间传送必需的分析业务数据，节约了服务端模板更替的耗时操作。aj ax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用ajax）如果需要更新内容，必需重载整个网页面。通过图3可以看出，由于异步分两阶段访问，服务端路由器的生命线是不连贯的，即两次独立的服务端计算。

第一次是从客户端发起访问，服务端直接将包含aj ax代码的页面文件回送，无须任何扫描。第二次是客户端加载这个页面文件时，发起ajax异步访问，这个访问过程中，实现从数据加载到echarts渲染的完整过程。aj ax访问时，首先服务端获取的数据以json格式回传，这样客户端以字典读取的方法提取需要的数据，如$.ajax（ ′findAll′，function（res）（ data= res[′value′]; for（var k in data）（ xAxios.push（data[k]['week']）;yAxios.

push（data[k][，value′l）;）），xAxios和yAxios就作为下一步echarts控件option选项的数据源属性值，最后执行myChart.setOption（option）完成渲染过程。如果给用户提供交互按钮，允许用户以手动方式发起从客户端到服务端的访问，则使用按钮点击事件绑定get或post的处理方式，写法与aj ax处理接收到的数据流程类似。如：$（7#btn 7）.click（func：tion（）{$.get（ ′findAll′，function（res）{}》。

5结束语

大数据可视化数据加载三种模式的共同优点是实现了可视化渲染和可视化数据源获取的代码分离。通过数据占位符标签的应用，基于文件物理内容的硬替换，却达到了极佳的服务端和客户端两个计算环境的软解耦设计质量。进一步使用flask等开源框架又封装隐藏了上述物理操作，并融入ORM和路由声明等设计思想，使层次边界更加清晰轻便。aj ax技术改进了模板文件扫描替换等重度的服务端操作，甚至可以将数据集转换变形等计算移至客户端，实现更好的任务负载设计。

参考文献：

[1]李辉.Flask Web开发实战：入门、进阶与原理解析[M].北京：机械工业出版社，2018.

[2]姜枫，许桂秋.大数据可视化技术[M].北京：人民邮电出版社.2019.

[3]朴灵，深入浅出 Node.js[M].北京：人民邮电出版社，2019.

[4]董西成.深入浅出Node.js[M].北京：机械工业出版社，2018.

[5]刘长龙.Python高效开发实战：Django、'rornado、Flask、Twist-ed[M].北京：电子工业出版社，2016.

[6]孫力群.Android即时拍照与上传应用的设计与实现[J].电脑知识与技术，2015（21）：64-65.

[7]孙敏，王琳.大数据时代下的数据可视化方法分析[J].软件，2019（9）：182-184，191.

【通联编辑：谢媛媛】

收稿日期：2019-10-29

作者简介：宋文文（199 8-），女，江苏镇江人，学生，研究方向为大数据技术与应用;孙力群（1972-），男，江苏苏州人，讲师，硕士研究

生，研究方向为软件工程、大数据分析与开发。