CN113655942A - 一种图表数据的展示方法和装置 - Google Patents

一种图表数据的展示方法和装置 Download PDF

Info

Publication number
CN113655942A
CN113655942A CN202111015078.7A CN202111015078A CN113655942A CN 113655942 A CN113655942 A CN 113655942A CN 202111015078 A CN202111015078 A CN 202111015078A CN 113655942 A CN113655942 A CN 113655942A
Authority
CN
China
Prior art keywords
data
series
target data
category
chart
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202111015078.7A
Other languages
English (en)
Inventor
黄晓丽
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Wodong Tianjun Information Technology Co Ltd
Original Assignee
Beijing Wodong Tianjun Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Wodong Tianjun Information Technology Co Ltd filed Critical Beijing Wodong Tianjun Information Technology Co Ltd
Priority to CN202111015078.7A priority Critical patent/CN113655942A/zh
Publication of CN113655942A publication Critical patent/CN113655942A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种图表数据的展示方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：对于图表中的任一目标数据，将与目标数据属于相同系列但不同类目的其他数据加入目标数据的附加字段；其中，在图表中，类目按照第一方向分布，每一类目对应预设数量的系列，且与同一类目对应的系列按照第二方向分布；响应于收到的对目标数据的展示指令，将目标数据与附加字段中的其他数据进行比对展示。该实施方式能够实现一个方向堆叠条图表在展示提示时可以进行在另一方向上的数据比对展示，且当鼠标滑过当前系列项时可实现所有坐标同系列数据突出展示，指向性更明确。

Description

