CN102902533A

CN102902533A - 一种Java结合HTML5生成图表的框架展现系统及其方法

Info

Publication number: CN102902533A
Application number: CN2012103432987A
Authority: CN
Inventors: 王帅; 白德鑫
Original assignee: LeTV Information Technology Beijing Co Ltd
Current assignee: Leshi Zhixin Electronic Technology Tianjin Co Ltd
Priority date: 2012-09-17
Filing date: 2012-09-17
Publication date: 2013-01-30

Abstract

本发明涉及一种Java结合HTML5生成图表的框架展现方法及其系统，其中该系统包括数据获取模块、数据处理模块和数据展现模块。采用了Java和HTML5相结合的技术，通过对需要生成图表的数据进行实体化的封装，使数据展现得到了对象化，达到了原先过程化到对象化的具体变化，实现了Java与HTML5结合生成图表的技术效果，并且使生成的图表美观大方，同时使用异步刷新无需刷新整个页面，并且图表还具有动画效果，方便了开发者进行开发，可以有效地提高工作效率，提升开发速度，节约项目完成的时间。

Description

一种Java结合HTML5生成图表的框架展现系统及其方法

技术领域

本发明属于Java开发中的前端展现领域，涉及一种图表展现的方式，具体涉及一种新兴的HTML5技术。

背景技术

当前前端图表展现技术多数为静态图表或者Flash生成的图表，存在的时间较长，优点是使用稳定，长期的技术积累框架多容易实现。缺点是生成的报表不够美观，使用异步刷新的技术较少，或者是Flash的使用较麻烦。

fusioncharts(HTML5版)的出现使得报表更加美观，但是从后端（如数据库中）取到的数据，需要到前端进行数据处理，将最原始的对象型数据，循环解析并取出数据展现需要的属性，将属性拼写填入预先定义好的xml格式字符串中，然后将处理好的数据组成fusioncharts可以使用的数据结构，如：{"chart":{"caption":"MonthlyRevenue","xaxisname":"Month","yaxisname":"Revenue","numberprefix":"$","showvalues":"0"},"data":[{"label":"Jan","value":"420000"},{"label":"Feb","value":"910000"},{"label":"Mar","value":"720000"},{"label":"Apr","value":"550000"},{"label":"May","value":"810000"},{"label":"Jun","value":"510000"},{"label":"Jul","value":"680000"},{"label":"Aug","value":"620000"},{"label":"Sep","value":"610000"},{"label":"Oct","value":"490000"},{"label":"Nov","value":"530000"},{"label":"Dec","value":"330000"}],"trendlines":{"line":[{"startvalue":"700000","color":"009933","displayvalue":"Target"}]},"styles":[{"definition":[{"style":[{"name":"CanvasAnim","type":"animation","param":"_xScale","start":"0","duration":"1"}]}],"application":[{"apply":[{"toobject":"Canvas","styles":"CanvasAnim"}]}]}]}，然后交给fusioncharts进行处理。这将导致前端显示部件还要承担一部分数据处理的工作，这将给前端带来开发效率低下的问题。

公开号为CN102591961A的专利申请公开了一种制作数据图表的方法及系统，其中使用fusioncharts作为展现组件，而在业务模块对用户数据进行分析统计生成数据包后，视图模块还需要对该数据包进行处理（如调用标签）来生成需要展示的图表，这将给前端带来开发负担，开发效率低下。

发明内容

有鉴于此，本发明针对传统图表展现技术中的报表不够美观，使用异步刷新的技术较少，前端开发效率低下的问题，提供一种Java结合HTML5生成图表的框架展现方法及其系统，采用了Java和HTML5相结合的技术，通过对需要生成图表的数据进行实体化的封装，使数据展现得到了对象化，达到了原先过程化到对象化的具体变化，实现了Java与HTML5结合生成图表的技术效果，并且使生成的图表美观大方，同时使用异步刷新无需刷新整个页面，并且图表还具有动画效果，方便了开发者进行开发，可以有效地提高工作效率，提升开发速度，节约项目完成的时间。

