CN112328252A - 基于web网页的在线设计数据可视化大屏方法 - Google Patents

基于web网页的在线设计数据可视化大屏方法 Download PDF

Info

Publication number
CN112328252A
CN112328252A CN202011398664.XA CN202011398664A CN112328252A CN 112328252 A CN112328252 A CN 112328252A CN 202011398664 A CN202011398664 A CN 202011398664A CN 112328252 A CN112328252 A CN 112328252A
Authority
CN
China
Prior art keywords
component
page
visual
user
design data
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
CN202011398664.XA
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.)
Jiangsu Sairong Technology Co ltd
Original Assignee
Jiangsu Sairong 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 Jiangsu Sairong Technology Co ltd filed Critical Jiangsu Sairong Technology Co ltd
Priority to CN202011398664.XA priority Critical patent/CN112328252A/zh
Publication of CN112328252A publication Critical patent/CN112328252A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/35—Creation or generation of source code model driven
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/36—Software reuse
    • 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)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明涉及一种基于web网页的在线设计数据可视化大屏方法，开发人员开发供用户使用的素材库，所述素材库包括组件库、可视化页面模板库。用户创建可视化页面，设计出自己想要的大屏效果。用户从素材库中选择相应的组件，添加到可视化页面中并进行相应的显示。由此，相同组件仅需要开发一次，用户可无限次使用，减少了重复性工作，降低了开发成本。实施期间对页面调节较为灵活，用户可以随意设计出自己需要的可视化大屏页面。提供可视化页面模板库，可以快速开发可视化大屏页面。能够实时在线预览，保证了设计效果与预览效果的高度统一。

Description

