一种数据展示方法与流程

本发明涉及大数据领域，特别涉及一种数据展示方法。

背景技术：

数据多维度多形态展示是现在所有公司必不可缺的，尤其广泛应用于大数据分析的部门，3d空间展示更是前端领域必不可少的一项技能。但是，在实际应用中，用户的应用场景不尽相同，数据量越大，需要的浏览器性能就越高，当调研到一些开源技术时(如echarts、highcharts等前端图表绘制插件)有以下问题：支持的是3d柱状图；xyz三轴都是随着旋转角度不同，坐标轴的显示方式是变化的；3d数据分析图经过多次渲染，占用内存不断增大最后造成内存溢出，如浏览器卡死现象，不能满足需要来回切换渲染的业务需求。

为此，需要一种数据展示方法来解决上述大数据分析中存在的问题。

技术实现要素：

为此，本发明提供一种新的数据展示方法，以力图解决或者至少缓解上面存在的问题。

根据本发明的一个方面，提供了一种数据展示方法，适用于在计算设备中执行，该方法包括步骤:确定在三维坐标系统中，与数据的第一属性相对应的x轴，与数据的第二属性相对应的y轴和与数据的第三属性相对应的z轴；在计算设备的屏幕上的预定位置确定原点，并基于从原点延伸的x轴，y轴和z轴，构造三维坐标系统；将数据的第一属性，第二属性和第三属性值转化为相应坐标轴上的刻度值；根据数据的刻度值，确定数据在三维坐标系统中的立方体的位置，并根据数据的第四属性确定立方体的颜色和透明度；以及以所确定的位置、颜色和透明度在三维坐标系统中绘制立方体。

可选地，在根据本发明的数据展示方法中，三维坐标可围绕原点旋转和/或缩放，在旋转和/或缩放时原点保持位置不变。

可选地，在根据本发明的数据展示方法中，将数据的第一属性，第二属性和第三属性值转化为相应坐标轴上的刻度值，包括：获取数据的第一属性、第二属性和第三属性值；将数据的第一属性、第二属性和第三属性值中，连续取值的属性值分段，得到数个属性值区间；将分段得到的数个属性值区间作为分立的刻度值。

可选地，在根据本发明的数据展示方法中，立方体均绘制有6个面，任意方向接邻的两个立方体，重合的面透明度低于其他面。

可选地，在根据本发明的数据展示方法中，立方体绘制的步骤，包括：绘制立方体容器；在立方体容器中绘制立方体的6个面；以及设置立方体的颜色和透明度。

可选地，在根据本发明的数据展示方法中，x轴，y轴和z轴轴线绘制有方向箭头、轴线名称、刻度线和对应的刻度值；轴线名称为所在轴线对应属性，刻度值为对应属性的取值。

可选地，在根据本发明的数据展示方法中，三维坐标系统还包括正对面xy，底面xz和侧面yz，正对面xy，底面xz和侧面yz中包括x轴，y轴和z轴轴线。

可选地，在根据本发明的数据展示方法中，正对面xy，底面xz和侧面yz中还包括平行于x轴，y轴和z轴轴线的网格线，网格线确定的每个网格限定了等大的平面单元，平面单元的每个边长均为轴线的一个单位长度。

可选地，在根据本发明的数据展示方法中，底面xz由正对面xy绕x轴旋转-90°得到；侧面yz由正对面zy绕y轴旋转-90°得到。

根据本发明的又一方面，提供一种计算设备，包括：一个或多个处理器；存储器；以及一个或多个程序，其中一个或多个程序存储在存储器中并被配置为由一个或多个处理器执行，该一个或多个程序被处理器执行时实现如上所述的数据展示方法的步骤。

根据本发明的又一方面，提供一种存储一个或多个程序的可读存储介质，该一个或多个程序包括指令，所述指令当由计算设备执行时实现如上所述的数据展示方法的步骤。

