CN105117404B - 基于图表类型和数据特征场景下的图表显示缺陷优化方法 - Google Patents

Abstract

本发明提供了一种基于图表类型和数据特征场景下的图表显示缺陷优化方法，包括以下步骤：待图表加载完毕，获取所述图表对应的图表生成代码，根据所述图表生成代码调用场景检测接口，针对待生成图表的数据和图表类型进行场景检测；确定相匹配的场景后调用场景解决方案，优化图表显示缺陷。该方法能够快速、有效的针对图表生成过程中因图表类型和数据特征导致的图表显示缺陷进行修复和调整，生成界面显示良好的各类图表。

Description

基于图表类型和数据特征场景下的图表显示缺陷优化方法

技术领域

本发明涉及一种计算机Web页面图表技术领域的方法，具体讲涉及一种基于图表类型和数据特征场景下的图表显示缺陷优化方法。

背景技术

随着网络技术的快速发展，网站呈现出爆发式增长的趋势，有统计指出：平均每3个月，网站个数增加1000万个，包括商业网站、个人网站、企业网站、政府网站等。尤其对于政府网站和企业网站来说，除了人员管理，相关数据的对外展示也占有相当大的比重，越来越多的页面采用美观、直观、功能强大、图表丰富和兼容大多数浏览器的图形图表插件进行页面的图表数据展示。

现有技术中，较为流行的web图表图形插件有Highcharts、echarts、fusioncharts等。其核心实现方式类似，均为基于纯js库给出图形调用接口供给用户使用。

Highcharts是一个非常流行，界面美观的纯Javascript图表库。Highcharts可以为您的网站或Web应用程序提供直观，互动式的图表。目前支持线，样条，面积，areaspline，柱形图，条形图，饼图和散点图类型。

Echarts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览(IE6/7/8/9/10/11，chrome，firefox，Safari等)，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。图表的代码调用接口与Highcharts类似。

目前各种网站中，对图表的使用也越来越多。大多数的图表库都是免费开源的，且对于绝大部分用户来说，都提供了强大功能，其直观、易用的交互方式，可满足各类网站设计的需要。

然而，现有技术中，普遍方法对X轴标签管理方面的支持工作有欠缺，在横轴标签过长的情况下，highcharts下的图表会因无法进行自适应的旋转而产生重叠，即便更早一些的主流组件Fusioncharts，虽有所改善，仍无法避免此问题。此外，在柱状图及折线图中，dataLabel的显示也会因横轴数据个数的增多而发生重叠，造成图表直观展示上的困难。当然，其他类型图表也会产生其他不同问题，不一一举例说明。

针对上述问题，本发明提供了一种基于图表类型和数据特征场景下的图表显示缺陷优化方法。

发明内容

为克服上述现有技术的不足，本发明提供一种基于图表类型和数据特征场景下的图表显示缺陷优化方法。

实现上述目的所采用的解决方案为：

一种基于图表类型和数据特征场景下的图表显示缺陷优化方法，所述方法包括以下步骤：

I、待图表加载完毕，获取所述图表对应的图表生成代码，根据所述图表生成代码调用场景检测接口，针对待生成图表的数据和图表类型进行场景检测；

II、确定相匹配的场景后调用场景解决方案，优化图表显示缺陷。

优选地，所述步骤I包括：

S101、引入所述场景检测和场景解决方案的库文件；

S102、根据待检测图表的生成对象，获取其图表类型、展示数据和图表属性的配置数据，依据所述图表类型选择调用所述场景检测接口对应的场景接口，确定所述待检测图表的场景；

S103、根据所述图表的待展示数据和图表属性配置数据运用场景检测算法进行场景检测；

S104、判断获得的场景与所述场景接口的输出是否匹配，若匹配则进入步骤II进行图表显示修正，若不匹配则加载原代码，将图表嵌入页面显示。

优选地，所述场景检测接口，包含所能检测到的图表类型及其对应的场景；

所述场景为：当用户在使用图表进行数据展示时，由展示数据、图表属性的配置数据和图表类型共同引发的一种显示效果上的缺陷。

优选地，待图表加载完毕，获取所述图表对应的图表生成代码，调用场景检测机制，提取图表对象的特征，获取所述图表的待展示数据和图表属性配置数据。

优选地，所述步骤II包括：

S201、根据所述步骤I中确定的场景，选择对应的所述场景解决方案，对所述图表的展示数据和/或图表属性的配置数据进行修正；

S202、针对图表对象，重新调整所述图表属性，并将原有数据替换为修正后的新数据；

S203、将所述新数据以图表对象对图表中的属性重新赋值的方式，嵌入所述图表的生成代码中，实现图表显示缺陷的优化。