一种图表数据的展示方法和装置
技术领域
本发明涉及计算机技术领域，尤其涉及一种图表数据的展示方法和装置。
背景技术
在进行前端UI(用户界面)中的条形图表展示中，常常有如下的一种场景：为了直观展示多组或多类数据在不同维度下的表现形式，同时又能清晰展示同一组或同一类的情况，而采用堆叠条形图。但目前堆叠的条形图在鼠标滑过的时候展示的数据维度有限，不适用所有场景。
在实现本发明过程中，发明人发现现有技术中至少存在如下问题：
在一个方向的堆叠条(例如横向堆叠条)上的提示信息只能展示同一组的信息，不能满足数据在另一方向(例如竖向)上的对比需求；当前鼠标滑过的数据未能有明显的指向性。
发明内容
有鉴于此，本发明实施例提供一种图表数据的展示方法和装置，能够实现一个方向堆叠条图表在展示提示时可以进行在另一方向上的数据比对展示，且当鼠标滑过当前系列项时可实现所有坐标同系列数据突出展示，指向性更明确。
为实现上述目的，根据本发明实施例的一个方面，提供了一种图表数据的展示方法。
一种图表数据的展示方法，包括：对于图表中的任一目标数据，将与所述目标数据属于相同系列但不同类目的其他数据加入所述目标数据的附加字段；其中，在所述图表中，类目按照第一方向分布，每一类目对应预设数量的系列，且与同一类目对应的系列按照第二方向分布；响应于收到的对所述目标数据的展示指令，将所述目标数据与所述附加字段中的所述其他数据进行比对展示。
可选地，所述将与所述目标数据属于相同系列但不同类目的其他数据加入所述目标数据的附加字段，包括：创建与系列和类目对应的数据对象，将与所述目标数据所属系列和类目对应的第一数据对象的值属性赋值为所述目标数据，并将与所述目标数据属于相同系列但不同类目的其他数据作为自定义属性加入所述第一数据对象。
可选地，将与所述目标数据所属系列和类目对应的第一数据对象的值属性赋值为所述目标数据，并将与所述目标数据属于相同系列但不同类目的其他数据作为自定义属性加入所述第一数据对象，通过执行如下的图表数据处理过程来实现：遍历已存的系列数组，并在遍历到每一系列时进一步遍历类目数组，对于当前遍历到的系列和类目创建对应的数据对象，在图表中的某一数据同时属于当前遍历到的系列和类目的情况下，则将该数据放入当前遍历中所创建的数据对象的值属性；在该数据属于当前遍历到的系列但不属于当前遍历到的类目的情况下，则将该数据放入当前遍历中所创建的数据对象的自定义属性。
可选地，将所述目标数据与所述附加字段中的所述其他数据进行比对展示之前，还包括：根据所述展示指令获取所述第一数据对象，将所述第一数据对象中的所述自定义属性中的数据组装为用于展示的DOM(文档对象模型)元素。
可选地，将与所述目标数据属于相同系列但不同类目的其他数据加入所述目标数据的附加字段之后，还包括：增加对同系列数据突出展示的属性；所述方法还包括：响应于收到的对所述目标数据的展示指令，将所述目标数据与所述附加字段中的所述其他数据在所述图表中突出展示。
可选地，通过监听鼠标滑过事件接收对所述目标数据的展示指令，当有鼠标滑过所述图表上的所述目标数据时，将所述目标数据与所述附加字段中的所述其他数据比对展示在悬浮于所述图表的子图中。
根据本发明实施例的另一方面，提供了一种图表数据的展示装置。
一种图表数据的展示装置，包括：数据处理模块，用于对于图表中的任一目标数据，将与所述目标数据属于相同系列但不同类目的其他数据加入所述目标数据的附加字段；其中，在所述图表中，类目按照第一方向分布，每一类目对应预设数量的系列，且与同一类目对应的系列按照第二方向分布；数据展示模块，用于响应于收到的对所述目标数据的展示指令，将所述目标数据与所述附加字段中的所述其他数据进行比对展示。
可选地，所述数据处理模块还用于：创建与系列和类目对应的数据对象，将与所述目标数据所属系列和类目对应的第一数据对象的值属性赋值为所述目标数据，并将与所述目标数据属于相同系列但不同类目的其他数据作为自定义属性加入所述第一数据对象。
可选地，所述数据处理模块还用于：在将与所述目标数据所属系列和类目对应的第一数据对象的值属性赋值为所述目标数据，并将与所述目标数据属于相同系列但不同类目的其他数据作为自定义属性加入所述第一数据对象时，通过执行如下的图表数据处理过程来实现：遍历已存的系列数组，并在遍历到每一系列时进一步遍历类目数组，对于当前遍历到的系列和类目创建对应的数据对象，在图表中的某一数据同时属于当前遍历到的系列和类目的情况下，则将该数据放入当前遍历中所创建的数据对象的值属性；在该数据属于当前遍历到的系列但不属于当前遍历到的类目的情况下，则将该数据放入当前遍历中所创建的数据对象的自定义属性。
可选地，所述数据展示模块还用于：将所述目标数据与所述附加字段中的所述其他数据进行比对展示之前，根据所述展示指令获取所述第一数据对象，将所述第一数据对象中的所述自定义属性中的数据组装为用于展示的DOM元素。
可选地，所述数据处理模块还用于：将与所述目标数据属于相同系列但不同类目的其他数据加入所述目标数据的附加字段之后，增加对同系列数据突出展示的属性；所述数据展示模块还用于：响应于收到的对所述目标数据的展示指令，将所述目标数据与所述附加字段中的所述其他数据在所述图表中突出展示。
可选地，所述数据展示模块还用于：通过监听鼠标滑过事件接收对所述目标数据的展示指令，当有鼠标滑过所述图表上的所述目标数据时，将所述目标数据与所述附加字段中的所述其他数据比对展示在悬浮于所述图表的子图中。
根据本发明实施例的又一方面，提供了一种电子设备。
一种电子设备，包括：一个或多个处理器；存储器，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现本发明实施例所提供的图表数据的展示方法。
根据本发明实施例的又一方面，提供了一种计算机可读介质。
一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明实施例所提供的图表数据的展示方法。
上述发明中的一个实施例具有如下优点或有益效果：对于图表中的任一目标数据，将与目标数据属于相同系列但不同类目的其他数据加入目标数据的附加字段；其中，在图表中，类目按照第一方向分布，每一类目对应预设数量的系列，且与同一类目对应的系列按照第二方向分布；响应于收到的对目标数据的展示指令，将目标数据与附加字段中的其他数据进行比对展示。能够实现一个方向堆叠条图表在展示提示时可以进行在另一方向上的数据比对展示，且当鼠标滑过当前系列项时可实现所有坐标同系列数据突出展示，指向性更明确。
上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
附图用于更好地理解本发明，不构成对本发明的不当限定。其中：
图1是根据本发明一个实施例的图表数据的展示方法的主要步骤示意图；
图2是根据本发明一个实施例的堆叠图数据展示流程示意图；
图3是根据本发明一个实施例的堆叠图数据处理的流程示意图；
图4是根据本发明一个实施例的对鼠标滑过的提示信息进行自定义展示的流程示意图；
图5是根据本发明一个实施例的堆叠图数据展示效果示意图；
图6是根据本发明一个实施例的图表数据的展示装置的主要模块示意图；
图7是本发明实施例可以应用于其中的示例性系统架构图；
图8是适于用来实现本发明实施例的终端设备的计算机系统的结构示意图。
具体实施方式
以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
图1是根据本发明一个实施例的图表数据的展示方法的主要步骤示意图。
如图1所示，本发明一个实施例的图表数据的展示方法包括如下的步骤S101至步骤S102。
步骤S101：对于图表中的任一目标数据，将与目标数据属于相同系列但不同类目的其他数据加入目标数据的附加字段；其中，在图表中，类目按照第一方向分布，每一类目对应预设数量的系列，且与同一类目对应的系列按照第二方向分布。
步骤S102：响应于收到的对目标数据的展示指令，将目标数据与附加字段中的其他数据进行比对展示。
图表可基于数据可视化图表库实现，例如echarts5，其是一款基于JavaScript的数据可视化图表库。
本发明实施例的图表可以是堆叠图，具体可以是堆叠柱状图，或称堆叠条形图，第一方向、第二方向可分别为横向、纵向，或者，分别为纵向、横向，即图表中的条形展示方向可以是横向或竖向。以横向为例，每一条形(堆叠条)中包括横向堆叠的多个系列，每一条形对应一个类目，各类目(条形)在纵向上分布。
将与目标数据属于相同系列但不同类目的其他数据加入目标数据的附加字段，具体步骤可包括：创建与系列和类目对应的数据对象，将与目标数据所属系列和类目对应的第一数据对象的值属性赋值为目标数据，并将与目标数据属于相同系列但不同类目的其他数据作为自定义属性加入第一数据对象。
将与目标数据所属系列和类目对应的第一数据对象的值属性赋值为目标数据，并将与目标数据属于相同系列但不同类目的其他数据作为自定义属性加入第一数据对象，具体可通过执行如下的图表数据处理过程来实现：遍历已存的系列数组，并在遍历到每一系列时进一步遍历类目数组，对于当前遍历到的系列和类目创建对应的数据对象，在图表中的某一数据同时属于当前遍历到的系列和类目的情况下，则将该数据放入当前遍历中所创建的数据对象的值属性；在该数据属于当前遍历到的系列但不属于当前遍历到的类目的情况下，则将该数据放入当前遍历中所创建的数据对象的自定义属性。
将目标数据与附加字段中的其他数据进行比对展示之前，可以根据展示指令获取第一数据对象，将第一数据对象中的自定义属性中的数据组装为用于展示的DOM元素。
将与目标数据属于相同系列但不同类目的其他数据加入目标数据的附加字段之后，还可以增加对同系列数据突出展示的属性。
响应于收到的对目标数据的展示指令，还可以将目标数据与附加字段中的其他数据在图表中突出展示，突出展示例如高亮展示。
可通过监听鼠标滑过事件接收对目标数据的展示指令，当有鼠标滑过图表上的目标数据时，将目标数据与附加字段中的其他数据比对展示在悬浮于图表的子图中。即，当有鼠标滑过目标数据，则将目标数据与附加字段中的其他数据以提示信息的形式通过一个悬浮的子图进行比对展示。
图2是根据本发明一个实施例的堆叠图数据展示流程示意图。如图2所示，堆叠图数据展示流程包括：堆叠图数据处理(S201)；增加对同系列数据突出展示的属性(S202)；对鼠标滑过的提示信息进行自定义展示(S203)。
其中，堆叠图数据处理，具体包括在生成图表中的数据时，对于其中任意的某数据时，将与该数据属于相同系列但不同类目的其他数据加入该数据的附加字段的处理，例如，假设要展示某个sku(库存量单位)详情页的曝光用户、浏览用户、购买用户在不同年龄阶段的分布情况，需要在生成不同年龄用户的曝光、浏览、购买的任一项数据时，将其他两项对应的数据以附加字段放入到当前数据中。以生成某年龄段的曝光用户数据为例，即需要将该年龄段的浏览用户数据、购买用户数据以附加字段放入到曝光用户数据中，曝光、浏览、购买分别对应三个类目，每一年龄段对应一个系列。
增加对同系列数据突出展示的属性，具体可以增加emphasis:{focus:'series'}属性，实现鼠标滑过当前系列时的同系列高亮展示；emphasis:{focus:'series'}属性是echarts5鼠标滑过系列数据时的强调功能属性，能够对堆叠柱状图的当前选中项进行突出展示。
对鼠标滑过的提示信息进行自定义展示，例如，对于横向堆叠条，实现鼠标滑过时对数据的竖向比对展示。
本发明一个实施例的堆叠图数据处理的流程示意图如图3所示，定义一个空的系列数组(记作series_arr1)，并获取已有的系列数组(即已存的系列数组)series_arr2(S301)；循环(即遍历)已有的系列数组series_arr2(S302)，已有的系列数组series_arr2包括预设的各个系列；每次循环到一个系列后，循环已存的类目数组，已存的类目数组包括预设的多个类目，并创建一个数据对象obj＝{}(S303)；判断当前数据(记作cur)是否为与当前系列、当前类目对应的数据(S304)；若是，则设置obj.value为该数据cur(S305)，即，将该数据cur放入当前遍历中所创建的数据对象obj的值属性obj.value；否则，将数据cur作为自定义属性放入数据对象obj(S306)，需要说明的是，由于当前数据cur是根据当前遍历到的系列所取出的数据，即S304判断结果为否的情况，是表示当前数据cur属于当前系列但不属于当前类目；在设置obj.value为该数据cur或将数据cur作为自定义属性放入对象obj之后，将赋值好的obj放入系列数组series_arr1中(S307)；然后判断是否遍历完已有的系列数组series_arr2的所有系列(S308)；若是，则结束流程，若未遍历完系列数组series_arr2的所有系列，则返回到S302即循环已有的系列数组series_arr2的步骤以继续遍历。
通过图3的堆叠图数据处理流程，可以实现对于图表中的任一目标数据，将与目标数据所属系列和类目对应的数据对象的值属性赋值为目标数据，并将与目标数据属于相同系列但不同类目的其他数据作为自定义属性加入该数据对象。
本发明一个实施例的对鼠标滑过的提示信息进行自定义展示的流程示意图如图4所示，利用echart配置tooltip(CSS提示工具)提示，具体是获取当前数据对应的数据对象obj，判断当前提示数据是否为空，若是，则返回展示内容为空的消息，并结束流程；若否，则处理tooltip展示内容，具体地，将当前数据对应的数据对象obj中的自定义数据(自定义属性)组装为DOM元素并返回，然后结束流程。
本发明一个实施例的堆叠图数据展示效果示意图如图5所示，即当鼠标滑过，根据自定义tooltip的内容进行展示的实现效果，其中，对用户涉及多个年龄段：18至24岁、25至29岁、30至34岁、35至39岁、40至49岁、50岁以上、其他年龄段，用户按照行为分为曝光用户、浏览用户、购买用户，图表包括三行堆叠条，每一行堆叠条对应一种行为的用户，即三行堆叠条分别对应曝光用户、浏览用户、购买用户，每一行堆叠条包括用户年龄在上述各年龄段的分布情况，不同年龄段可分别以不同颜色的块显示，每一行不同颜色的块一起构成该行的堆叠条，该图表中，用户按照行为划分的类型为类目，每个颜色的块对应一个系列，即总共有三个类目：曝光用户、浏览用户、购买用户，每个类目的堆叠条包括分别对应各年龄段的系列，即总共有七个系列：18至24岁、25至29岁、30至34岁、35至39岁、40至49岁、50岁以上、其他年龄段。
当鼠标滑过例如40～49岁这一年龄段时，实现鼠标滑过当前系列时的同系列高亮展示，即对曝光用户、浏览用户、购买用户中对应40～49岁年龄段的这一系列均高亮展示，并且，在鼠标当前停留数据处以一个悬浮的子图里显示提示信息，即图5中虚线框中的内容，提示信息的内容具体包括40～49岁人群中曝光用户、浏览用户、购买用户的数据，这样便实现了对应同系列(40～49岁年龄段)不同类目(曝光用户、浏览用户、购买用户)之间的竖向比对展示。图5中该数据以比例为例，该比例表示40～49岁用户数占所属类目的所有用户数的比例，以曝光用户：21.23％为例，表示在各年龄段曝光用户数中，40～49岁用户曝光用户数的占比。通过悬浮的子图可以实现对不同类目且同系列的数据的竖向比对，即曝光用户、浏览用户、购买用户的40～49岁用户的数据比对。假设鼠标当前停留在曝光用户行、40～49岁这一系列的数据上，则该数据为目标数据，而浏览用户、购买用户的行中40～49岁这一系列的数据则为与该目标数据属于相同系列但不同类目的其他数据。
本发明实施例利用echarts5中的新特性emphasis:{focus:'series'}，使鼠标滑过当前系列项时所有坐标同系列高亮展示，指向性更明确；并对展示数据做二次加工，将需要使用到的其他坐标同系列数据放入，实现展示提示时的条形图竖向对比展示。
图6是根据本发明一个实施例的图表数据的展示装置的主要模块示意图。如图6所示，本发明一个实施例的图表数据的展示装置600主要包括：数据处理模块601、数据展示模块602。
数据处理模块601，用于对于图表中的任一目标数据，将与目标数据属于相同系列但不同类目的其他数据加入目标数据的附加字段；其中，在图表中，类目按照第一方向分布，每一类目对应预设数量的系列，且与同一类目对应的系列按照第二方向分布；
数据展示模块602，用于响应于收到的对目标数据的展示指令，将目标数据与附加字段中的其他数据进行比对展示。
数据处理模块601具体用于：创建与系列和类目对应的数据对象，将与目标数据所属系列和类目对应的第一数据对象的值属性赋值为目标数据，并将与目标数据属于相同系列但不同类目的其他数据作为自定义属性加入第一数据对象。
数据处理模块601在将与目标数据所属系列和类目对应的第一数据对象的值属性赋值为目标数据，并将与目标数据属于相同系列但不同类目的其他数据作为自定义属性加入第一数据对象时，可以通过执行如下的图表数据处理过程来实现：遍历已存的系列数组，并在遍历到每一系列时进一步遍历类目数组，对于当前遍历到的系列和类目创建对应的数据对象，在图表中的某一数据同时属于当前遍历到的系列和类目的情况下，则将该数据放入当前遍历中所创建的数据对象的值属性；在该数据属于当前遍历到的系列但不属于当前遍历到的类目的情况下，则将该数据放入当前遍历中所创建的数据对象的自定义属性。
数据展示模块602在将目标数据与附加字段中的其他数据进行比对展示之前，还根据展示指令获取第一数据对象，将第一数据对象中的自定义属性中的数据组装为用于展示的DOM元素。
数据处理模块601还可以用于：将与目标数据属于相同系列但不同类目的其他数据加入目标数据的附加字段之后，增加对同系列数据突出展示的属性.
数据展示模块602还可以用于：响应于收到的对目标数据的展示指令，将目标数据与附加字段中的其他数据在图表中突出展示。
数据展示模块602可以通过监听鼠标滑过事件接收对目标数据的展示指令，当有鼠标滑过图表上的目标数据时，将目标数据与附加字段中的其他数据比对展示在悬浮于图表的子图中。
另外，在本发明实施例中图表数据的展示装置的具体实施内容，在上面建立图表数据的展示方法中已经详细说明了，故在此重复内容不再说明。
图7示出了可以应用本发明实施例的图表数据的展示方法或图表数据的展示装置的示例性系统架构700。
如图7所示，系统架构700可以包括终端设备701、702、703，网络704和服务器705。网络704用以在终端设备701、702、703和服务器705之间提供通信链路的介质。网络704可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备701、702、703通过网络704与服务器705交互，以接收或发送消息等。终端设备701、702、703上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。
终端设备701、702、703可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。
服务器705可以是提供各种服务的服务器，例如对用户利用终端设备701、702、703所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的数据请求等数据进行分析等处理，并将处理结果(例如展示数据--仅为示例)反馈给终端设备。
需要说明的是，本发明实施例所提供的图表数据的展示方法一般由终端设备701、702、703执行，相应地，图表数据的展示装置一般设置于终端设备701、702、703中。
应该理解，图7中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
下面参考图8，其示出了适于用来实现本申请实施例的终端设备的计算机系统800的结构示意图。图8示出的终端设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。
如图8所示，计算机系统800包括中央处理单元(CPU)801，其可以根据存储在只读存储器(ROM)802中的程序或者从存储部分808加载到随机访问存储器(RAM)803中的程序而执行各种适当的动作和处理。在RAM 803中，还存储有系统800操作所需的各种程序和数据。CPU 801、ROM 802以及RAM 803通过总线804彼此相连。输入/输出(I/O)接口805也连接至总线804。
以下部件连接至I/O接口805：包括键盘、鼠标等的输入部分806；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分807；包括硬盘等的存储部分808；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分809。通信部分809经由诸如因特网的网络执行通信处理。驱动器810也根据需要连接至I/O接口805。可拆卸介质811，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器810上，以便于从其上读出的计算机程序根据需要被安装入存储部分808。
特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分809从网络上被下载和安装，和/或从可拆卸介质811被安装。在该计算机程序被中央处理单元(CPU)801执行时，执行本申请的系统中限定的上述功能。
需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。
附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括数据处理模块、数据展示模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，数据处理模块还可以被描述为“用于对于图表中的任一目标数据，将与所述目标数据属于相同系列但不同类目的其他数据加入所述目标数据的附加字段的模块”。
作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：对于图表中的任一目标数据，将与所述目标数据属于相同系列但不同类目的其他数据加入所述目标数据的附加字段；其中，在所述图表中，类目按照第一方向分布，每一类目对应预设数量的系列，且与同一类目对应的系列按照第二方向分布；响应于收到的对所述目标数据的展示指令，将所述目标数据与所述附加字段中的所述其他数据进行比对展示。
根据本发明实施例的技术方案，对于图表中的任一目标数据，将与目标数据属于相同系列但不同类目的其他数据加入目标数据的附加字段；其中，在图表中，类目按照第一方向分布，每一类目对应预设数量的系列，且与同一类目对应的系列按照第二方向分布；响应于收到的对目标数据的展示指令，将目标数据与附加字段中的其他数据进行比对展示。能够实现一个方向堆叠条图表在展示提示时可以进行在另一方向上的数据比对展示，且当鼠标滑过当前系列项时可实现所有坐标同系列数据突出展示，指向性更明确。
上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (14)

