基于组件的动态图表看板展示方法及相关设备与流程

1.本技术涉及数据展示技术领域，尤其涉及一种基于组件的动态图表看板展示方法及相关设备。


背景技术：

2.数据可视化作为大数据分析最热门的研究领域之一，是研究如何利用图表、图形、地图等视觉元素，展现数据中隐含的信息，发掘数据中所包含规律的过程。将数据分析结果可视化能够帮助人们从信息中提取知识，从知识中收获价值。
3.目前，图表进行展示大都采用静态展示方法。通过拖拽相应组件并链接数据源即可对数据进行展示，虽然看似简便，但是如果展示的数据类型、图表类型或背景显示颜色、logo等出现变化时，需要大量的人力去维护这些静态看板，对于不同的用户或不同的应用场景需要重新开发适应性的展示页面，给开发人员带来了大量重复性的开发工作。


技术实现要素：

4.有鉴于此，本技术的目的在于提出一种基于组件的动态图表看板展示方法及相关设备，实现动态图表看板的自动生成，无需额外开发工作即可使看板适应不同的应用场景，提升看板组件的复用率。
5.本技术的第一方面提供了一种基于组件的动态图表看板展示方法，包括：
6.获取目标指标；
7.根据所述目标指标的图表属性确定与其关联的指标集合，其中，所述指标集合为根据历史指标的图表属性预先构建的；
8.获取所述目标指标待展示的应用场景，根据所述应用场景确定所述目标指标的待展示的图表类型；
9.根据所述图表类型从所述指标集合对应的组件集合中选取关联组件，其中，所述组件集合为预先构建的；
10.利用所述关联组件在所述应用场景的看板上对所述目标指标进行展示。
11.可选的，所述指标集合为根据历史指标的图表属性预先构建的，包括：
12.获取所述历史指标的全部图表属性；
13.对所述全部图表属性进行分类，根据分类结果对所述历史指标进行划分，得到多个指标集合。
14.可选的，所述组件集合为预先构建的，包括：
15.根据所述多个指标集合中的每个所述指标集合对应的图表属性，从预先构建的组件库中选择相应的组件和/或组件组合合并作为与该所述指标集合对应的组件集合，其中，所述组件库中的每个组件或组件组合均为预先开发的。
16.可选的，所述组件集合中包括单组件和组件组合，所述根据所述图表类型从所述指标集合对应的组件集合中选取关联组件，包括：
17.根据所述图表类型从所述组件集合中选取与所述图表类型对应的单组件或组件组合。
18.可选的，所述利用所述关联组件在所述应用场景的看板上对所述目标指标进行展示，包括：
19.根据所述应用场景，确定所述关联组件在看板中的宽度占比，根据所述宽度占比对所述目标指标进行展示。
20.可选的，所述根据所述宽度占比对所述目标指标进行展示，包括：
21.响应于所述关联组件为所述单组件，根据所述单组件在看板中的宽度占比对所述目标指标进行展示；
22.响应于所述关联组件为所述组合组件，根据所述组合组件在看板中的宽度占比以及所述组合组件中的每个组件的占比系数对所述目标指标进行展示。
23.可选的，所述应用场景至少包括大屏显示端、pc端和移动端。
24.本技术的第二方面提供了一种组件的动态图表看板展示装置，包括：
25.指标获取模块，被配置为获取目标指标；
26.指标集合确定模块，被配置为根据所述目标指标的图表属性确定与其关联的指标集合，其中，所述指标集合为根据历史指标的图表属性预先构建的；
27.图表类型确定模块，被配置为获取所述目标指标待展示的应用场景，根据所述应用场景确定所述目标指标的待展示的图表类型；
28.组件选取模块，被配置为根据所述图表类型从所述指标集合对应的组件集合中选取关联组件，其中，所述组件集合为预先构建的；
29.展示模块，被配置为利用所述关联组件在所述应用场景的看板上对所述目标指标进行展示。
30.本技术的第三方面提供了一种电子设备，包括存储器、处理器及存储在所述存储器上并可由所述处理器执行的计算机程序，所述处理器在执行所述计算机程序时实现如上所述的方法。
31.本技术的第四方面提供了一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令用于使计算机执行如上所述的方法。
32.从上面所述可以看出，本技术提供的基于组件的动态图表看板展示方法及相关设备，获取目标指标，根据所述目标指标的图表属性确定与其关联的指标集合，再根据应用场景确定所述目标指标的待展示的图表类型，根据图表类型从所述指标集合对应的组件集合中选取关联组件，利用关联组件对目标指标在看板上进行展示。通过配置动态组件的方式实现图表的展示，有效提升了组件的复用率，同时，图表展示时可根据不同应用场景进行自适应，本技术提供的动态图表看板展示方法使用范围较广，能够根据业务需求灵活调整，避免大量重复开发工作，减少开发人员的开发工作量。
附图说明
33.为了更清楚地说明本技术或相关技术中的技术方案，下面将对实施例或相关技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附
图获得其他的附图。
34.图1为本技术实施例的基于组件的动态图表看板展示方法的流程示意图；
35.图2为本技术实施例的指标集合构建方法的流程示意图；
36.图3为本技术实施例的基于组件的动态图表看板展示装置的结构示意图；
37.图4为本技术实施例的电子设备结构示意图。
具体实施方式
38.为使本技术的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本技术进一步详细说明。
39.需要说明的是，除非另外定义，本技术实施例使用的技术术语或者科学术语应当为本技术所属领域内具有一般技能的人士所理解的通常意义。本技术实施例中使用的“第一”、“第二”以及类似的词语并不表示任何顺序、数量或者重要性，而只是用来区分不同的组成部分。“包括”或者“包含”等类似的词语意指出现该词前面的元件或者物件涵盖出现在该词后面列举的元件或者物件及其等同，而不排除其他元件或者物件。“连接”或者“相连”等类似的词语并非限定于物理的或者机械的连接，而是可以包括电性的连接，不管是直接的还是间接的。“上”、“下”、“左”、“右”等仅用于表示相对位置关系，当被描述对象的绝对位置改变后，则该相对位置关系也可能相应地改变。
40.如背景技术所述，目前对于数据的展示通常采用静态页面，静态页面中的图表是固定的，展示的指标也是固定的，新增指标或图表类型变化后，需要开发人员对静态页面展示的图表进行手动修改，因此带来大量的页面维护工作量。
41.有鉴于此，本技术提出了一种基于组件的动态图表看板展示方法，能够通过动态配置组件对图表进行展示，根据业务需求灵活调整看板展示页面，提高组件的复用率。
42.以下结合附图来详细说明本技术的实施例。
43.本技术提供了一种基于组件的动态图表看板展示方法，参考图1，包括以下步骤：
44.步骤102、获取目标指标。目标指标可以是用户根据业务需求制定的，目标指标可以为一个也可以为多个，当存在多个目标指标时，多个目标指标可以以指标树的形式展示，在指标树中可以清楚的看出目标指标之间的父子关系，以便对后续目标指标在页面上的展示提供逻辑基础。
45.步骤104、根据所述目标指标的图表属性确定与其关联的指标集合，其中，所述指标集合为根据历史指标的图表属性预先构建的。
46.具体的，图表属性表示用于展示某个目标指标的所有图表类型，例如柱形图、折线图或饼图等。每个目标指标可以对应不同的图表类型，既可以通过柱形图展示，也可以通过折线图展示，或者可以通过不同的柱形图展示等等，本实施例只是给出示例性说明，在另一些实施例中还可以包括其他图表类型，此处不做具体限制。指标集合为预先构建的，指标集合与图表属性相对应，确定了目标指标的图表属性时，即可根据图表属性将目标指标划分至相应的指标集合中，目标指标则继承该指标集合中对应的所有组件或组件组合。
47.步骤106、获取所述目标指标待展示的应用场景，根据所述应用场景确定所述目标指标的待展示的图表类型。
48.具体的，当应用场景不同时，页面展示布局也会出现变化，可以理解的是，当在大
屏展示时，每一行可以展示较多的图表，当在移动端展示时，由于受到移动端屏幕大小的限制，在移动端页面的每一行可能只展示一个图表。当每行图表展示的数量不同时，图表的类型也会发生变化。由于不同应用场景屏幕大小的不同，每个目标指标可以采用不同的图表类型进行展示，例如，在大屏端的一行中，可以通过采用3个图表以不同维度去展示目标指标，在移动端的一行中，只能通过反映单一维度的一个图表展示目标指标。因此，在对目标指标进行展示前，需要确定目标指标展示的应用场景，根据应用场景确定目标指标待展示的图表类型。
49.步骤108、根据所述图表类型从所述指标集合对应的组件集合中选取关联组件，其中，所述组件集合为预先构建的。
50.具体的，指标集合与组件集合是一一对应的，确定了指标集合，该目标指标即继承了相应的组件集合，根据目标指标的图表类型从组件集合中选取关联组件以对目标指标进行展示。这样可以快速定位用于展示目标指标的组件集合，缩小选择范围，完成关联组件的选择。
51.步骤110、利用所述关联组件在所述应用场景的看板上对所述目标指标进行展示。
52.确定了关联组件后，即可通过配置组件的方式对目标指标进行展示，如果目标指标需要改变显示背景颜色或字体颜色等特征时，只需通过关联组件读取该目标指标的配置文件即可完成修改，调整方式灵活方便，组件复用率较高。
53.基于上述步骤102至步骤110，可以看出，本实施例通过配置动态组件的方式实现图表的展示，使用范围较广，有效提升了组件的复用率，能够根据业务需求灵活调整，避免大量重复开发工作，减少开发人员的开发工作量。
54.在一些实施例中，所述指标集合为根据历史指标的图表属性预先构建的，参考图2，包括以下步骤：
55.步骤202、获取所述历史指标的全部图表属性。
56.步骤204、对所述全部图表属性进行分类，根据分类结果对所述历史指标进行划分，得到多个指标集合。
57.具体的，根据获取到的历史指标，整理全部历史指标的图表属性，将图表属性相同或者相近的图表属性归为一类，并将同一类别的图表属性对应的历史指标划分为一个指标集合，进而得到多个指标集合，每个指标集合中的所有指标对应相同的图表属性。这样，根据图表属性先对历史指标进行分类，当增加新的指标时，可以根据图表属性快速找到新增指标关联的指标集合，有利于后续选取关联组件以对目标指标进行展示。
58.在一些实施例中，所述组件集合为预先构建的，包括：
59.根据所述多个指标集合中的每个所述指标集合对应的图表属性，从预先构建的组件库中选择相应的组件和/或组件组合合并作为与该所述指标集合对应的组件集合，其中，所述组件库中的每个组件或组件组合均为预先开发的。
60.具体的，确定了多个指标集合后，需要对每个指标集合赋予关联组件。而关联组件存储在组件库中，组件库中的每个组件均是开发人员根据常用的功能进行开发的代码程序，提前开发组件可以降低重复编写的代码量，提高代码的复用率。将指标集合中每个指标对应的关联组件选取出来，并经过去重合并后即可得到该指标集合对应的组件集合。
61.在一些实施例中，所述组件集合中包括单组件和组件组合，所述根据所述图表类
型从所述指标集合对应的组件集合中选取关联组件，包括：
62.根据所述图表类型从所述组件集合中选取与所述图表类型对应的单组件或组件组合。
63.具体的，组件集合中的组件包括两种类型，一种为单组件，一种为组合组件，单组件可以对应具有单一图表形式的图表类型，例如单组件对应柱形图；而组合组件可以对应具有多种图表形式的图表类型，例如多组件对应柱形图和散点图等，也即通过组合组件可以多维度的展示目标指标。开发人员提前将经常一起使用的组件组合在一起，打包为组件组合，方便用户展示相关目标指标。
64.需要说明的是，每一种图表类型对应单组件或组件组合，例如，同一个目标指标，当在大屏展示时的图表类型包括三个形式的图表，需要用到组件组合来完成展示，该组件组合中包括三个组件，每个组件用于展示一个形式的图表；当在pc端展示时的图表类型包括两个形式的图表，同样需要用到组件组合来完成展示，该组件组合中包括两个组件；当在移动端展示时的图表类型包括一个形式的图表，则只需要单组件即可完成该目标指标的展示。
65.在一些实施例中，所述利用所述关联组件在所述应用场景的看板上对所述目标指标进行展示，包括：
66.根据所述应用场景，确定所述关联组件在看板中的宽度占比，根据所述宽度占比对所述目标指标进行展示。
67.本实施例中采用bootstrap-web框架开发展示页面，并定义展示页面一行包括24个栅格，超过24栅格后，自动转到下一行进行展示。
68.针对一种应用场景，定义每个图表类型在该应用场景中的栅格数。在其他应用场景中，可以根据系数折算得到图表类型占据的栅格数。例如，一张图表在大屏上占据6个栅格，在pc端占据12个栅格，在移动端占据24栅格，不同的应用场景之间存在折算系数。这样就实现了图表在不同应用场景下的自动切换。可以避免开发人员针对每一种应用场景进行设置，降低开发人员的工作量，并提高了展示页面的自适应性。关联组件对应图表类型，确定了目标指标的应用场景和图表类型后，可以确定图表类型或关联组件在看板中的宽度占比，例如规定某一图表类型宽度占比为8个栅格，则目标指标对应的图表类型占据展示页面的1/3行。
69.在一些实施例中，所述根据所述宽度占比对所述目标指标进行展示，包括：
70.响应于所述关联组件为所述单组件，根据所述单组件在看板中的宽度占比对所述目标指标进行展示；
71.响应于所述关联组件为所述组合组件，根据所述组合组件在看板中的宽度占比以及所述组合组件中的每个组件的占比系数对所述目标指标进行展示。
72.具体的，当图表类型对应的关联组件为单组件时，只需根据单组件的宽度占比进行展示即可，例如单组件宽度占比为8个栅格，则目标指标对应的图表类型展示占据1/3行。当图表类型对应的关联组件为组合组件时，需要提前在组合组件中确定每个组件的占比系数，例如，组合组件中包括两个组件，两个组件的占比系数为1：3，若组合组件占据8个栅格，则组合组件中的两个组件分别占据2个栅格和6个栅格。对目标指标进行展示时，如果为组合组件，则需要考虑到组合组件中每个组件的宽度占比，进而对目标指标进行展示。
73.在一些实施例中，所述应用场景至少包括大屏显示端、pc端和移动端。本实施例中的应用场景只是作为示例性说明，在另一些实施例中，本领域技术人员能够在本技术的基础上，将动态图表看板展示方法适应性应用到其他应用场景中，以上均在本技术的保护范围内。
74.需要说明的是，本技术实施例的方法可以由单个设备执行，例如一台计算机或服务器等。本实施例的方法也可以应用于分布式场景下，由多台设备相互配合来完成。在这种分布式场景的情况下，这多台设备中的一台设备可以只执行本技术实施例的方法中的某一个或多个步骤，这多台设备相互之间会进行交互以完成所述的方法。
75.需要说明的是，上述对本技术的一些实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于上述实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。
76.本技术还提供了一种基于组件的动态图表看板展示装置。
77.参考如3，所述基于组件的动态图表看板展示装置，包括：
78.指标获取模块302，被配置为获取目标指标；
79.指标集合确定模块304，被配置为根据所述目标指标的图表属性确定与其关联的指标集合，其中，所述指标集合为根据历史指标的图表属性预先构建的；
80.图表类型确定模块306，被配置为获取所述目标指标待展示的应用场景，根据所述应用场景确定所述目标指标的待展示的图表类型；
81.组件选取模块308，被配置为根据所述图表类型从所述指标集合对应的组件集合中选取关联组件，其中，所述组件集合为预先构建的；
82.展示模块310，被配置为利用所述关联组件在所述应用场景的看板上对所述目标指标进行展示。
83.在一些实施例中，所述指标集合为根据历史指标的图表属性预先构建的，包括：
84.获取所述历史指标的全部图表属性；
85.对所述全部图表属性进行分类，根据分类结果对所述历史指标进行划分，得到多个指标集合。
86.在一些实施例中，所述组件集合为预先构建的，包括：
87.根据所述多个指标集合中的每个所述指标集合对应的图表属性，从预先构建的组件库中选择相应的组件和/或组件组合合并作为与该所述指标集合对应的组件集合，其中，所述组件库中的每个组件或组件组合均为预先开发的。
88.在一些实施例中，所述组件集合中包括单组件和组件组合，所述组件选取模块308还被配置为，
89.根据所述图表类型从所述组件集合中选取与所述图表类型对应的单组件或组件组合。
90.在一些实施例中，所述展示模块310还被配置为，根据所述应用场景，确定所述关联组件在看板中的宽度占比，根据所述宽度占比对所述目标指标进行展示。
91.在一些实施例中，所述展示模块310还被配置为，响应于所述关联组件为所述单组
件，根据所述单组件在看板中的宽度占比对所述目标指标进行展示；
92.响应于所述关联组件为所述组合组件，根据所述组合组件在看板中的宽度占比以及所述组合组件中的每个组件的占比系数对所述目标指标进行展示。
93.在一些实施例中，所述应用场景至少包括大屏显示端、pc端和移动端。
94.为了描述的方便，描述以上装置时以功能分为各种模块分别描述。当然，在实施本技术时可以把各模块的功能在同一个或多个软件和/或硬件中实现。
95.上述实施例的装置用于实现前述任一实施例中相应的基于组件的动态图表看板展示方法，并且具有相应的方法实施例的有益效果，在此不再赘述。
96.本技术还提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上任意一实施例所述的基于组件的动态图表看板展示方法。
97.图4示出了本实施例所提供的一种更为具体的电子设备硬件结构示意图，该设备可以包括：处理器1010、存储器1020、输入/输出接口1030、通信接口1040和总线1050。其中处理器1010、存储器1020、输入/输出接口1030和通信接口1040通过总线1050实现彼此之间在设备内部的通信连接。
98.处理器1010可以采用通用的cpu(central processing unit，中央处理器)、微处理器、应用专用集成电路(application specific integrated circuit，asic)、或者一个或多个集成电路等方式实现，用于执行相关程序，以实现本说明书实施例所提供的技术方案。
99.存储器1020可以采用rom(read only memory，只读存储器)、ram(random access memory，随机存取存储器)、静态存储设备，动态存储设备等形式实现。存储器1020可以存储操作系统和其他应用程序，在通过软件或者固件来实现本说明书实施例所提供的技术方案时，相关的程序代码保存在存储器1020中，并由处理器1010来调用执行。
100.输入/输出接口1030用于连接输入/输出模块，以实现信息输入及输出。输入输出/模块可以作为组件配置在设备中(图中未示出)，也可以外接于设备以提供相应功能。其中输入设备可以包括键盘、鼠标、触摸屏、麦克风、各类传感器等，输出设备可以包括显示器、扬声器、振动器、指示灯等。
101.通信接口1040用于连接通信模块(图中未示出)，以实现本设备与其他设备的通信交互。其中通信模块可以通过有线方式(例如usb、网线等)实现通信，也可以通过无线方式(例如移动网络、wifi、蓝牙等)实现通信。
102.总线1050包括一通路，在设备的各个组件(例如处理器1010、存储器1020、输入/输出接口1030和通信接口1040)之间传输信息。
103.需要说明的是，尽管上述设备仅示出了处理器1010、存储器1020、输入/输出接口1030、通信接口1040以及总线1050，但是在具体实施过程中，该设备还可以包括实现正常运行所必需的其他组件。此外，本领域的技术人员可以理解的是，上述设备中也可以仅包含实现本说明书实施例方案所必需的组件，而不必包含图中所示的全部组件。
104.上述实施例的电子设备用于实现前述任一实施例中相应的基于组件的动态图表看板展示方法，并且具有相应的方法实施例的有益效果，在此不再赘述。
105.本技术还提供了一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介
质存储计算机指令，所述计算机指令用于使所述计算机执行如上任一实施例所述的基于组件的动态图表看板展示方法。
106.本实施例的计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。
107.上述实施例的存储介质存储的计算机指令用于使所述计算机执行如上任一实施例所述的基于组件的动态图表看板展示方法，并且具有相应的方法实施例的有益效果，在此不再赘述。
108.所属领域的普通技术人员应当理解：以上任何实施例的讨论仅为示例性的，并非旨在暗示本技术的范围(包括权利要求)被限于这些例子；在本技术的思路下，以上实施例或者不同实施例中的技术特征之间也可以进行组合，步骤可以以任意顺序实现，并存在如上所述的本技术实施例的不同方面的许多其它变化，为了简明它们没有在细节中提供。
109.另外，为简化说明和讨论，并且为了不会使本技术实施例难以理解，在所提供的附图中可以示出或可以不示出与集成电路(ic)芯片和其它部件的公知的电源/接地连接。此外，可以以框图的形式示出装置，以便避免使本技术实施例难以理解，并且这也考虑了以下事实，即关于这些框图装置的实施方式的细节是高度取决于将要实施本技术实施例的平台的(即，这些细节应当完全处于本领域技术人员的理解范围内)。在阐述了具体细节(例如，电路)以描述本技术的示例性实施例的情况下，对本领域技术人员来说显而易见的是，可以在没有这些具体细节的情况下或者这些具体细节有变化的情况下实施本技术实施例。因此，这些描述应被认为是说明性的而不是限制性的。
110.尽管已经结合了本技术的具体实施例对本技术进行了描述，但是根据前面的描述，这些实施例的很多替换、修改和变型对本领域普通技术人员来说将是显而易见的。例如，其它存储器架构(例如，动态ram(dram))可以使用所讨论的实施例。
111.本技术实施例旨在涵盖落入所附权利要求的宽泛范围之内的所有这样的替换、修改和变型。因此，凡在本技术实施例的精神和原则之内，所做的任何省略、修改、等同替换、改进等，均应包含在本技术的保护范围之内。