基于web网页的在线设计数据可视化大屏方法
技术领域
本发明涉及一种在线设计数据可视化大屏方法，尤其涉及一种基于web网页的在线设计数据可视化大屏方法。
背景技术
就现有的网页设计来看，用户希望可以通过可视化大屏的方式，对数据以视觉形式进行呈现，达到酷炫的展示效果。但目前市面上实现数据可视化大屏的方法往往是通过专业开发人士进行开发，有着沟通成本高、开发周期长、变动修改难的问题。同时，在现有的网页设计来看，其耗时较长，重复构建的组件较多，极大的浪费了开发成本和变更成本。
有鉴于上述的缺陷，本设计人，积极加以研究创新，以期创设一种基于web网页的在线设计数据可视化大屏方法，使其更具有产业上的利用价值。
发明内容
为解决上述技术问题，本发明的目的是提供一种基于web网页的在线设计数据可视化大屏方法。
本发明的基于web网页的在线设计数据可视化大屏方法，其包括以下步骤：步骤一，开发人员开发供用户使用的素材库，所述素材库包括组件库、可视化页面模板库；步骤二，用户创建可视化页面，设计出自己想要的大屏效果；步骤三，用户从素材库中选择相应的组件，添加到可视化页面中并进行相应的显示。
进一步地，上述的基于web网页的在线设计数据可视化大屏方法，其中，所述组件库包括折线图组件、轮播图组件、文本组件中的一种或是多种结合，所述折线图组件、轮播图组件、文本组件均包含有自身的属性信息。
更进一步地，上述的基于web网页的在线设计数据可视化大屏方法，其中，所述自身的属性信息，包括组件的大小信息、文字的颜色信息、文字的大小信息、背景颜色信息、布局规格信息、图表类型信息中的一种或是多种。
更进一步地，上述的基于web网页的在线设计数据可视化大屏方法，其中，所述步骤二中，用户创建空白页面；或是，用户选择可视化模板进行创建，用户对包含可视化大屏的大小、背景颜色信息进行配置，设计出符合自己需求的大屏效果。
更进一步地，上述的基于web网页的在线设计数据可视化大屏方法，其中，所述步骤二中，用户选择可视化模板，在新页面中包含可视化页面模板中的页面配置信息，所述页面配置信息包括背景颜色、布局类型、图表类型等、页面的宽高、该页面含有哪种组件，组件的位置信息、组件的属性信息中的一种或是多种。
更进一步地，上述的基于web网页的在线设计数据可视化大屏方法，其中，所述步骤三中，用户从组件库中选择相应的组件，给组件进行属性配置，所述属性配置包括组件的位置、组件的大小、文字的颜色、文字的大小。
更进一步地，上述的基于web网页的在线设计数据可视化大屏方法，其中，所述步骤三中，给组件进行数据来源的绑定，当前页面中的组件显示效果就是用户的数据以可视化的方式展示在页面上的效果。
更进一步地，上述的基于web网页的在线设计数据可视化大屏方法，其中，用户实时在线预览可视化页面，对页面进行发布，发布之后的页面，其他用户能看到相同的可视化大屏效果。
再进一步地，上述的基于web网页的在线设计数据可视化大屏方法，其中，用户通过web方式发布页面，其他用户就以通过网址进行访问。
借由上述方案，本发明至少具有以下优点：
1、相同组件仅需要开发一次，用户可无限次使用，减少了重复性工作，降低了开发成本。
2、实施期间对页面调节较为灵活，用户可以随意设计出自己需要的可视化大屏页面。
3、提供可视化页面模板库，可以快速开发可视化大屏页面。
4、能够实时在线预览，保证了设计效果与预览效果的高度统一。
上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，并可依照说明书的内容予以实施，以下以本发明的较佳实施例并配合附图详细说明如后。
附图说明
图1是基于web网页的在线设计数据可视化大屏方法的实施原理示意图。
图2是基于web网页的在线设计数据可视化大屏方法与软件结合后的流程示意图。
具体实施方式
下面结合附图和实施例，对本发明的具体实施方式作进一步详细描述。以下实施例用于说明本发明，但不用来限制本发明的范围。
如图1、图2的基于web网页的在线设计数据可视化大屏方法，其与众不同之处在于包括以下步骤：
步骤一，开发人员开发供用户使用的素材库，素材库包括组件库、可视化页面模板库。在实际实施期间，组件库包括折线图组件、轮播图组件、文本组件中的一种或是多种结合。同时，折线图组件、轮播图组件、文本组件均包含有自身的属性信息。并且，本发明所采用的自身的属性信息，包括组件的大小信息、文字的颜色信息、文字的大小信息、背景颜色信息、布局规格信息、图表类型信息中的一种或是多种。这样，对于开发人员来说，可开发多种可视化模板库，提供了各式风格的可视化大屏页面。
步骤二，用户创建可视化页面，设计出自己想要的大屏效果。
在此期间，用户创建空白页面。或是，用户选择可视化模板进行创建，用户对包含可视化大屏的大小、背景颜色信息进行配置，设计出符合自己需求的大屏效果。在用户选择可视化模板后，在新页面中包含可视化页面模板中的页面配置信息。具体来说，页面配置信息包括背景颜色、布局类型、图表类型等、页面的宽高、该页面含有哪种组件，组件的位置信息、组件的属性信息中的一种或是多种。这样，可以拥有较多的可编辑要素，满足不同用户的页面布局需求。
步骤三，用户从素材库中选择相应的组件，添加到可视化页面中并进行相应的显示。用户从组件库中选择相应的组件，给组件进行属性配置，属性配置包括组件的位置、组件的大小、文字的颜色、文字的大小。这样，用户就可以设计出自己想要的图表样式，以及图表在页面中的布局。由此，就可以设计出自己想要的可视化大屏外观样式。在实际实施中，可以给组件进行数据来源的绑定，当前页面中的组件显示效果就是用户的数据以可视化的方式展示在页面上的效果。并且，如果想要自己的数据在可视化大屏图表中展示，则需要通过绑定数据到图表组件中。这样，图表组件显示的数据就是自己想要展示的数据。
为了提高实施的便捷性，用户可实时在线预览可视化页面，对页面进行发布，发布之后的页面，其他用户能看到相同的可视化大屏效果。考虑到在线实施的便利，用户通过web方式发布页面，其他用户就以通过网址进行访问。
而且，本发明实施期间所涉及的数据支持静态数据，以及API数据。静态数据直接在线更改数据，保存之后就可以显示在组件上。为了便于追溯，且提升实施的安全性，API数据是来源于接口返回的数据，是不可以在线更改的。
通过上述的文字表述并结合附图可以看出，采用本发明后，拥有如下优点：
1、相同组件仅需要开发一次，用户可无限次使用，减少了重复性工作，降低了开发成本。
2、实施期间对页面调节较为灵活，用户可以随意设计出自己需要的可视化大屏页面。
3、提供可视化页面模板库，可以快速开发可视化大屏页面。
4、能够实时在线预览，保证了设计效果与预览效果的高度统一。
此外，本发明所描述的指示方位或位置关系，均为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或构造必须具有特定的方位，或是以特定的方位构造来进行操作，因此不能理解为对本发明的限制。
以上所述仅是本发明的优选实施方式，并不用于限制本发明，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明技术原理的前提下，还可以做出若干改进和变型，这些改进和变型也应视为本发明的保护范围。