1.一种图表数据的展示方法，其特征在于，包括：
对于图表中的任一目标数据，将与所述目标数据属于相同系列但不同类目的其他数据加入所述目标数据的附加字段；其中，在所述图表中，类目按照第一方向分布，每一类目对应预设数量的系列，且与同一类目对应的系列按照第二方向分布；
响应于收到的对所述目标数据的展示指令，将所述目标数据与所述附加字段中的所述其他数据进行比对展示。
2.根据权利要求1所述的方法，其特征在于，所述将与所述目标数据属于相同系列但不同类目的其他数据加入所述目标数据的附加字段，包括：
创建与系列和类目对应的数据对象，将与所述目标数据所属系列和类目对应的第一数据对象的值属性赋值为所述目标数据，并将与所述目标数据属于相同系列但不同类目的其他数据作为自定义属性加入所述第一数据对象。
3.根据权利要求2所述的方法，其特征在于，将与所述目标数据所属系列和类目对应的第一数据对象的值属性赋值为所述目标数据，并将与所述目标数据属于相同系列但不同类目的其他数据作为自定义属性加入所述第一数据对象，通过执行如下的图表数据处理过程来实现：
遍历已存的系列数组，并在遍历到每一系列时进一步遍历类目数组，对于当前遍历到的系列和类目创建对应的数据对象，在图表中的某一数据同时属于当前遍历到的系列和类目的情况下，则将该数据放入当前遍历中所创建的数据对象的值属性；在该数据属于当前遍历到的系列但不属于当前遍历到的类目的情况下，则将该数据放入当前遍历中所创建的数据对象的自定义属性。
4.根据权利要求2或3所述的方法，其特征在于，将所述目标数据与所述附加字段中的所述其他数据进行比对展示之前，还包括：
根据所述展示指令获取所述第一数据对象，将所述第一数据对象中的所述自定义属性中的数据组装为用于展示的DOM元素。
5.根据权利要求1所述的方法，其特征在于，将与所述目标数据属于相同系列但不同类目的其他数据加入所述目标数据的附加字段之后，还包括：增加对同系列数据突出展示的属性；
所述方法还包括：
响应于收到的对所述目标数据的展示指令，将所述目标数据与所述附加字段中的所述其他数据在所述图表中突出展示。
6.根据权利要求1所述的方法，其特征在于，通过监听鼠标滑过事件接收对所述目标数据的展示指令，当有鼠标滑过所述图表上的所述目标数据时，将所述目标数据与所述附加字段中的所述其他数据比对展示在悬浮于所述图表的子图中。
7.一种图表数据的展示装置，其特征在于，包括：
数据处理模块，用于对于图表中的任一目标数据，将与所述目标数据属于相同系列但不同类目的其他数据加入所述目标数据的附加字段；其中，在所述图表中，类目按照第一方向分布，每一类目对应预设数量的系列，且与同一类目对应的系列按照第二方向分布；
数据展示模块，用于响应于收到的对所述目标数据的展示指令，将所述目标数据与所述附加字段中的所述其他数据进行比对展示。
8.根据权利要求7所述的装置，其特征在于，所述数据处理模块还用于：
创建与系列和类目对应的数据对象，将与所述目标数据所属系列和类目对应的第一数据对象的值属性赋值为所述目标数据，并将与所述目标数据属于相同系列但不同类目的其他数据作为自定义属性加入所述第一数据对象。
9.根据权利要求8所述的装置，其特征在于，所述数据处理模块还用于：在将与所述目标数据所属系列和类目对应的第一数据对象的值属性赋值为所述目标数据，并将与所述目标数据属于相同系列但不同类目的其他数据作为自定义属性加入所述第一数据对象时，通过执行如下的图表数据处理过程来实现：遍历已存的系列数组，并在遍历到每一系列时进一步遍历类目数组，对于当前遍历到的系列和类目创建对应的数据对象，在图表中的某一数据同时属于当前遍历到的系列和类目的情况下，则将该数据放入当前遍历中所创建的数据对象的值属性；在该数据属于当前遍历到的系列但不属于当前遍历到的类目的情况下，则将该数据放入当前遍历中所创建的数据对象的自定义属性。
10.根据权利要求8或9所述的装置，其特征在于，所述数据展示模块还用于：将所述目标数据与所述附加字段中的所述其他数据进行比对展示之前，根据所述展示指令获取所述第一数据对象，将所述第一数据对象中的所述自定义属性中的数据组装为用于展示的DOM元素。
11.根据权利要求7所述的装置，其特征在于，所述数据处理模块还用于：将与所述目标数据属于相同系列但不同类目的其他数据加入所述目标数据的附加字段之后，增加对同系列数据突出展示的属性；
所述数据展示模块还用于：
响应于收到的对所述目标数据的展示指令，将所述目标数据与所述附加字段中的所述其他数据在所述图表中突出展示。
12.根据权利要求7所述的装置，其特征在于，所述数据展示模块还用于：通过监听鼠标滑过事件接收对所述目标数据的展示指令，当有鼠标滑过所述图表上的所述目标数据时，将所述目标数据与所述附加字段中的所述其他数据比对展示在悬浮于所述图表的子图中。
13.一种电子设备，其特征在于，包括：
一个或多个处理器；
存储器，用于存储一个或多个程序，
当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如权利要求1-6中任一所述的方法。
14.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-6中任一所述的方法。
CN202111015078.7A 2021-08-31 2021-08-31 一种图表数据的展示方法和装置 Pending CN113655942A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111015078.7A CN113655942A (zh) 2021-08-31 2021-08-31 一种图表数据的展示方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111015078.7A CN113655942A (zh) 2021-08-31 2021-08-31 一种图表数据的展示方法和装置