优选地，所述步骤S202和S203中，根据所述场景解决方案，利用图表对象重新设置图表显示的所述图表属性，并将换算后的新数据覆盖掉原图表中的数据存放区，实现图表显示缺陷的优化。

优选地，所述场景解决方案为针对各类图表显示中遇到的显示缺陷问题所对应的解决方案。

与最接近的现有技术相比，本发明具有以下有益效果：

本发明提供的方法通过在特定图表类型的基础上，分析数据特征与给定展示场景是否相匹配，进而在特定展示场景下利用场景解决方案调整图表显示的格式信息，而保持数据显示标注不变，从而实现格式信息和数据标注之间的解耦，达到图表显示缺陷的优化效果。该方法能够快速、有效的针对图表生成过程中因图表类型和数据特征导致的图表显示缺陷进行修复和调整，生成界面显示良好的各类图表。

本发明提供的方法中，在图表代码生成之后，调用缺陷场景检测接口，根据创建的该图表对象，首先获取该图表的展示类型和展示数据等关键信息，利用上述关键信息进行场景检测，对于检测到的场景，给出对应的场景解决方案，在不影响显示效果的前提下，动态更改图表生成代码，完成场景检测与程序的动态管控。在web页面的图表生成过程中引入这一场景检测机制，能够在不影响开发者开发进度的情况下，快速有效地识别图表中存在的缺陷，并给出具体的场景解决方案，能够在设定场景下极大的优化图表的界面显示效果。

附图说明

图1为本发明的场景检测流程图；

图2为本发明的图表显示缺陷优化流程图；

图3为本发明的执行流程示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制,其他实施方案可以包括结构的、逻辑的、电气的、过程的以及其他改变。实施例仅代表可能的变化。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。本文中，本发明的这些实施方案可以被单独地或总地用术语“发明”来表示，这仅仅是为了方便，并且如果事实上公开了超过一个的发明，不是要自动的限制该应用的范围为任何单个发明或者发明构思。

如图1所示，图1为本发明的场景检测流程图；场景检测过程如下，访问页面后待页面图表加载完毕，获得图表对象，待图表各部分属性设置后，根据图表对象调用场景检测接口从而启用场景检测。

场景检测接口根据待检测图表的生成对象，确定待检测图表展示的图表类型；待确定图表类型后获取嵌入的展示数据，对展示数据进行场景检测，进一步进行场景匹配确定场景；针对确定的场景启用对应的场景解决方案，若场景匹配失败则认为图表展示无缺陷无需启用场景解决方案已进行图表优化。

本实施例中，先判断是否为饼状图，若是则进一步判断饼状图中对应的场景，再调用该场景对应的场景解决方案；若不是判断是否为柱状图，依次判断完毕，直至确认图表类型、场景，从而确定场景解决方案。

图表类型：图表展示的类型，如饼状图、柱状图、折线图等。

展示数据：通过图表以展示、表达的实际数据。

图表属性：图表自身的属性，如长度、高度等。

图表属性的配置数据：显示图表属性的数据，如长度、高度等的具体数值。

场景检测接口：包含所能检测到的图表类型及其对应的场景检测方法；

场景：当用户在使用图表进行数据展示时，由展示数据、图表属性配置数据和图表类型共同引发的一种显示效果上的缺陷，称为展示场景，简称场景。

场景检测方案：场景解决方案为针对各类图表显示中遇到的显示缺陷问题所对应的解决方案。

如图2所示，图2为本发明的图表显示缺陷优化流程图；待场景匹配成功后，根据不同的场景依据特定的变换规则对数据实时变换，生成新数据；

利用图表对象options将新数据嵌入到原有的图表代码框架中；根据不同的场景，对原图表中的部分属性做相应的调整；

依次设置所有图表的属性，设置完毕后加载图表，从而完成图表显示缺陷优化。

图3为本发明的执行流程示意图，结合图1、2、3进一步说明本发明提供的一种基于图表类型和数据特征场景下的图表显示缺陷优化方法，该方法包括以下：

步骤一、待图表加载完毕，获取所述图表对应的图表生成代码，根据所述图表生成代码调用场景检测接口，针对待生成图表的数据和图表类型进行场景检测；

步骤二、确定相匹配的场景后调用场景解决方案，优化图表显示缺陷。

步骤一，具体包括：

S101、引入所述场景检测和场景解决方案的库文件；

S102、根据待检测图表的生成对象，获取其图表类型、展示数据和图表属性的配置数据，依据图表类型调用所述场景检测接口对应的场景接口，确定所述待检测图表的场景；

S103、根据所述图表的待展示数据和图表属性配置数据运用场景检测算法进行场景检测；

