本发明涉及数据可视化
技术领域：
：，尤其是涉及一种在修改或者增删配置数据时，只需要修改公共的视图模板和绘制方法的基于配置的数据可视化实现方法。
背景技术：
：：数据可视化：是将数据库中每一个数据项作为单个图元元素表示，大量的数据集构成数据图像，同时将数据的各个属性值以多维数据的形式表示，可以从不同的维度观察数据。服务端：是为客户端服务的，服务的内容诸如向客户端提供资源数据，保存客户端数据。客户端：较常用的包括了如万维网使用的网页浏览器，收寄电子邮件时的电子邮件客户端，以及即时通讯的客户端软件等。本文网络连接模式为b/s模式(浏览器端/服务器端)，所以客户端特指网页浏览器端，即人机界面。json：json(javascriptobjectnotation)是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。dom：文档对象模型(documentobjectmodel，简称dom)，是w3c组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为dom。数据驱动：是dom元素让dom的内容随着数据的改变而改变视图。一般的数据可视化实现过程，是每个图表都要写对应的数据结构、绘制方法和网页的绘制区视图，如果后续需求改动，则需要去修改每个图表涉及的所有内容，存在视图界面和图表绘制不能复用、修改困难的缺点。技术实现要素：本发明的发明目的是为了克服现有技术中的视图界面和图表绘制不能复用、修改困难的不足，提供了一种在修改或者增删配置数据时，只需要修改公共的视图模板和绘制方法的基于配置的数据可视化实现方法。为了实现上述目的，本发明采用以下技术方案：一种基于配置的数据可视化实现方法，包括如下步骤：步骤1：服务端和客户端协商制定外层的数据结构(总模板框架配置项数据)和内层的数据结构(具体图表配置项数据)，约定数据字段的含义和解析规则；步骤2：客户端搭建视图模板文件，封装可视化图表模板绘制方法：(1)将界面视图分为若干个模块视图，每个模块视图绑定一个字段数据；(2)将图表绘制按类型进行归类，用特定字段区分图表类型，对图表数据字段进行解析处理，将解析处理得到的数据绑定到图表配置项，实现图表的绘制；步骤3：服务端依据制定的外层的数据结构(总模板框架配置项数据)和内层的数据结构(具体图表配置项数据)，配置数据库字段，读取数据库数据给客户端；步骤4：客户端请求到服务端发送的数据后，解析数据结构，根据数据内容将数据绑定到视图模板文件；如果绑定视图模板的数据字段的值为空，则客户端浏览器最终的视图界面不会渲染该视图模板；如果绑定视图模板的数据字段的存在值，则客户端浏览器最终的视图界面会按照配置数据渲染该视图模板。本发明是基于服务端配置的数据可视化实现方法，通过制定一套尽可能全面的数据结构(json格式)，约定字段的具体含义和解析规则，对数据进行处理，绑定到视图模板文件，可实现视图界面的改变。比如：视图中是否出现一段统计数据信息，约定字段”topdata”来决定，如果值为”null”，则不渲染该处统计信息；如果值有内容，则视图显示配置值。比如：视图中图表区的宽度，约定字段”outerwidth”来决定，如果值为”null”，则图表宽度渲染为默认值；如果值有内容，则图表宽度渲染为配置值。比如：视图中可视化图表类型，约定字段”code”来决定，如果值为”line”，则图表渲染为折线图；如果值为”bar”，则图表渲染为柱状图；如果值为”line_*”或者”bar_*”，则图表渲染为多折线图或者多柱状图或者折线柱状混合图。本发明是基于配置数据来改变最终的视图呈现。如果修改或者增删配置数据，只需要修改公共的视图模板和绘制方法，对应的视图都会根据数据进行改变。本发明解决了视图界面和图表绘制不能复用、修改困难的问题。作为优选，制定外层的数据结构(总模板框架配置项数据)，约定字段的具体含义和解析规则如下：约定字段”chartenergy”为数据数组的外层，数据数组的内层为具体配置数据对象；约定字段”topdata”为统计数据信息，约定字段”data”为图表配置数据；约定字段”ringdata”为占比数据信息，约定字段”outerwidth”为图表宽度；约定字段”alarmdescription”为报警信息，约定字段”type”为外层模板区分类型；约定字段”title”为外层模板标题，约定字段”yearratio”为同比信息；约定字段”ringratio”为环比信息，约定字段”location”为位置信息；约定字段”timetable”为时间表格信息。作为优选，制定内层的图表配置数据结构，约定字段的具体含义和解析规则如下：约定字段”data”为数据对象的外层，内层为具体配置数据字段；约定字段”chartlist”为图表数据外层，约定字段”value2dlist”为图表数据项值；约定字段”xdata”为数据项的x轴值，约定字段”ydata”为数据项的y轴值；约定字段”xtag”为数据项特殊标识，约定字段”dataname”为图表图例值；约定字段”datatype”为图表，图表包括轴值x1x2和轴值y1y2；约定字段”x1unit”为图表，x1为轴单位；约定字段”y1unit”为图表，y1为轴单位；约定字段”x2unit”为图表，x2为轴单位；约定字段”y2unit”为图表，y2为轴单位；约定字段”warnvalue”为图表预警值；约定字段”preindex”为图表数据轴顺序；约定字段”charttype”为图表类信息特殊字段；约定字段”code”为图表类型；约定字段”charttitle”为图表标题。因此，本发明具有如下有益效果：如果修改或者增删配置数据，只需要修改公共的视图模板和绘制方法，对应的视图都会根据数据进行改变，解决了视图界面和图表绘制不能复用、修改困难的问题。附图说明图1为本发明的一种流程图；图2为本发明的一种外层配置数据结构(总模板框架配置项数据)示意图；图3为本发明的一种内层图表数据结构(具体图表配置项数据)示意图；图4为本发明的一种每天的人均能耗图。具体实施方式下面结合附图和具体实施方式对本发明做进一步的描述。如图1所示的实施例是一种基于配置的数据可视化实现方法，包括如下步骤：步骤1：服务端和客户端协商制定一套尽可能全面的数据结构(json格式)，约定数据字段的含义和解析规则。具体规则解释如下：如图2为外层的配置数据结构(总模板框架配置项数据)示意图。制定的配置数据结构(json格式)，约定字段的具体含义和解析规则。例如，主数据库表配置：能耗框架表：energy_wraper能耗图表：energy_chart例如：约定字段”chartenergy”为整个数据数组的外层，内层为具体配置数据对象；约定字段”topdata”为统计数据信息；约定字段”data”为图表配置数据(具体见图3)；约定字段”ringdata”为占比数据信息；约定字段”outerwidth”为图表宽度；约定字段”alarmdescription”为报警信息；约定字段”type”为外层模板区分类型；约定字段”title”为外层模板标题；约定字段”yearratio”为同比信息；约定字段”ringratio”为环比信息；约定字段”location”为位置信息；约定字段”timetable”为时间表格信息。例如：客户端界面中部分视图区域，不显示”topdata”字段信息，则服务端在数据表配置中将”topdata”字段删除或者在json数据中将”topdata”字段设置为”null”；客户端界面中部分视图区域，增加显示”newinfo”字段信息，则服务端在数据表配置中增加”newinfo”字段，服务端读取数据库提供给客户端，客户端接收的json数据中包含新增字段”newinfo”，则渲染模板显示”newinfo”信息。如图3为内层的图表数据结构(具体图表配置项数据)示意图。制定的图表配置数据结构(json格式)，约定字段的具体含义和解析规则。例如：约定字段”data”为整个数据对象的外层，内层为具体配置数据字段；约定字段”chartlist”为图表数据外层；约定字段”value2dlist”为图表数据项值；约定字段”xdata”为数据项x轴值；约定字段”ydata”为数据项y轴值；约定字段”xtag”为数据项特殊标识；约定字段”dataname”为图表图例值；约定字段”datatype”为图表包含轴值，如x1y1，x1y2；约定字段”x1unit”为图表x1轴单位；约定字段”y1unit”为图表y1轴单位；约定字段”warnvalue”为图表预警值；约定字段”preindex”为图表数据轴顺序；约定字段”charttype”为图表类信息特殊字段；约定字段”code”为图表类型；约定字段”charttitle”为图表标题。步骤2：客户端搭建视图模板文件，封装可视化图表模板绘制方法。(1)将界面视图分为多个模块视图，每个模块视图对应绑定一个字段数据。例如：将整个界面视图分为非图表区(如图2，对应字段”topdata””ringdata”“type”等)和图表区(如图2，对应字段”data”)。如果该字段数据值为空，则该处视图最终不渲染或者渲染为默认值；如果该字段数据值存在，则该处视图最终渲染为配置值。比如：视图中是否出现一段统计数据信息，约定字段”topdata”来决定，如果值为”null”，则不渲染该处统计信息；如果值有内容，则视图显示配置值。(2)将图表绘制按类型进行归类：折线图、柱状图、多折线柱状混合图、仪表盘、饼图、桑基图、散点图、雷达图等，用特定字段(例如字段”code”)”进行区分图表类型。比如：折线图的绘制，”code”字段值为”line”时，调用折线图的绘制方法。比如：柱状图的绘制，”code”字段值为”bar”时，也调用折线图的绘制方法，特殊的配置项通过”code”进行区分。比如：饼图的绘制，”code”字段值为”pie”时，调用饼图的绘制方法。比如：环型图的绘制，”code”字段值为”pie-ring”时，也调用饼图的绘制方法，特殊的配置项通过”code”进行区分。最后对图表数据字段(如图3为内层的图表数据示意图)进行解析处理，将数据绑定到图表配置项，实现图表的绘制。步骤3：服务端依据制定的数据结构，配置数据库字段，读取数据库数据给客户端。步骤4：客户端请求到服务端数据后，解析数据结构，根据数据内容把数据绑定到对应的视图模板文件(参考步骤2)。如果绑定视图模板的数据字段的存在值，则客户端浏览器最终的视图界面会按照配置数据渲染渲染该视图模板。应理解，本实施例仅用于说明本发明而不用于限制本发明的范围。此外应理解，在阅读了本发明讲授的内容之后，本领域技术人员可以对本发明作各种改动或修改，这些等价形式同样落于本申请所附权利要求书所限定的范围。当前第1页12当前第1页12