为解决上述问题，本发明提供的技术方案如下：

一种Java结合HTML5生成图表的框架展现系统，其中该系统包括数据获取模块、数据处理模块和数据展现模块；其中，

所述数据获取模块，用于利用Java接口，从数据库中获取需要展现的原始数据；

所述数据处理模块，用于利用Java接口，对所述原始数据进行封装处理，并传输到所述数据展现模块；

所述数据展现模块，用于通过Fusioncharts直接接收所述处理后的数据并进行展现。

优选的是，所述数据获取模块利用Java接口，使用sql语句从mysql数据库中获取需要展现的原始数据。

在上述任一方案中优选的是，所述数据处理模块包括第一封装模块、数据归类模块、第二封装模块和数据传输模块；其中，

所述第一封装模块，用于利用Java接口，将所述原始数据封装成Java对象，生成一个类文件的集合；

所述数据归类模块，用于将所述Java对象数据取出，并根据归类条件进行归类，然后分别存入相应的类别集合当中；

所述第二封装模块，用于利用chart-support接口，将所述归类后的类别集合数据，封装成所述数据展现模块可以识别的展现对象；

所述数据传输模块，用于将所述展现对象传输到所述数据展现模块。

在上述任一方案中优选的是，所述归类条件包括：日期、地域。

在上述任一方案中优选的是，所述展现对象包括：json对象或xml对象。

本发明的第二个方面涉及一种Java结合HTML5生成图表的框架展现方法，包括以下步骤：

利用Java接口，从数据库中获取需要展现的原始数据；

利用Java接口，对所述原始数据进行封装处理，并传输到前端；

所述前端通过Fusioncharts直接接收所述处理后的数据并进行展现。

优选的是，所述利用Java接口，从数据库中获取需要展现的原始数据，进一步包括：利用Java接口，使用sql语句从mysql数据库中获取需要展现的原始数据。

在上述任一方案中优选的是，所述前端通过Fusioncharts直接接收所述处理后的数据并进行展现，进一步包括：

利用Java接口，将所述原始数据封装成Java对象，生成一个类文件的集合；

将所述Java对象数据取出，并根据归类条件进行归类，然后分别存入相应的类别集合当中；

利用chart-support接口，将所述归类后的类别集合数据，封装成所述前端可以识别的展现对象；

将所述展现对象传输到所述前端。

可以看出，采用本发明的系统和方法，只要使用chart-support相关的API，就可以在业务处理层面上对从数据库得到的数据进行解析，业务处理，然后把数据进行封装到对应的实体对象中，直接将实体对象转换成fusioncharts需要的json数据或者xml数据，fusioncharts接收到数据直接可以进行展现，不必再进行数据处理。

这样既实现了业务与展现层次分明，又可以提高开发效率，一次开发多次使用，简化了开发步骤。

本发明的优点在于：

1) 逻辑结构清晰，对比原有技术可以展现更清晰的逻辑结构从而处理数据更明了；

2) 数据生成方便，使用java强大的库生成前端需要的数据，无需人工干预；

3) 展现美观，比传统方式展现的数据更加美观明了；

4) 封装工具，将生成工具进行封装，方便传播和使用。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例1系统的各部分组成结构示意图；

图2是本发明实施例1系统的数据处理模块组成结构示意图；

图3是本发明实施例2的方法流程示意图；

图4是本发明实施例2的数据处理方法流程示意图。

具体实施方式

为了使本发明更容易理解，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述；显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

参见图1，图1为本发明实施例1提供的一种Java结合HTML5生成图表的框架展现系统的各部分组成结构示意图；如图1所示，该系统包括：数据获取模块101、数据处理模块102和数据展现模块103；其中，

所述数据获取模块101，用于利用Java接口，从数据库中获取需要展现的原始数据；