S104、判断获得的场景与所述场景接口的输出是否匹配，若匹配则进入步骤II进行图表显示修正，若不匹配则加载原代码，将图表嵌入页面显示。

步骤S102中，场景检测接口，用于确定针对不同的图表类型可检测的场景。

不同图表类型都存在其场景，例如：对于带有横轴的图表，均检测其横轴的拥挤程度，当给出的横轴所有标注的字符串长度已经超出图表所在位置的宽度的80％时，可判定其发生拥挤。解决方法一般是由动态管控程序自动执行横轴标注的旋转设置操作，实现场景检测程序的动态管控方法。

一般上述横轴拥挤的场景均会出现在折线图和柱状图中，再分别给出折线图和柱状图的各一个缺陷进一步说明：

折线图：对于在同一张图中含有多条曲线的折线图表来说，多个数据点位置很有可能相近或近似重叠，这会造成数据标注产生重叠，无法区分具体数值。而动态管控程序能预先根据这些数据的内在关系，对有可能发生重叠的数据标注进行位置的动态调整，以避免重叠。

柱状图：多组数据中，数据值差别过大，一般是10倍或更多，会导致较小值的柱形在图中无法体现，易被用户忽略，这也在用户交互时是不友好的，动态管控程序能检测到这种差异特征，分析所有数据的数值适当增大该柱形，而保持标注不变。

步骤S103中，不同的图表类型对应有不同的缺陷，即场景，将不同类型的类似场景进行归类进行场景检测包括以下情况：

当确定所述图表类型为柱状图、折线图、混合图、柱状堆叠图、曲线区域图等所有包含横轴和纵轴数据的图表类型时，场景类型包括但不限于以下几种：

1、数据值差别过大；

2、横轴太过拥挤；

3、数据显示的标注轻微或重度重叠；

4、横轴上某一点的纵轴数据不存在或无意义时仍然用0表示；

5、图表处在较窄的div中，横轴的左端和有段存在无数据的空白渲染，空间利用率不高。

当确定所述图表类型为2D/3D的半/单/双饼图时，场景类型包括但不限于以下几种：

1、存在某项占比过小的数据，导致其代表的扇形区无法直观体现；

2、扇形区过小，且数据标注设置在内部显示；此时在图表显示上会出现混乱，即图表显示缺陷。

3、双饼图中内侧扇形区过小，数据标注显示不开，导致展示混乱。

需要说明的是，这里所说的不同图表类型对应的场景并不是对其方法的限定，实际应用中可能包含但绝不仅仅局限于以上几种，实际应用中必然会对图表类型、场景作出更完整全面的规划整理以供优化使用。

待图表加载完毕，获取所述图表对应的图表生成代码，调用场景检测机制，提取图表对象的特征，获取所述图表的待展示数据和图表属性配置数据。

步骤二，具体包括：

S201、根据所述步骤I中确定的场景，选择对应的所述场景解决方案，对所述图表的展示数据或图表属性的配置数据进行修正；

S202、针对图表对象，重新调整所述图表属性，并将原有数据替换为修正后的新数据；

S203、将所述新数据以图表对象对图表中的属性重新赋值的方式，嵌入所述图表的生成代码中，实现图表显示缺陷的优化。

上述步骤S201中，根据步骤S103完成的场景检测结果，调用对应的场景解决方案。

给出以下实施例以说明：

1)、以饼图为例，若检测结果符合某一数据占比很小的缺陷场景，有t个属于需要适当增大的数据。则，采用如下换算方式：将该t个值统一增加一个K的增量。

将改进后的数组作为图表显示的新数组，在显示时，在图表的formatter属性的回调函数中，仍添加原数据值，从而数据标注保持不变。

上述方式就实现图表显示上的数据标注和格式信息在关联关系上的相互分离，达到解耦的目的。

2)、以柱状图为例，若检测结果表明数值差异过大，出现某一较小数据代表的柱形过小的显示缺陷，可采用类似上例中饼图的做法，将该较小的数据增加一个G增量，但在图表的formatter回调函数中，任然使用原来的数值。其中G是由差异值的大小和全体数据的数值分布，经线性规划方法得出来的，具体的计算步骤，这里不再赘述。

需要说明的是，这里所说的不同场景对应的场景解决方案并不是对其方法的限定，实际应用中包含但绝不仅仅局限于以上几种，实际应用中必然会根据不同图表类型、场景作出更完整全面的规划整理以供优化使用；对应的场景问题也会由于系统的不同考量采用不同的方法。

上述步骤S202和S203中，根据所述场景解决方案，利用图表对象重新设置图表显示的非数据属性，即图表属性，并将换算后的新数据覆盖掉原图表中的数据存放区，实现图表显示缺陷的优化。

