CN104991762A - 数据图形化展现方法 - Google Patents

Abstract

数据图形化展现方法，它涉及一种展现方法。它包含绘制模块、内置工具模块、分页显示拖动模块；本发明不需要开发人员或用户进行任何二次开发，只要在配置里简单的设置几个基本属性就能使用图形数据的分段展现功能，在现有的主流机器上，图形都可以流畅的切换数据段，且图形的样式均支持白定义配置，用户可以根据自己的喜好更改图形上的大大小小的功能区域；另外还可以根据轴方向的配置以不同的方向作为起始点展现数据。

Description

数据图形化展现方法

技术领域

本发明涉及一种展现方法，具体涉及一种数据图形化展现方法。

背景技术

由于HTML5的普及，大部分浏览器都兼容了HTML5规范中的Canvas，这样我们可以通过Canvas绘制直接调用OpenGl渲染作出具有较好动画与交互效果的组件，MobileChart就是具有以上优点的组件。但是大数据在移动端的展现，一直都是个问题，移动端较小的显示区域无法一次性完整的显示所有数据，

Mobile是使用HTML5 Canvas绘制的一套展现数据的图形组件，该组件集成了许多内置功能，并对移动端的展现做了许多优化，图形中自带了分业处理，自动横竖屏切换，这都是现有图形比较欠缺的。

发明内容

本发明的目的在于针对现有技术的缺陷和不足，提供一种数据图形化展现方法，它不需要开发人员或用户进行任何二次开发，只要在配置里简单的设置几个基本属性就能使用图形数据的分段展现功能，在现有的主流机器上，图形都可以流畅的切换数据段，且图形的样式均支持自定义配置，用户可以根据自己的喜好更改图形上的大大小小的功能区域；另外还可以根据轴方向的配置以不同的方向作为起始点展现数据。

为实现上述目的，本发明采用的技术方案是：它包含绘制模块、内置工具模块、分页显示拖动模块。

绘制模块：出于Android Html5Canvas的绘制Bug(Android Html5绘制 时若Canvas背景为透明则下一帧屏幕刷新时可能残留上一帧的内容，导致图形数据显示异常)。

MobileChart2统一将所有的可能事实变动的图形放在了同一层，每次绘制前不通过clear函数清空上一帧的绘制而是通过Fill函数Fill背景色去覆盖上一帧的绘制，这样不会造成上一层的绘制残留，解决了Android上Canvas动画时的阴影残留问题。

图形数据旋转：数据旋转功能是将类目轴的数据与度量进行对调，我们的图形本身通过处理类目轴data段数据与series中的data段数据，将其以固定的规律重组实现了数据轴数据与度量的自动对调，用户使用时无需二次开发。

图形分页与动态控制：图形的分页功能是MobileChart2的重点功能，用户可以通过简单的配置描述实现图形的分页。

MobileChart2初始化时读取用户的配置描述，通过用户配置的Page属性计算每页显示的最佳条数[Math.floor(数据长度/Page)]。

采用上述技术后，本发明有益效果为：不需要开发人员或用户进行任何二次开发，只要在配置里简单的设置几个基本属性就能使用图形数据的分段展现功能，在现有的主流机器上，图形都可以流畅的切换数据段，且图形的样式均支持自定义配置，用户可以根据自己的喜好更改图形上的大大小小的功能区域；另外还可以根据轴方向的配置以不同的方向作为起始点展现数据。

具体实施方式

下面对本发明作进一步的说明。

本具体实施方式采用以下技术方案：它包含绘制模块、内置工具模块、分页显示拖动模块。

绘制模块：出于Android Html5Canvas的绘制Bug(Android Html5绘制时若Canvas背景为透明则下一帧屏幕刷新时可能残留上一帧的内容，导致图形数据显示异常)。