所述数据处理模块102，用于利用Java接口，对所述原始数据进行封装处理，并传输到所述数据展现模块103；

所述数据展现模块103，用于通过Fusioncharts直接接收所述处理后的数据并进行展现。

进一步，所述数据获取模块101，利用Java接口，使用sql语句(select * from ...)从mysql数据库中获取需要展现的原始数据。

如图2所示，所述数据处理模块102进一步包括第一封装模块201、数据归类模块202、第二封装模块203和数据传输模块204；其中，

所述第一封装模块201，用于利用Java接口，将所述原始数据封装成Java对象，生成一个类文件的集合；

所述数据归类模块202，用于将所述Java对象数据取出，并根据归类条件进行归类，然后分别存入相应的类别集合当中；

所述第二封装模块203，用于利用chart-support接口，将所述归类后的类别集合数据，封装成所述数据展现模块103可以识别的展现对象；

所述数据传输模块204，用于将所述展现对象传输到所述数据展现模块103。

进一步，所述归类条件包括：日期、地域。

进一步，所述展现对象包括：json格式的对象（如，{a:b,c:{d:e}}）或xml格式的对象。

参见图3，图3为本发明实施例2提供的一种Java结合HTML5生成图表的框架展现方法的流程示意图；如图3所示，包括以下步骤：

步骤301，利用Java接口，从数据库中获取需要展现的原始数据；

步骤302，利用Java接口，对所述原始数据进行封装处理，并传输到前端；

步骤303，所述前端通过Fusioncharts直接接收所述处理后的数据并进行展现。

进一步地，利用Java接口，使用sql语句(select * from ...)从mysql数据库中获取需要展现的原始数据。

如图4所示，上述方法还包括以下步骤：

步骤401，利用Java接口，将所述原始数据封装成Java对象，生成一个类文件的集合；

步骤402，将所述Java对象数据取出，并根据归类条件进行归类，然后分别存入相应的类别集合当中；

步骤403，利用chart-support接口，将所述归类后的类别集合数据，封装成所述前端可以识别的展现对象；

步骤404，将所述展现对象传输到所述前端。

进一步地，所述归类条件包括：日期、地域。

进一步地，所述展现对象包括：json格式的对象（如，{a:b,c:{d:e}}）或xml格式的对象。

在本技术中，只要使用chart-support相关的API，就可以在业务处理层面上对从数据库得到的数据进行解析，业务处理，然后把数据进行封装到对应的实体对象中，直接将实体对象转换成fusioncharts需要的json数据或者xml数据，fusioncharts接收到数据直接可以进行展现，不必再进行数据处理。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims

1.一种Java结合HTML5生成图表的框架展现系统，包括数据获取模块、数据处理模块和数据展现模块；其特征在于，

2.根据权利要求1所述的系统，其特征在于，所述数据获取模块利用Java接口，使用sql语句从mysql数据库中获取需要展现的原始数据。

3.根据权利要求1所述的系统，其特征在于，所述数据处理模块包括第一封装模块、数据归类模块、第二封装模块和数据传输模块；其中，

4.根据权利要求3所述的系统，其特征在于，所述归类条件是日期。

5.根据权利要求3所述的系统，其特征在于，所述归类条件是地域。

6.根据权利要求3所述的系统，其特征在于，所述展现对象是json对象。

7.根据权利要求3所述的系统，其特征在于，所述展现对象是xml对象。

8.一种Java结合HTML5生成图表的框架展现方法，包括获取和传输数据步骤，其特征在于，包括以下步骤：

利用Java接口，从数据库中获取需要展现的原始数据；

9.根据权利要求8所述的方法，其特征在于，所述利用Java接口，从数据库中获取需要展现的原始数据，进一步包括：利用Java接口，使用sql语句从mysql数据库中获取需要展现的原始数据。

10.根据权利要求8所述的方法，其特征在于，所述前端通过Fusioncharts直接接收所述处理后的数据并进行展现，进一步包括：

将所述展现对象传输到所述前端。