基于上述方法，运用一具体应用实施例说明其过程，如下：

步骤A、将与场景检测相关的js库引入项目中，并在图表生成代码的文件中引入该js文件。若在后缀为.jsp或.html文件中，则引入方式如下：<script type＝“text/javascript”src＝“/xxx.js”>。

若图表生成代码在.js文件当中，则在本文件头部引入，方式如下：document.write(“<script type＝\”text/javascript\”src＝\”/xxx.js\”></script>”)；。

在图表代码生成之后，由图表开发者创建一个该图表的对象options，并由图表开发者调用场景检测接口defectManagement(options)。

接口defectManagement()负责的是场景检测以及根据场景对应的解决方案进行关键代码替换，所以只需调用该接口，后续的全部功能都可实现。

以饼状图为例，场景检测部分，首先获得图表类型，方法如下所示：

其次，在获得图表的类型type为“pie”后，得到该图表内部已部署完成的展示数据，获取方式如下所示：

获得如下表1所示的数据展示表：

表1数据展示表

得到上述数据后，分析数据特征。一般的，当一个数据在所有数据中的占比小于0.5％的时候，其代表的扇形区域就无法用肉眼去观测到。

因此，在图表代码生成过程中，可适当地提高该数据值，但在显示时，仍然替换为原来的数据值占比。表1中的0.1和0.2就需要适当的提高。

数据检测及替换算法如下：

以上为一饼图场景的优化方法，依次作为实施例进行说明，但需要说明的是，上述涉及的方法并不是唯一的解决方案，采用上述实施例进行说明并不是对方案的限定。

最后应当说明的是:以上所有实施例仅用于说明本申请的技术方案而非对其保护范围的限制,尽管参照上述实施例对本申请进行了详细的说明,所属领域的普通技术人员应当理解:本领域技术人员阅读本申请后依然可对申请的具体实施方式进行种种变更、修改或者等同替换，但这些变更、修改或者等同替换，均在申请待批的权利要求保护范围之内。

Claims (6)

1.一种基于图表类型和数据特征场景下的图表显示缺陷优化方法，其特征在于：所述方法包括以下步骤：

I、待图表加载完毕，获取所述图表对应的图表生成代码，根据所述图表生成代码调用场景检测接口，针对待生成图表的数据和图表类型进行场景检测；

II、确定相匹配的场景后调用场景解决方案，优化图表显示缺陷；

所述步骤I包括：

S101、引入所述场景检测和场景解决方案的库文件；

S102、根据待检测图表的生成对象，获取其图表类型、展示数据和图表属性的配置数据，依据所述图表类型选择调用所述场景检测接口对应的场景接口，确定所述待检测图表的场景；

S103、根据所述图表的待展示数据和图表属性配置数据运用场景检测算法进行场景检测；

S104、判断获得的场景与所述场景接口的输出是否匹配，若匹配则进入步骤II进行图表显示修正，若不匹配则加载原代码，将图表嵌入页面显示。

2.如权利要求1所述的一种基于图表类型和数据特征场景下的图表显示缺陷优化方法，其特征在于：所述场景检测接口，包含所能检测到的图表类型及其对应的场景；

所述场景为：当用户在使用图表进行数据展示时，由展示数据、图表属性的配置数据和图表类型共同引发的一种显示效果上的缺陷。

3.如权利要求1所述的一种基于图表类型和数据特征场景下的图表显示缺陷优化方法，其特征在于：待图表加载完毕，获取所述图表对应的图表生成代码，调用场景检测机制，提取图表对象的特征，获取所述图表的待展示数据和图表属性配置数据。

4.如权利要求1所述的一种基于图表类型和数据特征场景下的图表显示缺陷优化方法，其特征在于：所述步骤II包括：

S201、根据所述步骤I中确定的场景，选择对应的所述场景解决方案，对所述图表的展示数据和/或图表属性的配置数据进行修正；

S202、针对图表对象，重新调整所述图表属性，并将原有数据替换为修正后的新数据；

S203、将所述新数据以图表对象对图表中的属性重新赋值的方式，嵌入所述图表的生成代码中，实现图表显示缺陷的优化。

5.如权利要求4所述的一种基于图表类型和数据特征场景下的图表显示缺陷优化方法，其特征在于：所述步骤S202和S203中，根据所述场景解决方案，利用图表对象重新设置图表显示的所述图表属性，并将换算后的新数据覆盖掉原图表中的数据存放区，实现图表显示缺陷的优化。

6.如权利要求4所述的一种基于图表类型和数据特征场景下的图表显示缺陷优化方法，其特征在于：所述场景解决方案为针对各类图表显示中遇到的显示缺陷问题所对应的解决方案。