Claims (9)

1.基于web网页的在线设计数据可视化大屏方法，其特征在于包括以下步骤：
步骤一，开发人员开发供用户使用的素材库，所述素材库包括组件库、可视化页面模板库；
步骤二，用户创建可视化页面，设计出自己想要的大屏效果；
步骤三，用户从素材库中选择相应的组件，添加到可视化页面中并进行相应的显示。
2.根据权利要求1所述的基于web网页的在线设计数据可视化大屏方法，其特征在于：所述组件库包括折线图组件、轮播图组件、文本组件中的一种或是多种结合，所述折线图组件、轮播图组件、文本组件均包含有自身的属性信息。
3.根据权利要求2所述的基于web网页的在线设计数据可视化大屏方法，其特征在于：所述自身的属性信息，包括组件的大小信息、文字的颜色信息、文字的大小信息、背景颜色信息、布局规格信息、图表类型信息中的一种或是多种。
4.根据权利要求1所述的基于web网页的在线设计数据可视化大屏方法，其特征在于：所述步骤二中，用户创建空白页面；或是，用户选择可视化模板进行创建，用户对包含可视化大屏的大小、背景颜色信息进行配置，设计出符合自己需求的大屏效果。
5.根据权利要求4所述的基于web网页的在线设计数据可视化大屏方法，其特征在于：所述步骤二中，用户选择可视化模板，在新页面中包含可视化页面模板中的页面配置信息，所述页面配置信息包括背景颜色、布局类型、图表类型等、页面的宽高、该页面含有哪种组件，组件的位置信息、组件的属性信息中的一种或是多种。
6.根据权利要求1所述的基于web网页的在线设计数据可视化大屏方法，其特征在于：所述步骤三中，用户从组件库中选择相应的组件，给组件进行属性配置，所述属性配置包括组件的位置、组件的大小、文字的颜色、文字的大小。
7.根据权利要求1所述的基于web网页的在线设计数据可视化大屏方法，其特征在于：所述步骤三中，给组件进行数据来源的绑定，当前页面中的组件显示效果就是用户的数据以可视化的方式展示在页面上的效果。
8.根据权利要求1所述的基于web网页的在线设计数据可视化大屏方法，其特征在于：用户实时在线预览可视化页面，对页面进行发布，发布之后的页面，其他用户能看到相同的可视化大屏效果。
9.根据权利要求8所述的基于web网页的在线设计数据可视化大屏方法，其特征在于：用户通过web方式发布页面，其他用户就以通过网址进行访问。
CN202011398664.XA 2020-12-03 2020-12-03 基于web网页的在线设计数据可视化大屏方法 Pending CN112328252A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011398664.XA CN112328252A (zh) 2020-12-03 2020-12-03 基于web网页的在线设计数据可视化大屏方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011398664.XA CN112328252A (zh) 2020-12-03 2020-12-03 基于web网页的在线设计数据可视化大屏方法

Publications (1)

Publication Number Publication Date
CN112328252A true CN112328252A (zh) 2021-02-05

Family

ID=74302001

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011398664.XA Pending CN112328252A (zh) 2020-12-03 2020-12-03 基于web网页的在线设计数据可视化大屏方法

Country Status (1)