Publications (1)

Publication Number Publication Date
CN113655942A true CN113655942A (zh) 2021-11-16

Family

ID=78482581

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111015078.7A Pending CN113655942A (zh) 2021-08-31 2021-08-31 一种图表数据的展示方法和装置

Country Status (1)

Country Link
CN (1) CN113655942A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116401310A (zh) * 2023-06-08 2023-07-07 西安中科天塔科技股份有限公司 一种柱状图堆叠显示方法及装置

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116401310A (zh) * 2023-06-08 2023-07-07 西安中科天塔科技股份有限公司 一种柱状图堆叠显示方法及装置
CN116401310B (zh) * 2023-06-08 2023-08-22 西安中科天塔科技股份有限公司 一种柱状图堆叠显示方法及装置

Similar Documents

Publication Publication Date Title
CN107809331B (zh) 识别异常流量的方法和装置
CN108153670B (zh) 一种接口测试方法、装置及电子设备
US11132114B2 (en) Method and apparatus for generating customized visualization component
CN109901987B (zh) 一种生成测试数据的方法和装置
US20140337808A1 (en) Space Constrained Small Format Visual Analytic Labeling
CN113076153B (zh) 一种接口调用方法和装置
CN111045653A (zh) 系统生成方法、装置、计算机可读介质及电子设备
CN113031946A (zh) 一种渲染页面组件的方法和装置
CN111984234A (zh) 一种处理工单的方法和装置
CN111752834A (zh) 自动化测试方法和装置
CN113655942A (zh) 一种图表数据的展示方法和装置
CN113989058A (zh) 一种服务生成方法和装置
CN112817562A (zh) 业务处理的方法和装置
CN113837194A (zh) 图像处理方法、图像处理装置、电子设备以及存储介质
WO2023236795A1 (zh) 百科词条处理方法、装置、电子设备、介质及程序产品
CN115563942A (zh) 一种合同生成方法、装置、电子设备及计算机可读介质
CN113553123B (zh) 数据处理方法、装置、电子设备及存储介质
CN110888583B (zh) 页面显示方法、系统、装置和电子设备
CN112947918A (zh) 数据展示方法和装置
CN113077316A (zh) 一种数据展示方法和装置
CN112508284A (zh) 展示物料预处理方法、投放方法、系统、装置与设备
CN112308074A (zh) 用于生成缩略图的方法和装置
CN111199437A (zh) 一种数据处理方法和装置
CN111367898A (zh) 数据处理方法、装置、系统、电子设备及存储介质
CN111488537A (zh) 一种页面展示的方法和装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination