使用元数据的图表转换系统和方法 |
|||||||
| 申请号 | CN201580000786.X | 申请日 | 2015-03-11 | 公开(公告)号 | CN105517681A | 公开(公告)日 | 2016-04-20 |
| 申请人 | 绿猫软件有限公司; | 发明人 | 赵祺泰; | ||||
| 摘要 | 公开了一种使用元数据的图表转换系统和方法。该图表转换系统包括：元数据管理模 块 ，用于存储包括代表图表的图表组件的图表规则、用于实现图表规则的图表运行时以及以元数据形式添加的图表类型信息；提取模块，用于从元数据管理模块中提取图表类型信息的元数据；以及控 制模 块，用于计算每个图表组件的变化以及用于将计算出的变化与从提取模块中提取的图表类型信息的元数据相结合。 | ||||||
| 权利要求 | 1.一种用于可视化图表数据的图表转换系统，包括： |
||||||
| 说明书全文 | 使用元数据的图表转换系统和方法技术领域[0001] 本发明涉及一种图表转换系统和方法。更特别地，本发明涉及一种用于将基于矢量格式的任意图像文件转换为图表的方法。 背景技术[0002] 近来，随着基于因特网的技术的焦点已经从服务器转为web浏览器，与图形技术有关的标准诸如画布(Canvas)应用程序编程接口(API)和可缩放矢量图形(SVG)被积极地使用。越来越多的其中强调复杂可视交互的web应用使用图形技术被构建。 [0003] 在这些图形相关技术中，SVG支持被图形设计者们广泛使用的编辑工具，并且使得能够使用Javascript对个别组件进行动态的控制，Javascript是用于基于web浏览器的开发的主要语言。因此，SVG是用于对用于web上的仪表板或图表的数据进行可视化的优选格式。 [0004] 韩国专利申请公开第10-2007-7015384号及其他公开了一种用于在图形用户接口及类似接口上显示信息的方法，但是在传统领域里，将由设计者使用编辑工具创建的SVG文件转换成web上的动态组件诸如仪表板、图表及其他要涉及到Javascript开发者。此外，由于设计更复杂而且可视化级别更高，要求设计者和开发者之间更紧密的协作。 [0005] 然而，对于这种协作，设计者必须理解开发者的要求，而开发者必须理解SVG标准以及Javascript。 [0006] 对于设计者而言直接控制SVG文件的内容或者对于开发者而言紧密参与到设计工作中都并非寻常易事。考虑到这一点，尽管基于web的可视化技术取得了快速发展，在仪表板和图表中使用的设计仍未脱离简单和标准的模式。 发明内容[0007] 技术问题 [0008] 本发明被提出来解决前述问题，这些问题可能发生在通过将脚本与基于矢量格式的图形文件诸如SVG相结合来创建用于可视化数据的组件诸如仪表板、图表等等的过程中。 [0009] 本发明的目的是，通过根据预定义规则将元数据添加到设计文件中，而将设计者与开发者的角色清晰地分开，由此提高开发者和设计者的工作效率。 [0010] 此外，本发明的另一目的是使得图形设计者能够在不借助开发者帮助的情况下直接地亦或使用单独的应用将元数据添加到他们的工作输出中，以完成具有可视化数据的图表或仪表板，由此可以快速地产生高质量的内容。 [0011] 此外，本发明的又一目的是通过使得开发者能够不管单个设计内容的不同特性如何，都能基于普适于元数据的规则来构建数据可视化组件或平台，以将相同的代码适用于不同的设计，由此提高重复利用性并使开发效率最大化。 [0012] 本发明的目的不限于上述目的，并且从后续描述中本领域普通技术人员能够理解其他未提及的目的。 [0013] 技术方案 [0014] 为了获得上述目的，根据本发明的一个方面，一种图表转换系统包括：元数据管理模块，用于存储包括用于代表图表的图表组件的图表规则、用于实现图表规则的图表运行时和以元数据形式添加的图表类型信息；提取模块，用于从元数据管理模块中提取图表类型信息的元数据；以及控制模块，用于计算图表组件的每一个的变化以及用于将所计算出的变化与从提取模块中提取的图表类型信息的元数据相结合。 [0015] 在一个优选实施例中，元数据管理模块包括：图表存储单元，用于存储包括图表组件的图表规则、图表运行时、以元数据形式添加的图表类型信息、包括图表的文档对象模型(DOM)以及DOM对象；匹配单元，用于当设计文件创建者上传基于矢量格式的图形文件时提供对应于所上传的图形文件的至少一个DOM对象，并且用于将所提供的DOM对象与图形文件相匹配；以及生成单元，用于根据匹配的结果将元数据添加到DOM对象中。 [0016] 在一个优选实施例中，图表存储单元被配置为存储其中添加了元数据的DOM对象。 [0017] 根据本发明的另一方面，一种图表转换方法包括：当设计文件被上传时，显示用于针对所上传的设计文件选择图表的屏幕；将图表的必要组件连接到包括在设计文件中的设计组件；以及将关于图表的组件的信息作为元数据存储到设计文件中，其中图表的组件被连接到设计组件。 [0018] 图表转换方法还包括提取图表的组件的元数据；针对图表的类型选择运行时；基于所选择的运行时确定图表的组件；计算所确定的图表的组件的每一个的变化；将所计算的图表的组件的变化与所提取的图表的组件的元数据相结合；以及显示所组合的图表。 [0019] 有益效果 [0020] 如上所述，根据本发明，通过尽可能减少在开发用于数据可视化的动态组件时图形设计者和脚本开发者之间直接协作的必要性，可以避免由于图形设计者和脚本开发者之间经历和背景知识的不同而造成的通信过程中的误解和延迟因素。 [0021] 此外，使用本发明的前述特征，很多非指定的(unspecified)设计者可以使用之前实现的运行时服务快速生成期望的图表或仪表板，而不需要额外的开发过程。此外，本发明还可以用于针对可重复使用的数据可视化组件的市场服务。 [0023] 图1是示出了根据本发明的一个实施例的数据可视化系统的配置的视图； [0024] 图2是示出了示出了根据本发明的一个实施例的数据可视化设备的配置的框图； [0025] 图3是其中详细描述了根据本发明的一个实施例的数据可视化设备的配置的视图； [0026] 图4a是示出了根据本发明的一个实施例的图表转换方法的流程的流程图； [0027] 图4b是其中示出了根据图4a的流程的用于将原始设计文件上传到图表存储单元210以及用于将所上传的文件转换为图表组件的过程以帮助理解的视图； [0028] 图5a是示出了其中根据本发明的一个实施例实现的图表运行时从图表组件中提取元数据并通过将数据与元数据相结合而显示动态图表的过程的流程图； [0029] 图5b是其中将图5a的流程适用于柱形图的视图； [0030] 图6是示出了其中可以实现根据本发明的一个实施例的数据可视化方法的根据本发明的一个实施例的计算机设备的配置例子的视图；以及 [0031] 图7是示出了根据本发明的一个实施例的刻度盘的视图。 具体实施方式[0032] 本发明涉及一种用于通过将元数据添加到图像文件中而自动将矢量格式的任意图像文件转换为动态图表的系统和方法。具体而言，本发明提供了一种使用元数据的图表转换系统和方法，其中通过将脚本与基于矢量格式的图形文件相结合来生成用于可视化数据的组件，诸如仪表板、图表等等。 [0033] 本发明提供了能够改变元数据并将元数据添加到矢量格式的任意设计文件中的模块，该模块作为web应用程序或者用于设计编辑工具的插件被提供。另外，本发明提供了用于编写用于支持预定义图表类型或仪表板类型的元数据的直观用户接口。 [0034] 同时，本发明提供了这样一种运行时环境，其中通过将已添加有元数据的设计文件与实现用于所定义图表类型或仪表板类型的规则的对象相结合，根据从原始数据文件取回的数据，设计文件可以被操作为完整图表或仪表板形式。 [0035] 根据将参考附图更详细描述的下述示例性实施例，本发明的优点和特征以及实现它们的方法将很明白。然而应当理解，本发明不限于下述示例性实施例，而是可以以各种形式实现。相应地，示例性实施例仅被提供用于揭露本发明并使得本领域普通技术人员理解本发明的种类。还应该理解术语仅用于描述实施例而不是限制权利要求的范围。在此，单数形式亦将包括多数形式，除非上下文明确另外指明。 [0036] 在下文中，将参考附图详细描述本发明的示例性实施例。关于与附图中各部分相关联的参考标记，相同的参考标记将指代整个附图中相同或类似的部分。在下文中，在描述中，众所周知的特征和技术的细节将被忽略，以避免不必要地模糊所提供的实施例。 [0038] -元数据 [0039] 通常，“元数据”可以被定义为“关于数据的数据”。亦即，元数据是“用于数据的结构化数据”，意味着它是用于描述其他数据的属性信息。元数据根据特定规则被分配给内容，以便在海量的信息中有效地检索到所期望的信息。 [0040] 在本说明书中，元数据被理解为关于图形组件的引用信息，包括元数据标签和类别属性，或者被理解为在可缩放矢量图形(SVG)文档上下文中关于整个文档的引用信息。 [0041] -基于矢量格式的图形 [0042] 用可缩放矢量图形(SVG)、矢量绘图工具(AdobeIllustrator，AI)和被封装的PostScript(EPS)来举例说明，它意味着用于存储图像数据的格式，其可以通过存储图片中每个像素的几何结构信息和属性而非RGB值而自由缩放到任何放大率。 [0043] -可缩放矢量图形(SVG) [0044] SVG是基于代表二维矢量图形的可扩展标记语言(XML)的文件格式，并且是矢量图形文件格式。由于SVG图像和有关这些图像的操作是在XML文本文件中定义的，因此它们可以被取回、索引和脚本化并可以在必要时被压缩。同样，由于SVG格式是浏览器广泛支持的标准技术，其被普遍使用来实现web上的动态数据可视化功能。 [0045] 本说明书中的所有例子都将被考虑为是基于SVG的，除非另作说明。然而，由于本发明的概念可以适用于元数据可以被添加到的并且具有能够被程序存取的结构化组件的所有矢量图形格式，因此本发明不应被诠释为必须仅仅适用于SVG格式，并且使用SVG的实现方式应仅被看作是本发明的一个实施例。 [0046] 同时，由于SVG文件以XML的形式配置，因此可以使用DOM API来容易地执行结构化操作。另外，SVG文档通常包括用于使得发行者能够标明版权等等的特殊元数据标签，以及诸如数字、颜色等的设计组件。同样，SVG文档的大多数组件可以使用类别属性来定义，类似于在HTML中那样。 [0047] –可扩展标记语言(XML) [0048] 标记语言是使用标签来规定数据结构的语言，XML是通过对用于创建网络web页面的超文本标记语言(HTML)进行大量改进而形成的。相对于HTML，XML改进了用于构建和搜索web页面的功能，并且使得web页面的创建和编辑更便利。 [0049] 图1是示出了根据本发明的一个实施例的数据可视化系统的配置的视图。 [0050] 参考图1，示出了一个实施例，其中很多非专业的设计者A和B以及少数几个开发者C使用具有图表存储单元210和图表运行时的数据可视化系统分别执行设计工作和系统管理，在他们之间没有直接的协作。 [0051] 在本实施例中，事先在图表存储单元210中存储了多条可重复使用的图表内容。图表使用者D可以编写报告，其中图表数据是使用图表存储单元210中之前存储的图表内容可视化的。 [0052] 在这种情况下，图表存储单元210中之前存储的图表内容包括图表规则和图表运行时。在此，图表规则是抽象定义以根据图表类型(诸如柱形图、饼状图等)代表来自给定数据的图表的规则的某一集合。 [0053] 例如，如果图表是刻度盘，则图表规则可以包括刻度盘图表的设计组件。在此，如图7所示，刻度盘图表是用于使用指向一圆形阵列中的刻度的指针表示一个或多个值的图表。 [0054] 换言之，在各种刻度盘图表的设计中，必须包括对应于至少一个指针n1的组件以便代表当前数据的值。此外，刻度盘图表的设计包括表示指针n1应当以当前值相对于数据最大值的百分比的角度基于某点10顺时针旋转的内容。 [0055] 图表运行时是在实际中实现图表规则，并且通过文档对象模型应用程序接口(DOM API)获得用于包括上述刻度盘图表指针等的组件的引用的对象。随后，图表运行时根据相关联的数据计算组件的新位置或大小并将计算得到的值适用于图表。在本实施例中，在SVG情况下，相应的操作可以通过变换API来执行。 [0056] 图2是示出了根据本发明的一个实施例的数据可视化设备的配置的框图。 [0057] 参考图2，通过将元数据添加到基于矢量格式的任意图像文件中而将图像文件自动转换为动态图表的数据可视化设备包括用户接口模块100、元数据管理模块200、元数据提取模块300和控制模块400。 [0058] 此处使用的术语“模块”应当根据术语使用的上下文被诠释为包括软件、硬件或它们的组合。例如，软件可以是机器代码、固件、嵌入代码或应用软件。作为另一例子，硬件可以是电路、处理器、计算机、集成电路、集成电路内核、传感器、微电子机械系统(MEMS)、无源设备或者它们的组合。 [0059] 用户接口模块100为包括设计者、开发者和图表使用者在内的用户提供了输入/输出接口。例如，用户接口模块100为设计者提供用于上传图形文件的接口以及用于将图表组件与设计图形文件相匹配的接口。作为另一例子，用户接口模块100为开发者提供用于从图形文件(设计者已经将元数据添加到了该图形文件)中提取元数据的接口以及用于显示经由图表转换过程转换的图表的接口。 [0060] 元数据管理模块200存储包括用于显示图表的图表组件的图表规则和用于实现该图表规则的图表运行时。 [0061] 元数据提取模块300提取关于对应于图像文件数据(a)的图表组件的元数据(b)，其是从元数据管理模块200输入到用户接口模块100中的。 [0062] 控制模块400计算每个图表组件的变化，并接收从元数据提取模块300提取的元数据(c)。计算得到的每个图表组件的变化和所提取的元数据通过控制模块400相结合。然后，控制模块400将组合后的图表组件数据(e)传送到用户接口模块100以便输出给用户。 [0063] 图3是其中详细描述了根据本发明的数据可视化设备的配置的视图。 [0064] 参考图3，数据可视化设备的用户接口模块100包括输入单元110和输出单元130，元数据管理模块200包括图表存储单元210、匹配单元230和生成单元250，并且控制模块400包括计算单元410和组合单元420。在图3的描述中，将省略重复的描述。 [0065] 元数据管理模块200的图表存储单元210存储图表运行时、包括图表组件的图表规则以及以元数据形式添加的图表类型信息。 [0066] 当矢量格式的图形文件(f)被设计文件创建者上传后，匹配单元230提供对应于从图表存储单元210上传的图形文件的至少一个文档对象模型(DOM)对象，并将所提供的DOM对象匹配到图形文件。 [0067] 生成单元250根据匹配的结果将元数据添加到DOM对象，由此生成添加有元数据的图表类型信息。 [0068] 生成单元250所生成的包括元数据的图表类型信息可以被传送给图表存储单元210并被存储在那里。 [0069] 根据本发明的另一方面，一种图表转换方法包括：其中当图形文件创建者或开发者上传设计文件后显示用于选择用于上传的设计文件的图表的屏幕的步骤；用于将图表的必要组件与设计文件中包括的设计组件相结合的步骤以及用于将关于与设计组件连接的图表组件的信息作为元数据存储在设计文件中的步骤。 [0070] 图4a是示出了根据本发明的一个实施例的图表转换方法的流程的流程图。具体而言，图4A示出了其中将原始设计文件上传到图表存储单元210并将其转换为图表组件的过程。参考图4A，描述了使用根据本发明的一个实施例的图表转换方法为设计者生成的图形设计设置元数据的过程。用于添加元数据的后续过程可以实现为设计编辑工具的插件，并且图4A中示出的过程应被诠释为本发明的代表性实施例。 [0071] 首先，在步骤S10中执行将原始设计文件上传到根据实施例配置的图表存储单元210的过程。在这种情况下，设计者以SVG格式保存通过编辑工具产生的图形设计文件，并将该文件上传到数据可视化设备的图表存储单元210中。因此，在步骤S20，显示用于选择对应于所上传的原始设计文件的图表的屏幕。在这种情况下，图表存储单元210列出系统所支持的图表的类型，由此设计者可以选择所上传的设计文件将被转换成的目标。 [0072] 在步骤S30，图表组件和设计组件通过可视化交互被连接到彼此。然后，在步骤S40，关于图表组件的信息被作为元数据存储到设计文件中。 [0073] 例如，如果设计者在步骤S20中选择刻度盘图表，则图表转换系统在步骤S20后面的步骤中显示所上传的设计文件并为设计者提供关于对应于指针、转轴等(其为刻度盘图表的必要组件)的SVG DOM对象的引用。因此，可以通过DOM API添加诸如‘类别＝“指示器”’的类别属性，由此有可能编写表明相关对象应当在运行时充当刻度盘图表指针的内容。 [0074] 在用前述方法编写了用于图表必要组件的元数据之后，数据可视化系统根据预定义的方法使用SVG文件中的‘元数据’标签中的XML的自定义命名空间的扩展将关于所选择图表类型的信息作为元数据，诸如‘<图表：类型>刻度盘’，添加到文件中，并随后在步骤S50中保存该文件。 [0075] 图4b是其中示出了根据图4A的流程用于将原始设计文件上传到图表存储单元210以及用于将所上传的文件转换为图表组件的过程的视图，以帮助理解。 [0076] 对于图4b中示出的柱形图41，本发明的实施例除了与图表存储单元210的数据相关联的柱形组件e，f和g以外还额外地建立了具有对应于图表的最大和最小值的长度的柱形组件。额外的组件可以通过如在前述方法中那样将‘类别’属性诸如‘类别＝“最小”’和‘类别＝“最大”’指定给相应的SVG标签来代表。 [0077] 图5a是示出了其中根据本发明的一个实施例实现的图表运行时从图表组件中提取元数据以及通过将数据与元数据相结合而显示动态图表的过程的流程图。 [0078] 当接收到针对用于所附报告的图表组件的请求后，在步骤S510中执行用于提取被添加到相关图表组件的元数据的过程。然后，在步骤S520中，根据所提取的元数据检查图表类型并执行支持图表类型的图表运行时。 [0079] 在执行了运行时之后，在步骤S530中执行确定所对应图表类型的必要组件的过程。例如，在刻度盘图表的情况下，图表运行时通过检查所对应图表组件的SVG文件中是否存在具有值‘指示器’的‘类别’属性来取回对应于刻度盘指针的组件。这一过程可以使用DOM API或者基于DOM API的Javascript库来执行。 [0080] 在步骤S540中，在通过前述方法获得用于指针和转轴的DOM对象的引用后，从与该图表相关联的数据中计算组件的变化，并将其适用于图表。例如，根据图表类型，如果图表是刻度盘图表，则计算作为图表的组件的指针的旋转角度。由于刻度盘图表通常表示相对于最大值的百分比，因此指针的旋转角相对于360度(其对应于最大旋转角)的比率可以用百分比来代表。 [0081] 在步骤S550中，显示通过借助变换API将计算出的角度适用到对象而适用变化的图表。在前述实施例中，当将变化适用到刻度盘图表的指针对象并且由此指针对象基于转轴对象转动时，适用数据的值的完整刻度盘图表得以运行。 [0082] 同时，根据刻度盘图表的设计，可以有这样的情况，其中指针的旋转角度范围限于指定的范围，例如，从-120度到120度，而非360度。在这种情况下，使用如上所述的SVG文档中的‘元数据’标签来编写该指定范围，并且该范围可以在执行计算时通过被图表运行时提取来引用。 [0083] 根据本发明的一个实施例，图表组件可以通过被最终用户根据需要添加到报告或仪表板来被用于数据可视化。在这种情况下，图表运行时可以被配置为显示通过将最终用户所提供的数据与图表组件相结合而生成的完整图表，其包括元数据并且是从图表存储单元210存入的。 [0084] 图5b是其中将图5A的流程适用于柱形图的视图。 [0085] 如图5b所示，在一个实施例中，提取用于图表组件的元数据，取回对应于最大和最小值的组件，并基于组件的屏幕边界来计算柱形所占的区域大小。然后，将数据组件复制到对应于将被标示的数据项(在图5所示的实施例中为‘A’、‘B’、‘C’和‘D’)的编号的编号中，并基于该数据项的值相对于所计算区域的百分比来计算每根柱形的长度，并借由变换API将其适用到图表。 [0086] 图6是示出了其中可以实现根据本发明的一个实施例的数据可视化方法的根据本发明的一个实施例的计算机设备的配置的例子的视图。 [0087] 根据本发明的一个实施例的图表转换方法可以实现于计算机系统中，或者可以被记录在记录介质中。如图6所示，计算机系统可以包括至少一个处理器121、存储器123、用户输入设备126、数据通信总线126、用户输出设备127和存储128。这些组件的每一个通过数据通信总线122来执行数据通信。 [0089] 存储器123和存储128可以包括各种类型的易失性或非易失性存储介质。例如，存储器123可以包括ROM 124和RAM 125。 [0090] 因此，根据本发明的一个实施例的图表转换方法可以实现为计算机中的方法可执行文件。当根据本发明的一个实施例的图表转换方法在计算机设备中实现时，计算机可读指令可以实现根据本发明的图表转换方法。 [0091] 同时，根据本发明的一个实施例的前述图表转换方法可以实现为记录在计算机可读存储介质上的计算机可读代码。计算机可读存储介质包括其中存储有计算机系统可以解译的数据的所有类型的存储介质。例如，计算机可读存储介质可以包括只读存储器(ROM)、随机存取存储器(RAM)、磁带、磁盘、闪存、光学数据存储等等。此外，计算机可读存储介质可以分布于由计算机网络连接的计算机系统中，并且可以作为能够使用分布式方法来读的代码而被存储和执行。 [0092] 尽管已经结合优选实施例和附图描述了本发明，但是这些仅是示例性的。应当理解，在本领域中可以进行各种等效的修改和变型，而不偏离本发明的主旨和范围。因此，本发明的真正技术范围不应由上述的实施例来定义而应当由所附权利要求及等效内容来定义。 [0093] 工业实用性 [0094] 本发明可以应用于图形设计领域。 |
||||||
QQ群二维码
意见反馈
意见反馈