MobileChart2统一将所有的可能事实变动的图形放在了同一层，每次绘制前不通过clear函数清空上一帧的绘制而是通过Fill函数Fill背景色去覆盖上一帧的绘制，这样不会造成上一层的绘制残留，解决了Android上Canvas动画时的阴影残留问题。

图形数据旋转：数据旋转功能是将类目轴的数据与度量进行对调，我们的图形本身通过处理类目轴data段数据与series中的data段数据，将其以固定的规律重组实现了数据轴数据与度量的自动对调，用户使用时无需二次开发。

图形分页与动态控制：图形的分页功能是MobileChart2的重点功能，用户可以通过简单的配置描述实现图形的分页。

MobileChart2初始化时读取用户的配置描述，通过用户配置的Page属性计算每页显示的最佳条数[Math.floor(数据长度/Page)]。

实施例：

出于对Ios与Android的渲染机制存在区别，我们选用了一种比较通用并且高校的滚动机制，

1.)首先图形初始化时支持初始化3块Canvas定义为LeftCanvas，MiddleCanvas与RightCanvas，并将这3块Canvas放在同一个Div中

2.)绑定Canvas的touch与Mouse事件，监听TouchMove与MouseMove

3.)首页绘制时MobileChart2会同时绘制首页与第二页数据到MiddleCanvas与RightCanvas中，尾页绘制时会同时绘制最后一页的前一页与 最后一页到LeftCanvas与MiddleCanvas中，其他情况时会绘制当前页的前一页到LeftCanvas当前页到MiddleCanvas下一页到RightCanvas

4.)拖动进行时，由于我们提前绘制了前后页的内容，所以不需要事实刷新计算数据，只需要更具Offset偏移同时移动3个canvas(处理拖动区域超出Div则忽略)，由于拖动时不重新绘制，所以图形的拖动在Android也可以有流畅的展现，MobileChart2在拖动结束时，首先根据Offset的值计算出单前需要显示的数据索引，然后将LeftCanvas、MiddleCanvas、RightCanvas还原为初始位置，并用原始背景填充，接着根据刚刚计算出的Index索引重新绘制当前页到MiddleCanvas上，当前页的上一页到LeftCanvas上，当前页的下一页到RightCanvas上，这样用户体验上是看不出LeftCanvas，MiddleCanvas，RightCanvas的还原过程而是一种连续的拖动感觉(和普通的连续拖动一致)。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明；因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内；不应将权利要求中的任何标记视为限制所涉及的权利要求；

此外，应当理解，虽然本说明书按照实施方式加以描述，但并非每个实施方式仅包含一个独立的技术方案，说明书的这种叙述方式仅仅是为清楚起见，本领域技术人员应当将说明书作为一个整体，各实施例中的技术方案也可以经适当组合，形成本领域技术人员可以理解的其他实施方式。

Claims (1)

1.数据图形化展现方法，其特征在于它包含绘制模块、内置工具模块、分页显示拖动模块；

绘制模块：出于Android Html5Canvas的绘制Bug(Android Html5绘制时若Canvas背景为透明则下一帧屏幕刷新时可能残留上一帧的内容，导致图形数据显示异常)；

MobileChart2统一将所有的可能事实变动的图形放在了同一层，每次绘制前不通过clear函数清空上一帧的绘制而是通过Fill函数Fill背景色去覆盖上一帧的绘制，这样不会造成上一层的绘制残留，解决了Android上Canvas动画时的阴影残留问题；

图形数据旋转：数据旋转功能是将类目轴的数据与度量进行对调，我们的图形本身通过处理类目轴data段数据与seties中的data段数据，将其以固定的规律重组实现了数据轴数据与度量的自动对调，用户使用时无需二次开发；

图形分页与动态控制：图形的分页功能是MobileChart2的重点功能，用户可以通过简单的配置描述实现图形的分页；

MobileChart2初始化时读取用户的配置描述，通过用户配置的Page属性计算每页显示的最佳条数[Math.floor(数据长度/Page)]。