Country Link
CN (1) CN112328252A (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112966160A (zh) * 2021-03-08 2021-06-15 浪潮云信息技术股份公司 基于模板的多slide页大屏展示方法及装置
CN113626030A (zh) * 2021-06-28 2021-11-09 大唐互联科技(武汉)有限公司 一种数据可视化大屏快速搭建方法和系统
CN113672214A (zh) * 2021-07-16 2021-11-19 微梦创科网络科技（中国）有限公司 一种模板共享方法和装置
CN114296722A (zh) * 2021-12-10 2022-04-08 浙江嘉兴数字城市实验室有限公司 一种应用于数字化改革的可视化快速开发方法及系统
CN117251154A (zh) * 2023-09-26 2023-12-19 北京泰策科技有限公司 一种基于数据可视化的可快速扩展的低代码大屏设计系统

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110249003A1 (en) * 2010-04-13 2011-10-13 Microsoft Corporation Configurable framework for rich data visualization
CN110032420A (zh) * 2019-04-18 2019-07-19 合肥天毅网络传媒有限公司 一种前端网页设计系统及其方法
CN110597586A (zh) * 2019-08-19 2019-12-20 北京邮电大学 基于拖拽的组件化布局大屏方法和装置
CN111158670A (zh) * 2019-12-27 2020-05-15 河北航天信息技术有限公司 一种可视化辅助软件开发方法及系统

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110249003A1 (en) * 2010-04-13 2011-10-13 Microsoft Corporation Configurable framework for rich data visualization
CN110032420A (zh) * 2019-04-18 2019-07-19 合肥天毅网络传媒有限公司 一种前端网页设计系统及其方法
CN110597586A (zh) * 2019-08-19 2019-12-20 北京邮电大学 基于拖拽的组件化布局大屏方法和装置
CN111158670A (zh) * 2019-12-27 2020-05-15 河北航天信息技术有限公司 一种可视化辅助软件开发方法及系统

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112966160A (zh) * 2021-03-08 2021-06-15 浪潮云信息技术股份公司 基于模板的多slide页大屏展示方法及装置
CN113626030A (zh) * 2021-06-28 2021-11-09 大唐互联科技(武汉)有限公司 一种数据可视化大屏快速搭建方法和系统
CN113672214A (zh) * 2021-07-16 2021-11-19 微梦创科网络科技（中国）有限公司 一种模板共享方法和装置
CN113672214B (zh) * 2021-07-16 2024-04-05 微梦创科网络科技（中国）有限公司 一种模板共享方法和装置
CN114296722A (zh) * 2021-12-10 2022-04-08 浙江嘉兴数字城市实验室有限公司 一种应用于数字化改革的可视化快速开发方法及系统
CN117251154A (zh) * 2023-09-26 2023-12-19 北京泰策科技有限公司 一种基于数据可视化的可快速扩展的低代码大屏设计系统

Similar Documents

Publication Publication Date Title
CN112328252A (zh) 基于web网页的在线设计数据可视化大屏方法
JP5209113B2 (ja) 表形式データの階層的提示
CN102646038B (zh) 控件内容展现方法、控件内容展现装置以及移动终端
US20110072370A1 (en) User interface modifier
JP2004005568A (ja) レガシー・アプリケーションの高速ｇｕｉ体裁更新
Helmers Microsoft Visio 2013 Step by Step
US10089120B2 (en) Widgets in digital dashboards
Boduch React material-ui cookbook: build captivating user experiences using react and material-ui
CN107391656A (zh) 基于蒙版的web表单设计方法
Hong Practical web design: Learn the fundamentals of web design with HTML5, CSS3, bootstrap, jQuery, and vue. js
Bruy et al. QGIS by Example
KR101546359B1 (ko) 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템
McFarland Dreamweaver CS6: The Missing Manual
Radford Learning Web Development with Bootstrap and AngularJS
Heydt D3. js by example
Plimmer et al. FreeForm: A tool for sketching form designs
Korner Learning Responsive Data Visualization
Fernández et al. Three Groupware Patterns from the Activity Awareness Family.
Halvorson Start Here! Learn Microsoft Visual Basic 2012
JP2010072764A (ja) プログラム作成装置
Ratnayake Building Impressive Presentations with impress. js
Lin et al. Relay: A collaborative UI model for design handoff
Kimani et al. Adobe Fireworks Professional Level
Chellman et al. Getting Started with Macaw: Build Responsive Websites with a Cutting-Edge Application
JP2005284742A (ja) メッセージ出力装置及びコンピュータプログラム

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