根据本发明的技术方案，建立有三维坐标系统包括固定原点，由原点向外发散的x轴，y轴和z轴，相互垂直的正对面xy，底面xz和侧面yz，不同颜色和透明度，相同单位长度的立方体，不同立方体的在三维坐标系统中对应的x轴，y轴和z轴上的刻度，不同颜色和透明度分别代表了不同数据的第一属性、第二属性、第三属性和第四属性。每个数据的不同属性取值可以由坐标轴刻度数值表示，分立的坐标轴刻度表示连续的数据属性取值，相同大小的立方体可以让数据的属性值以直观方式显示，数据的属性值大小直接体现在三维坐标系统上立方体的不同位置，数据的属性值相对大小对应于不同立方体相对位置关系。小立方体的颜色和透明度为三维坐标系统增加了第四个维度，增加表示了数据的第四属性，不同颜色和通明度区分数据第四属性的不同取值。整个三维坐标系统将数据的属性值直观地显示在三维坐标系中，清楚明白的量化显示数据的大小和不同数据不同属性值的比较关系。并且，三维坐标系统可以在旋转和缩放时，保持原点不动，坐标轴旋转时保持相对位置关系，符合正常思维表达模式，使得数据表现形式更加灵活，但同时不必由于坐标轴表示特定属性的频繁改变，导致数据显示混乱，影响对数据的分析。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

为了实现上述以及相关目的，本文结合下面的描述和附图来描述某些说明性方面，这些方面指示了可以实践本文所公开的原理的各种方式，并且所有方面及其等效方面旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述，本公开的上述以及其它目的、特征和优势将变得更加明显。遍及本公开，相同的附图标记通常指代相同的部件或元素。

图1示出了根据本发明一个实施例的计算设备100的结构框图；

图2示出了根据本发明的一个实施例的一种数据展示方法200的流程图；

图3示出了根据本发明一个实施例的构建三维坐标系统方法220的流程图；

图4示出了根据本发明一个实施例的数据展示最终的一个示例；

图5a、图5b示出了根据本发明一个实施例的数据展示放大和缩小的示意图；以及

图6a、图6b示出了根据本发明一个实施例的数据展示旋转的示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

图1示出了根据本发明一个示例性实施例的计算设备100的结构框图。根据本发明的数据展示方法200可以在计算设备100中执行。在基本的配置102中，计算设备100典型地包括系统存储器106和一个或者多个处理器104。存储器总线108可以用于在处理器104和系统存储器106之间的通信。

