论文部分内容阅读
摘要：大数据可视化是使用形象直观的图表组件显示数据分析的统计结果，一般是以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：′邮件营销′）]。
数据准备完成后，可以替换掉网页模板中的占位符。可视化组件echarts的效果渲染是在网页加载阶段发生的，白启动的javascript代码段包括了显示数据的变量定义赋值、要渲染显示的echarts组件从数据源属性到各种可视化属性的定义、DOM节点挂载echarts组件完成显示。其中变量赋值内容以占位符的形式预没，直到以实际数据替换掉占位符，构建语法合法的变量赋值语句。例如：dataArr=（{tpbc_res】）;“（（tpbc_res））”就是占位符标签。服务端以诸如fs.readFile（”./view/index.html”，function （err， data）的指令读取模板网页内容，再以实际数据替换掉占位符，如htmlData=htmlData.replace（/{{tpbc_res））/’data-Arr）。最后输出流向浏览器客户端推送网页内容数据变量re-sponse. writeHead（200， （’Content-Type’： ’text/html; charset=utf8 ′））;response.write（htmlData），客户端完成加载渲染。
在服务端推送数据替换后页面文件到客户端时，要注意页面文件中的处理，它会在客户端接收加载页面时，再次向服务端申请读取echarts.min.j文件的内容，如果不加特定处理，会将发生数据替换后模板页面文件的内容再次推送给客户端，生成错误的echarts.min.js，所以应该如下处理，if’（pathname== ’/javascripts/jquery.min.js’II pathname==’/javascripts/echarts.min.js’）{ fs.readFile（pathname.substr（l）， function （err， data）（ re-sponse.write（data.toString（》;}）。当服务端发现客户端的访问路径是所需js插件，则在javascnpts目录下读取对应is文件回送。
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
关键词：大数据可视化.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：′邮件营销′）]。
数据准备完成后，可以替换掉网页模板中的占位符。可视化组件echarts的效果渲染是在网页加载阶段发生的，白启动的javascript代码段包括了显示数据的变量定义赋值、要渲染显示的echarts组件从数据源属性到各种可视化属性的定义、DOM节点挂载echarts组件完成显示。其中变量赋值内容以占位符的形式预没，直到以实际数据替换掉占位符，构建语法合法的变量赋值语句。例如：dataArr=（{tpbc_res】）;“（（tpbc_res））”就是占位符标签。服务端以诸如fs.readFile（”./view/index.html”，function （err， data）的指令读取模板网页内容，再以实际数据替换掉占位符，如htmlData=htmlData.replace（/{{tpbc_res））/’data-Arr）。最后输出流向浏览器客户端推送网页内容数据变量re-sponse. writeHead（200， （’Content-Type’： ’text/html; charset=utf8 ′））;response.write（htmlData），客户端完成加载渲染。
在服务端推送数据替换后页面文件到客户端时，要注意页面文件中的处理，它会在客户端接收加载页面时，再次向服务端申请读取echarts.min.j文件的内容，如果不加特定处理，会将发生数据替换后模板页面文件的内容再次推送给客户端，生成错误的echarts.min.js，所以应该如下处理，if’（pathname== ’/javascripts/jquery.min.js’II pathname==’/javascripts/echarts.min.js’）{ fs.readFile（pathname.substr（l）， function （err， data）（ re-sponse.write（data.toString（》;}）。当服务端发现客户端的访问路径是所需js插件，则在javascnpts目录下读取对应is文件回送。
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