CN111274306A - 一种基于象形图组件的数据展示方法、系统及储存介质 - Google Patents
一种基于象形图组件的数据展示方法、系统及储存介质 Download PDFInfo
- Publication number
- CN111274306A CN111274306A CN202010042824.0A CN202010042824A CN111274306A CN 111274306 A CN111274306 A CN 111274306A CN 202010042824 A CN202010042824 A CN 202010042824A CN 111274306 A CN111274306 A CN 111274306A
- Authority
- CN
- China
- Prior art keywords
- data
- pictogram
- assembly
- display
- custom
- 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
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/26—Visual data mining; Browsing structured data
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开一种基于象形图组件的数据展示方法、系统及存储介质，所述方法包括：接收到数据展示命令时，获取待展示的列表数据；当所述列表数据包含有自定义配置数据时，将所述自定义配置数据转换为象形图组件能识别的数据格式；加载所述数据格式，按照所述数据格式对应的标准样式结构展示所述列表数据。本发明旨在以用户自定义象形图展示数据，提高扩展性，同时采用统一标准样式结构，只需要提供数据就可简洁且直观地展示，无需专业开发人员，降低成本，提高用户体验。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种基于象形图组件的数据展示方法、系统及储存介质。
背景技术
随着数据可视化的兴起，数据如何更加直观的呈现成为了必须思考的问题。基于此类问题的出现，各种开源的图表组件库也随之发展，但是现有技术中图表组件的配置项十分繁杂，需要专门的开发人员进行修改，开发效率低，无法实现复用，同时风格样式杂乱，无法简洁直观展示用户所需数据，给用户带来极低的体验。
因此，现有技术还有待发展和改进。
发明内容
为了解决现有技术中开发效率低、风格样式杂乱以及用户体验低的技术问题，本发明提出一种基于象形图组件的数据展示方法、系统及储存介质，旨在以用户自定义象形图展示数据，提高扩展性，同时采用统一标准样式结构，只需要提供数据就可简洁且直观地展示，无需专业开发人员，降低成本，提高用户体验。
本发明通过以下技术方案实现的：
一种基于象形图组件的数据展示方法，所述基于象形图组件的数据展示方法包括：
接收到数据展示命令时，获取待展示的列表数据；
当所述列表数据包含有自定义配置数据时，将所述自定义配置数据转换为象形图组件能识别的数据格式；
加载所述数据格式，按照所述数据格式对应的标准样式结构展示所述列表数据。
所述的基于象形图组件的数据展示方法，其中，所述接收到数据展示命令时，获取待展示的列表数据之前包括：
通过VUE框架对所述象形图组件进行封装，得到标准样式结构。
所述的基于象形图组件的数据展示方法，其中，所述标准样式结构为左侧显示若干行数据名称项，右侧显示每个数据名称项对应的统计数值，所述统计数值以百分比或数字分数显示，中间侧显示所述统计数值对应的象形图图像。
所述的基于象形图组件的数据展示方法，其中，所述标准样式结构中默认的统计数值以百分比显示。
所述的基于象形图组件的数据展示方法，其中，所述自定义配置数据至少包括显示数据和自定义样式配置数据中的一种，所述显示数据至少包括数据名称、最大值以及当前值。
所述的基于象形图组件的数据展示方法，当自定义配置数据仅包括显示数据时，所述当所述列表数据包含有自定义配置数据时，将所述自定义配置数据转换为象形图组件能识别的数据格式具体包括：
当所述列表数据仅包括显示数据时，获取系统默认的样式配置数据；
根据所述默认的样式配置数据提取所述标准样式结构对应的配置项；
根据所述标准样式结构中象形图样式总数量，计算所述显示数据对应的象形图样式数量；
将所述象形图样式数量转换为所述象形图组件能识别的象形图图像，所述象形图图像显示所述象形图样式数量。
所述的基于象形图组件的数据展示方法，其中，当自定义配置数据仅包括自定义样式配置数据时，所述当所述列表数据包含有自定义配置数据时，将所述自定义配置数据转换为象形图组件能识别的数据格式具体包括：
当自定义配置数据仅包括自定义样式配置数据时，根据所述自定义样式配置数据提取标准样式结构对应的配置项；
获取系统默认的显示数据，其中，所述默认的显示数据中最大值与当前值均为0；
将所述默认的显示数据转换为所述象形图组件能识别的象形图图像，所述象形图图像不显示象形图样式数量。
所述的基于象形图组件的数据展示方法，其中，所述根据所述数据格式加载所述列表数据，按照所述数据格式对应的自定义样式结构展示所述列表数据具体包括：
通过所述象形图组件加载所述象形图图像；
采用grid布局，加载所述配置项，渲染并绘制成标准样式结构，同时按照所述标准样式结构显示所述象形图图像。
本发明还提供一种系统，所述系统包括：处理器以及与所述处理器连接的存储器，所述存储器上存储有并可在所述处理器上运行的基于象形图组件的数据展示程序，所述基于象形图组件的数据展示程序被所述处理器执行时，实现上述所述的基于象形图组件的数据展示方法。
本发明还提供一种存储介质，所述存储介质存储有基于象形图组件的数据展示程序，所述基于象形图组件的数据展示程序被处理器执行时，实现上述所述的基于象形图组件的数据展示方法
本发明的有益效果在于：
本发明提供的一种基于象形图组件的数据展示方法、系统及存储介质，所述方法包括：接收到数据展示命令时，获取待展示的列表数据；当所述列表数据包含有自定义配置数据时，将所述自定义配置数据转换为象形图组件能识别的数据格式；加载所述数据格式，按照所述数据格式对应的标准样式结构展示所述列表数据。本发明旨在以用户自定义象形图展示数据，提高扩展性，同时采用统一标准样式结构，只需要提供数据就可简洁且直观地展示，无需专业开发人员，降低成本，提高用户体验。
附图说明
图1是本发明基于象形图组件的数据展示方法的流程图；
图2是本发明标准样式结构展示的一具体实施例图；
图3是本发明中的系统的功能原理框图。
具体实施方式
为使本发明的目的、技术方案及效果更加清楚、明确，以下参照附图并举实施例对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
本发明提出一种基于象形图组件的数据展示方法，应用于系统或终端，如手机或者个人电脑等终端上显示。
请参考图1，图1是本发明提供的一种基于象形图组件的数据展示方法的流程图，应该说明的是，本发明实施方式的漫游计费方法并不限于图1所示的流程图中的步骤及顺序，根据不同的需求，流程图中的步骤可以增加、移除或者改变顺序。
如图1所示，本发明提出的一种基于象形图组件的数据展示方法包括：
S10，接收到数据展示命令时，获取待展示的列表数据。
在本发明实施例中，预先通过VUE框架对所述象形图组件进行封装，得到标准样式结构。所述标准样式结构为左侧显示若干行数据名称项，右侧显示每个数据名称项对应的统计数值，所述统计数值以百分比或数字分数显示，中间侧显示所述统计数值对应的象形图图像。在本实施例中，所述象形图图像以象形柱样式显示的象形图图像。例如，所述标准样式结构如图2所示。其中，所述标准样式结构中默认的统计数值以百分比显示。具体地，所述标准样式结构中的配置项包括gridColumNum:容器内部象形柱的数量(内部按多少比例划分)、ContentBg:容器背景色、titleSize:字体大小、titleColor:字体颜色、valueSize:右侧具体数值的字体大小、valueColor:右侧具体数值的字体颜色、showValue:是否显示右侧的具体数值、linearBorder:边框渐变色、linearContent:内部内容区域的渐变色、isPercentage:数值是否以百分比方式显示等。
S20，当所述列表数据包含有自定义配置数据时，将所述自定义配置数据转换为象形图组件能识别的数据格式。
在本发明实施例中，所述自定义配置数据至少包括显示数据和自定义样式配置数据中的一种，所述显示数据至少包括数据名称、最大值以及当前值。其中，所述最大值以及当前值用数字表示，所述最大值表示该数据名称项对应的总量，所述当前值表示该数据名称项对应的已完成的量。如图2中右侧显示的2/11数据，11表示最大值，2表示当前值。
该显示数据通过展示数据接口导入到封装后的标准样式结构，其该展示数据接口用于数据名称、完成率等的呈现。在数据名称项展示时，可修改对应的配置项改变呈现内容的形式，如选择超出部分自动换行显示的形式。
该自定义样式配置数据通过呈现样式的配置接口导入至封装后的标准样式结构，这样，用户可自定义配置象形图的渐变色、象形柱的数量、间距等，以实现根据实际需求修改配置项来改变风格样式，使得样式呈现方式多样化。
具体地，1、针对当自定义配置数据仅包括显示数据时，
所述当所述列表数据包含有自定义配置数据时，将所述自定义配置数据转换为象形图组件能识别的数据格式具体包括：
当所述列表数据仅包括显示数据时，获取系统默认的样式配置数据；
根据所述默认的样式配置数据提取所述标准样式结构对应的配置项；
根据所述标准样式结构中象形图样式总数量，计算所述显示数据对应的象形图样式数量；
将所述象形图样式数量转换为所述象形图组件能识别的象形图图像，所述象形图图像显示所述象形图样式数量。
其中，所述象形图组件是用于识别和转化统计数值以象形图图像的方式显示。也就是说，在导入数据中没有自定义样式配置数据，则采用系统默认的样式配置数据(标准样式结构对应的样式配置数据)进行渲染和绘制。然后通过所述象形图组件将用户导入的显示数据所统计过后的统计数值以象形柱图的方式显示。例如，自定义该象形图样式为象形柱，设置象形图柱总数量为100，显示数据中最大值为25，当前值为1，则通过公式：象形图图像中象形柱数量＝象形图柱总数量*当前值/最大值，计算其象形图图像中象形柱数量＝100*1/25＝4。
这样，用户可直观且简洁的获取该数据名称对应的统计信息，方便快捷，无需繁杂操作。
2、针对当自定义配置数据仅包括自定义样式配置数据时，
所述当所述列表数据包含有自定义配置数据时，将所述自定义配置数据转换为象形图组件能识别的数据格式具体包括：
当自定义配置数据仅包括自定义样式配置数据时，根据所述自定义样式配置数据提取标准样式结构对应的配置项；
获取系统默认的显示数据，其中，所述默认的显示数据中最大值与当前值均为0；
将所述默认的显示数据转换为所述象形图组件能识别的象形图图像，所述象形图图像不显示象形图样式数量。
也就是说，在导入的数据中没有显示数据，采用系统默认的显示数据，即标准样式结构对应的展示的最大值和当前值均为0。而其象形图图像中不显示象形图样式，即不显示象形柱，为空值。其标准样式结构右侧以0展示。
S30，加载所述数据格式，按照所述数据格式对应的标准样式结构展示所述列表数据。
基于步骤S20，所述根据所述数据格式加载所述列表数据，按照所述数据格式对应的自定义样式结构展示所述列表数据具体包括：通过所述象形图组件加载所述象形图图像；采用grid布局，加载所述配置项，渲染并绘制成标准样式结构，同时按照所述标准样式结构显示所述象形图图像。
这样，以用户自定义象形图展示数据，提高扩展性，同时采用统一标准样式结构，只需要提供数据就可简洁且直观地展示，无需专业开发人员，降低成本，提高用户体验。
实施例二
请参考图3，基于上述的所述基于象形图组件的数据展示方法，本发明还提出一种系统100，所述系统100包括处理器11以及与所述处理器11连接的存储器12。图3仅示出了所述系统100的部分组件，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。
所述存储器12在一些实施例中可以是系统的内部存储单元，例如内存。所述存储器12在另一些实施例中也可以是外部存储设备，例如配备的插接式U盘，智能存储卡(SmartMedia Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器12还可以既包括内部存储单元也包括外部存储设备。所述存储器12用于存储安装于所述系统的应用软件及各类数据，例如所述基于象形图组件的数据展示的程序代码等。所述存储器12还可以用于暂时地存储已经输出或者将要输出的数据。在一实施例中，存储器12上存储有基于象形图组件的数据展示的程序，该基于象形图组件的数据展示的程序可被处理器11所执行，从而实现本申请中基于象形图组件的数据展示方法，具体如上述方法所述。
所述处理器11在一些实施例中可以是一中央处理器(Central Processing Unit,CPU)，微处理器，手机基带处理器或其他数据处理芯片，用于运行所述存储器12中存储的程序代码或处理数据，例如执行所述基于象形图组件的数据展示方法等，具体如上述方法所述。
基于上述的基于象形图组件的数据展示方法，本发明还提出一种储存介质，所述储存介质储存基于象形图组件的数据展示程序，所述基于象形图组件的数据展示程序被处理器11执行时，实现如上述的基于象形图组件的数据展示方法。
综上，本发明公开的一种基于象形图组件的数据展示方法、系统及存储介质，所述方法包括：接收到数据展示命令时，获取待展示的列表数据；当所述列表数据包含有自定义配置数据时，将所述自定义配置数据转换为象形图组件能识别的数据格式；加载所述数据格式，按照所述数据格式对应的标准样式结构展示所述列表数据。本发明旨在以用户自定义象形图展示数据，提高扩展性，同时采用统一标准样式结构，只需要提供数据就可简洁且直观地展示，无需专业开发人员，降低成本，提高用户体验。
应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。
Claims (10)
1.一种基于象形图组件的数据展示方法，其特征在于，所述基于象形图组件的数据展示方法包括：
接收到数据展示命令时，获取待展示的列表数据；
当所述列表数据包含有自定义配置数据时，将所述自定义配置数据转换为象形图组件能识别的数据格式；
加载所述数据格式，按照所述数据格式对应的标准样式结构展示所述列表数据。
2.根据权利要求1所述的基于象形图组件的数据展示方法，其特征在于，所述接收到数据展示命令时，获取待展示的列表数据之前包括：
通过VUE框架对所述象形图组件进行封装，得到标准样式结构。
3.根据权利要求1或2所述的基于象形图组件的数据展示方法，其特征在于，所述标准样式结构为左侧显示若干行数据名称项，右侧显示每个数据名称项对应的统计数值，所述统计数值以百分比或数字分数显示，中间侧显示所述统计数值对应的象形图图像。
4.根据权利要求3所述的基于象形图组件的数据展示方法，其特征在于，所述标准样式结构中默认的统计数值以百分比显示。
5.根据权利要求1所述的基于象形图组件的数据展示方法，其特征在于，所述自定义配置数据至少包括显示数据和自定义样式配置数据中的一种，所述显示数据至少包括数据名称、最大值以及当前值。
6.根据权利要求1或5所述的基于象形图组件的数据展示方法，当自定义配置数据仅包括显示数据时，所述当所述列表数据包含有自定义配置数据时，将所述自定义配置数据转换为象形图组件能识别的数据格式具体包括：
当所述列表数据仅包括显示数据时，获取系统默认的样式配置数据；
根据所述默认的样式配置数据提取所述标准样式结构对应的配置项；
根据所述标准样式结构中象形图样式总数量，计算所述显示数据对应的象形图样式数量；
将所述象形图样式数量转换为所述象形图组件能识别的象形图图像，所述象形图图像显示所述象形图样式数量。
7.根据权利要求1或5所述的基于象形图组件的数据展示方法，其特征在于，当自定义配置数据仅包括自定义样式配置数据时，所述当所述列表数据包含有自定义配置数据时，将所述自定义配置数据转换为象形图组件能识别的数据格式具体包括：
当自定义配置数据仅包括自定义样式配置数据时，根据所述自定义样式配置数据提取标准样式结构对应的配置项；
获取系统默认的显示数据，其中，所述默认的显示数据中最大值与当前值均为0；
将所述默认的显示数据转换为所述象形图组件能识别的象形图图像，所述象形图图像不显示象形图样式数量。
8.根据权利要求6或7所述的基于象形图组件的数据展示方法，其特征在于，所述根据所述数据格式加载所述列表数据，按照所述数据格式对应的自定义样式结构展示所述列表数据具体包括：
通过所述象形图组件加载所述象形图图像；
采用grid布局，加载所述配置项，渲染并绘制成标准样式结构，同时按照所述标准样式结构显示所述象形图图像。
9.一种系统，其特征在于，所述系统包括：处理器以及与所述处理器连接的存储器，所述存储器上存储有并可在所述处理器上运行的基于象形图组件的数据展示程序，所述基于象形图组件的数据展示程序被所述处理器执行时，实现如权利要求1-8任意一项所述的基于象形图组件的数据展示方法。
10.一种存储介质，其特征在于，所述存储介质存储有基于象形图组件的数据展示程序，所述基于象形图组件的数据展示程序被处理器执行时，实现如权利要求1-8任意一项所述的基于象形图组件的数据展示方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010042824.0A CN111274306A (zh) | 2020-01-15 | 2020-01-15 | 一种基于象形图组件的数据展示方法、系统及储存介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010042824.0A CN111274306A (zh) | 2020-01-15 | 2020-01-15 | 一种基于象形图组件的数据展示方法、系统及储存介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111274306A true CN111274306A (zh) | 2020-06-12 |
Family
ID=71003240
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010042824.0A Pending CN111274306A (zh) | 2020-01-15 | 2020-01-15 | 一种基于象形图组件的数据展示方法、系统及储存介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111274306A (zh) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030009315A1 (en) * | 2001-05-15 | 2003-01-09 | Thomas Paul A. | System for creating measured drawings |
| WO2012172079A1 (en) * | 2011-06-17 | 2012-12-20 | Inventive Designers Nv | A tool for designing a document flow process |
| CN103677789A (zh) * | 2012-09-25 | 2014-03-26 | 深圳市金正方科技有限公司 | 基于grid组件的列表数据展现方法及系统 |
| CN107346399A (zh) * | 2017-06-14 | 2017-11-14 | 山东同智伟业软件股份有限公司 | 电子签章方法及系统 |
| CN109766382A (zh) * | 2018-11-28 | 2019-05-17 | 四川商通实业有限公司 | 一种动态数据列展示方法 |
-
2020
- 2020-01-15 CN CN202010042824.0A patent/CN111274306A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030009315A1 (en) * | 2001-05-15 | 2003-01-09 | Thomas Paul A. | System for creating measured drawings |
| WO2012172079A1 (en) * | 2011-06-17 | 2012-12-20 | Inventive Designers Nv | A tool for designing a document flow process |
| CN103677789A (zh) * | 2012-09-25 | 2014-03-26 | 深圳市金正方科技有限公司 | 基于grid组件的列表数据展现方法及系统 |
| CN107346399A (zh) * | 2017-06-14 | 2017-11-14 | 山东同智伟业软件股份有限公司 | 电子签章方法及系统 |
| CN109766382A (zh) * | 2018-11-28 | 2019-05-17 | 四川商通实业有限公司 | 一种动态数据列展示方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP3220249B1 (en) | Method, device and terminal for implementing regional screen capture | |
| CN109254818B (zh) | 针对浏览器不同分辨率的像素级定位方法和装置 | |
| CN108040278A (zh) | 智能电视的活动页处理方法、服务器、系统及存储介质 | |
| CN112181554B (zh) | 一种交互界面显示方法、设备、电子设备及存储介质 | |
| CN108121539B (zh) | 组件处理方法和装置 | |
| CN104820589A (zh) | 一种动态适配网页的方法及其装置 | |
| CN112764752A (zh) | 页面的展示方法和装置、存储介质、电子装置 | |
| CN113641719A (zh) | 数据处理方法、装置、计算机及存储介质 | |
| CN113656487A (zh) | 信息系统中的对象数据展示方法及对象数据展示装置 | |
| CN111273984A (zh) | 一种数值控件的扩展方法、存储介质及终端设备 | |
| CN107608733A (zh) | 图片显示方法、装置和终端设备 | |
| CN111274306A (zh) | 一种基于象形图组件的数据展示方法、系统及储存介质 | |
| CN111724455A (zh) | 图像处理方法及电子设备 | |
| CN116028746A (zh) | 中后台管理系统的页面管理方法、装置、设备及存储介质 | |
| CN113253959B (zh) | 一种适配不同大屏分辨率的前端投屏方法 | |
| CN115935917A (zh) | 一种可视化图表的数据处理方法、装置、设备及存储介质 | |
| CN115421691A (zh) | 一种基于虚拟列表的数据滚动方法、装置及计算机设备 | |
| CN107509103B (zh) | 一种用于智能电视epg数据的存储管理及页面布局的方法 | |
| CN112329412A (zh) | 动态控制基于前端技术表格列的方法及装置 | |
| CN111399836A (zh) | 修改页面属性的方法及装置 | |
| CN108519962A (zh) | 一种应用于安卓系统的字体显示方法、装置和终端设备 | |
| CN108897537A (zh) | 文档显示方法、计算机可读介质和一种计算机 | |
| CN112379799B (zh) | 在三维渲染中输入框的控制方法、装置和电子装置 | |
| CN113343136B (zh) | 一种展示信息的方法及装置 | |
| CN112068910B (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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20200612 |
|
| RJ01 | Rejection of invention patent application after publication |