取决于期望的配置，处理器104可以是任何类型的处理，包括但不限于：微处理器((μp)、微控制器(μc)、数字信息处理器(dsp)或者它们的任何组合。处理器104可以包括诸如一级高速缓存110和二级高速缓存112之类的一个或者多个级别的高速缓存、处理器核心114和寄存器116。示例的处理器核心114可以包括运算逻辑单元(alu)、浮点数单元(fpu)、数字信号处理核心(dsp核心)或者它们的任何组合。示例的存储器控制器118可以与处理器104一起使用，或者在一些实现中，存储器控制器218可以是处理器104的一个内部部分。

取决于期望的配置，系统存储器106可以是任意类型的存储器，包括但不限于：易失性存储器(诸如ram)、非易失性存储器(诸如rom、闪存等)或者它们的任何组合。系统存储器106可以包括操作系统120、一个或者多个程序122以及程序数据124。在一些实施方式中，程序122可以被配置为在操作系统上由一个或者多个处理器104利用程序数据124执行指令。

计算设备100还可以包括有助于从各种接口设备(例如，输出设备142、外设接口144和通信设备146)到基本配置102经由总线/接口控制器130的通信的接口总线140。示例的输出设备142包括图形处理单元148和音频处理单元150。它们可以被配置为有助于经由一个或者多个a/v端口152与诸如显示器或者扬声器之类的各种外部设备进行通信。示例外设接口144可以包括串行接口控制器154和并行接口控制器156，它们可以被配置为有助于经由一个或者多个i/o端口158和诸如输入设备(例如，键盘、鼠标、笔、语音输入设备、触摸输入设备)或者其他外设(例如打印机、扫描仪等)之类的外部设备进行通信。示例的通信设备146可以包括网络控制器160，其可以被布置为便于经由一个或者多个通信端口164与一个或者多个其他计算设备162通过网络通信链路的通信。

网络通信链路可以是通信介质的一个示例。通信介质通常可以体现为在诸如载波或者其他传输机制之类的调制数据信号中的计算机可读指令、数据结构、程序模块，并且可以包括任何信息递送介质。“调制数据信号”可以这样的信号，它的数据集中的一个或者多个或者它的改变可以在信号中编码信息的方式进行。作为非限制性的示例，通信介质可以包括诸如有线网络或者专线网络之类的有线介质，以及诸如声音、射频(rf)、微波、红外(ir)或者其它无线介质在内的各种无线介质。这里使用的术语计算机可读介质可以包括存储介质和通信介质二者。

该计算设备100可以实现为服务器，例如文件服务器、数据库服务器、应用程序服务器和网络服务器等，也可以实现为小尺寸便携(或者移动)电子设备的一部分，这些电子设备可以是诸如蜂窝电话、个人数字助理(pda)、个人媒体播放器设备、无线网络浏览设备、应用专用设备、或者可以包括上面任何功能的混合设备。计算设备100还可以实现为包括桌面计算机和笔记本计算机配置的个人计算机。在一些实施例中，计算设备100被配置为执行一种数据展示方法200。另外计算设备100中还存储有用于在数据展示方法中展示的数据。

图2示出了根据本发明的一个实施例的一种数据展示方法200的流程示意图。方法200在计算设备中执行，如在计算设备100中执行，以便展示计算设备中存储的数据。

如图2所示，该方法始于步骤s210。在步骤s210中，确定在三维坐标系统中，与数据的第一属性相对应的x轴，与数据的第二属性相对应的y轴和与数据的第三属性相对应的z轴。根据一个实施例，数据具有四种属性，数据的每种属性分别描述数据的某些特征，例如在汽车行业，第一属性为用户对价格区间的偏好；第二属性为用户访问内容偏好，访问内容包括汽车资讯、论坛文章、产品参数、商品类信息和金融类信息；第三属性为车辆级别，包括小型轿车、中型轿车、大型轿车、小型suv、中型suv、大型suv和微型面包车；第四属性为车辆的车系，包括日系车、美系车、德系车。

随后，在步骤s220中，在计算设备的屏幕上的预定位置确定原点，并基于从原点延伸的x轴，y轴和z轴，构造三维坐标系统。根据一种实施方式，预定位置为屏幕中心位置。应当注意的是，本发明不受限于原点的预定位置，任何根据需要而确定的、在屏幕上的任意位置都可以作为原点而没有脱离本发明的保护范围。

图3示出了根据本发明的一个实施例的、适于进行在步骤s220中的处理的，三维坐标系统绘制方法的具体示例。如图3所示，在步骤s221中，创建一个容器，在其中放置一个3d场景的div，并设置该3d场景的div的属性为：

transform-style:preserve-3d；height:100％；width:100％；transform-origin:50％50％，利用css3形成3d场景。

创建完毕后，执行步骤s222在容器中构建平面，放置面容器div，并设置面容器div的属性，包括transform、perspective、transform-origin，具体设置为：

transform-style:preserve-3d；width:2.75rem；height:3.85rem；transform:translatez(-1.925rem)rotatex(0deg)rotatey(0deg)；margin-left:-1.375rem；margin-top:-1.925rem；position:absolute；left:50％；top:50％

根据这种属性可以保证在3d场景中，三维坐标系统始终居中显示。在其中3d场景中三个平面的div，分别作为正对面xy，底面xz和侧面yz。底面xz由所述正对面xy绕所述x轴旋转-90°得到，侧面yz由所述正对面zy绕所述y轴旋转-90°得到。正对面xy，底面xz和侧面yz的三条交线为在步骤s210中确定的x轴，y轴和z轴轴线。三条轴线的交点为在步骤s220中确定的原点，从原点向外发散。分别设置正对面xy，底面xz和侧面yz的属性，其中，正对面xy的属性为

position:absolute；bottom:0；底面xz的属性为

position:absolute；bottom:0；transform-origin:bottom；transform:rotatex(-90deg)，侧面yz的属性为

position:absolute；bottom:0；transform-origin:left；transform:rotatey(-90deg)。

构建完成后，执行步骤s223，在三个平面的div中加入可缩放的矢量图形svg，由svg的g和line标签渲染出网格线。网格线确定的每个网格限定了等大的平面单元，平面单元的每个边长均为x轴，y轴和z轴轴线的一个单位长度。

渲染出网格线后执行步骤s224，在正对面xy的div中，由svg的g和line标签渲染出x轴和y轴，在侧面yz中放入g-line标签渲染出z轴线。x轴，y轴和z轴轴线绘制有方向箭头、轴线名称、刻度线和对应的刻度值，轴线名称为所在轴线数据对应的属性，刻度值为对应的属性取值。

随后，执行步骤s225，在三维坐标系统中加入x轴，y轴和z轴轴线名称，完成三维坐标系统的构建。

返回到结合图2所描述的方法，在步骤s220中构建好三维坐标系统之后，在步骤s230中，将数据的第一属性，第二属性和第三属性值转化为相应坐标轴上的刻度值。根据一种实施方式，在步骤s230中，首先获取所述数据的第一属性、第二属性和第三属性值。对于数据的不同属性可取到不同的属性值。

随后，将数据的第一属性、第二属性和第三属性值中，连续取值的属性值分段，得到数个属性值区间；数据的不同属性中取值为非连续的，则可直接建立不同取值与对应坐标轴刻度值的映射。将分段得到的所述数个属性值区间作为分立的刻度值，将每个属性值区间都对应坐标轴上的一个刻度。

根据本发明的一个实施例，数据的第一属性为用户对价格的偏好，价格的取值从低到高近似为连续，并且用户对价格的偏好也是更希望购买某一区间价格内的车辆，而不是需求仅限于某一特定价格的车辆。因此，将所有车辆的价格从低到高的排序整齐的区间进行分段，分成0-8万、8万-15万、15万-20万、20万-25万、25万-50万、50-70万、70万-最大值。分段后，即可与x轴上的刻度值，从小到大依次对应。最后根据数据的第一属性值相应的价格区间，即可对应于坐标轴上的刻度值。数据的第三属性为车辆的级别，车辆的级别只能为分立的取值，则直接将车辆的每个级别一一对应于z轴上的刻度值。

随后，执行步骤s240，根据数据的刻度值，确定数据在三维坐标系统中的立方体的位置，并根据数据的第四属性确定立方体的颜色和透明度。根据本发明的一个实施例，数据的第四属性为车辆的车系，包括日系车、美系车、德系车。用不同的颜色和通明度以区分不同车辆的车系，用黄色，透明度0.3的立方体代表日系车；蓝色，透明度0.3的立方体代表美系车；绿色，透明度0.3的立方体代表德系车。

随后，执行步骤s250，以所确定的位置、颜色和透明度在所述三维坐标系统中绘制立方体。具体而言，在步骤s250中，首先根据数据属性值，确定在三维坐标系统中的立方体的位置，绘制立方体容器div，并设置3d属性：

transform-style:preserve-3d。

随后，在立方体容器中加入6个面div，作为立方体的六个面，分别设置面div的transform属性的旋转和平移，形成立方体。

随后，在步骤s250中，根据确定的立方体的颜色和透明度设置立方体的属性。任意方向接邻的两个立方体，重合的面透明度低于其他面，以在展示数据时表示两个立方体相接。绘制的每个正方体均可以单独设置自己的颜色和透明度，以表达所代表的数据的第四属性。

根据本发明的一个实施例，图4为数据展示最终的一个示例，x轴，y轴和z轴相互垂直，交点为原点，由原点向外发散；正对面xy，底面xz和侧面yz之间相互垂直，交线为x轴，y轴和z轴轴线；各面上有由网格线限定的等大的平面单元，单元边长为x轴，y轴和z轴轴线的一个单位长度；不同立方体的位置代表不同数据的第一属性、第二属性和第三属性；立方体的不同颜色代表不同的数据的第四属性。

根据本发明的一些实施例，方法200的实施例还可以包括对三维坐标系统的显示进行控制，实现三维坐标系统在缩放时原点保持位置不变。具体包括：给三维坐标系统的容器c-div增加缩放事件监听，以控制三维坐标系统的放大和缩小，缩放事件可以由鼠标、触控板等外置输入设备、以及通过手指移动等实现，本发明不作限制；监测到用户的缩放操作后，控制三维坐标系统进行成比例放大和缩小，缩放的比例可由用户通过设置灵敏度进行调节，本发明不作限制，放大和缩小时保持原点不动。

根据本发明的一个实施例，图5a为图4，原点不动，放大得到；图5b为图4，原点不动，缩小得到。

对三维坐标系统的显示进行控制，还包括实现三维坐标系统可围绕原点旋转，在旋转时原点保持位置不变。具体包括：获取在屏幕上的拖曳操作，向某个方向移动了多少距离，屏幕上的拖曳操作可以由不限于鼠标、触控板等外置输入设备，以及通过手指移动等方式实现，本发明不作限制；控制三维坐标系统向某个方向进行一定度数的旋转，三维坐标系统旋转的方向与屏幕上的拖曳操作方向相同，旋转的距离与拖曳操作移动的距离成一定比例关系，这种比例可由用户通过设置拖曳操作灵敏度进行调节，本发明不作限制；三维坐标系统围绕原点旋转时，原点保持不动。

根据本发明的一个实施例，图6a为图4，原点不动，沿z轴向右旋转90°得到；图6b为图4，原点不动，沿z轴向左旋转180°得到。

根据本发明的技术方案，xyz轴由原点(0、0、0)向外发射，符合正常思维表达模式，使得数据表现更加直观；每个立方体可以单独设置自己的色值来表达当前点所代表的数据含义；本系统是基于css3和svg实现的矢量3d图，优点是消耗内存小，多次重复渲染不会造成内存泄漏和内存溢出，无论放大多少倍，都不会造成失真现象。

这里描述的各种技术可结合硬件或软件，或者它们的组合一起实现。从而，本发明的方法和设备，或者本发明的方法和设备的某些方面或部分可采取嵌入有形媒介，例如可移动硬盘、u盘、软盘、cd-rom或者其它任意机器可读的存储介质中的程序代码(即指令)的形式，其中当程序被载入诸如计算机之类的机器，并被所述机器执行时，所述机器变成实践本发明的设备。

在程序代码在可编程计算机上执行的情况下，计算设备一般包括处理器、处理器可读的存储介质(包括易失性和非易失性存储器和/或存储元件)，至少一个输入装置，和至少一个输出装置。其中，存储器被配置用于存储程序代码；处理器被配置用于根据该存储器中存储的所述程序代码中的指令，执行本发明的多语言垃圾文本的识别方法。

以示例而非限制的方式，可读介质包括可读存储介质和通信介质。可读存储介质存储诸如计算机可读指令、数据结构、程序模块或其它数据等信息。通信介质一般以诸如载波或其它传输机制等已调制数据信号来体现计算机可读指令、数据结构、程序模块或其它数据，并且包括任何信息传递介质。以上的任一种的组合也包括在可读介质的范围之内。

在此处所提供的说明书中，算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与本发明的示例一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下被实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员应当理解在本文所公开的示例中的设备的模块或单元或组件可以布置在如该实施例中所描述的设备中，或者可替换地可以定位在与该示例中的设备不同的一个或多个设备中。前述示例中的模块可以组合为一个模块或者此外可以分成多个子模块。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

本发明还可以包括：a9、如a7或a8中所述的方法，其中，所述底面xz由所述正对面xy绕所述x轴旋转-90°得到；所述侧面yz由所述正对面zy绕所述y轴旋转-90°得到。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

此外，所述实施例中的一些在此被描述成可以由计算机系统的处理器或者由执行所述功能的其它装置实施的方法或方法元素的组合。因此，具有用于实施所述方法或方法元素的必要指令的处理器形成用于实施该方法或方法元素的装置。此外，装置实施例的在此所述的元素是如下装置的例子：该装置用于实施由为了实施该发明的目的的元素所执行的功能。

如在此所使用的那样，除非另行规定，使用序数词“第一”、“第二”、“第三”等等来描述普通对象仅仅表示涉及类似对象的不同实例，并且并不意图暗示这样被描述的对象必须具有时间上、空间上、排序方面或者以任意其它方式的给定顺序。

尽管根据有限数量的实施例描述了本发明，但是受益于上面的描述，本技术领域内的技术人员明白，在由此描述的本发明的范围内，可以设想其它实施例。此外，应当注意，本说明书中使用的语言主要是为了可读性和教导的目的而选择的，而不是为了解释或者限定本发明的主题而选择的。因此，在不偏离所附权利要求书的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。对于本发明的范围，对本发明所做的公开是说明性的，而非限制性的，本发明的范围由所附权利要求书限定。