CN111611033A - 图表跟随用户界面的动态换肤方法、装置和计算机设备 - Google Patents

图表跟随用户界面的动态换肤方法、装置和计算机设备 Download PDF

Info

Publication number
CN111611033A
CN111611033A CN202010270627.4A CN202010270627A CN111611033A CN 111611033 A CN111611033 A CN 111611033A CN 202010270627 A CN202010270627 A CN 202010270627A CN 111611033 A CN111611033 A CN 111611033A
Authority
CN
China
Prior art keywords
user interface
chart
skin
display parameters
changed
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
CN202010270627.4A
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.)
Dawning Information Industry Beijing Co Ltd
Original Assignee
Dawning Information Industry Beijing 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 Dawning Information Industry Beijing Co Ltd filed Critical Dawning Information Industry Beijing Co Ltd
Priority to CN202010270627.4A priority Critical patent/CN111611033A/zh
Publication of CN111611033A publication Critical patent/CN111611033A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • 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
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/30—Monitoring
    • G06F11/3003—Monitoring arrangements specially adapted to the computing system or computing system component being monitored
    • G06F11/3041—Monitoring arrangements specially adapted to the computing system or computing system component being monitored where the computing system component is an input/output interface

Landscapes

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

Abstract

本发明公开了一种图表跟随用户界面的动态换肤方法、装置和计算机设备。其中，图表跟随用户界面的动态换肤方法包括：实时监测用户界面的显示参数；判断用户界面的显示参数是否发生变化；如果用户界面的显示参数发生变化，则运行图表换肤函数，以对图表进行换肤。本发明实施例的图表跟随用户界面的动态换肤方法、装置和计算机设备，通过实时监测用户界面的显示参数，在监测到用户界面的显示参数发生变化时，运行图表换肤函数，以对图表进行换肤，图表皮肤颜色能够实时跟随用户界面的皮肤颜色变化而变化，避免用户界面刷新效果，提高用户使用体验。

Description

图表跟随用户界面的动态换肤方法、装置和计算机设备
技术领域
本发明涉及界面显示技术领域，尤其涉及一种图表跟随用户界面的动态换肤方法、装置和计算机设备。
背景技术
随着前端技术的不断发展，后台管理系统界面的框架越来越丰富，各终端用户对于界面的美观性和多样性的要求也是越来越多。在满足系统功能的同时，需要对功能界面的美观性做出更好的设计。而对功能界面进行更换皮肤，可以极大程度上带来UI(UserInterface，用户界面)框架的丰富性。目前的换肤主要是HTML+CSS层面的变化，而对于界面上的某些图表，该方法不产生任何效果。例如，当界面由浅色皮肤变为深色皮肤的时候，图表还是保持固定的颜色没有变化，从而导致图表颜色和界面颜色存在差异，显得突兀，不够美观。
现有技术可以通过缓存存储界面的皮肤参数并刷新的方式来匹配图表和界面的皮肤颜色，从而实现图表的换肤。但是，该方法会造成界面数据和操作都恢复到起始状态，而且会产生一个页面刷新闪现的过度效果，用户体验不友好。此外，该方法容易造成用户误操作，导致页面操作和数据的丢失。
发明内容
本发明的目的旨在至少在一定程度上解决上述的技术问题之一。
为此，本发明的第一个目的在于提出一种图表跟随用户界面的动态换肤方法，图表皮肤颜色能够实时跟随用户界面的皮肤颜色变化而变化，避免用户界面刷新效果，提高用户使用体验。
本发明的第二个目的在于提出一种图表跟随用户界面的动态换肤装置。
本发明的第三个目的在于提出一种计算机设备。
本发明的第四个目的在于提出一种非临时性计算机可读存储介质。
为了实现上述目的，本发明第一方面实施例提出一种图表跟随用户界面的动态换肤方法，该方法包括：
实时监测用户界面的显示参数；
判断所述用户界面的显示参数是否发生变化；
如果所述用户界面的显示参数发生变化，则运行图表换肤函数，以对所述图表进行换肤。
可选的，实时监测用户界面的显示参数，包括：
利用视图框架VUE的侦听器实时监测所述用户界面的显示参数。
可选的，运行图表换肤函数，以对所述图表进行换肤，包括：
定义所述图表的文字和/或线条的变量参数；
当检测到所述用户界面的显示参数发生变化时，对所述图表的文字和/或线条的变量参数进行重新赋值。
可选的，当检测到所述用户界面的显示参数发生变化时，对所述图表的文字和/或线条的变量参数进行重新赋值，包括：
获取变化后的所述用户界面的显示参数；
根据变化后的所述用户界面的显示参数设置所述图表的属性，并将变化后的所述用户界面的显示参数传递至所述图表。
本发明实施例的图表跟随用户界面的动态换肤方法，通过实时监测用户界面的显示参数，在监测到用户界面的显示参数发生变化时，运行图表换肤函数，以对图表进行换肤，图表皮肤颜色能够实时跟随用户界面的皮肤颜色变化而变化，避免用户界面刷新效果，提高用户使用体验。
为了实现上述目的，本发明第二方面实施例提出了一种图表跟随用户界面的动态换肤装置，包括：
监测模块，用于实时监测用户界面的显示参数；
判断模块，用于判断所述用户界面的显示参数是否发生变化；
换肤模块，用于如果所述用户界面的显示参数发生变化，则运行图表换肤函数，以对所述图表进行换肤。
可选的，所述监测模块，用于：
利用视图框架VUE的侦听器实时监测所述用户界面的显示参数。
可选的，所述换肤模块，用于：
定义所述图表的文字和/或线条的变量参数；
当检测到所述用户界面的显示参数发生变化时，对所述图表的文字和/或线条的变量参数进行重新赋值。
可选的，所述换肤模块，具体用于：
获取变化后的所述用户界面的显示参数；
根据变化后的所述用户界面的显示参数设置所述图表的属性，并将变化后的所述用户界面的显示参数传递至所述图表。
本发明实施例的图表跟随用户界面的动态换肤装置，通过实时监测用户界面的显示参数，在监测到用户界面的显示参数发生变化时，运行图表换肤函数，以对图表进行换肤，图表皮肤颜色能够实时跟随用户界面的皮肤颜色变化而变化，避免用户界面刷新效果，提高用户使用体验。
为了实现上述目的，本发明第三方面实施例提出了一种计算机设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时，实现如第一方面实施例所述的图表跟随用户界面的动态换肤方法。
为了实现上述目的，本发明第四方面实施例还提出了一种非临时性计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如第一方面实施例所述的图表跟随用户界面的动态换肤方法。
本发明附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。
附图说明
构成本发明的一部分的说明书附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：
图1是本发明一实施例的图表跟随用户界面的动态换肤方法的流程图；
图2是本发明一具体实施例的图表跟随用户界面的动态换肤方法的流程图；
图3是本发明一实施例的图表跟随用户界面的动态换肤装置的结构示意图。
具体实施方式
需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本发明。
以下结合具体实施例对本发明作进一步详细描述，这些实施例不能理解为限制本发明所要求保护的范围。
下面参考附图描述本发明实施例的图表跟随用户界面的动态换肤方法、装置和计算机设备。
图1是本发明一实施例的图表跟随用户界面的动态换肤方法的流程图，如图1所示，该方法包括以下步骤：
S1，实时监测用户界面的显示参数。
具体地，可利用视图框架VUE的侦听器实时监测用户界面的显示参数。
其中，VUE是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。VUE的核心库只关注视图层，易于上手，便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也能够为复杂的单页应用提供驱动。
S2，判断用户界面的显示参数是否发生变化。
其中，显示参数可以是颜色等参数。
S3，如果用户界面的显示参数发生变化，则运行图表换肤函数，以对图表进行换肤。
在本实施例中，可定义图表的文字和/或线条的变量参数。当检测到用户界面的显示参数发生变化时，对图表的文字和/或线条的变量参数进行重新赋值。具体来说，可获取变化后的用户界面的显示参数，然后根据变化后的用户界面的显示参数设置图表的属性，并将变化后的用户界面的显示参数传递至图表。
其中，图表泛指在屏幕中显示的，可直观展示统计信息属性(时间性、数量性等)，对知识挖掘和信息直观生动感受起关键作用的图形结构，是一种能够将对象属性数据直观、形象地可视化手段。
本发明实施例的图表跟随用户界面的动态换肤方法，通过实时监测用户界面的显示参数，在监测到用户界面的显示参数发生变化时，运行图表换肤函数，以对图表进行换肤，图表皮肤颜色能够实时跟随用户界面的皮肤颜色变化而变化，避免用户界面刷新效果，提高用户使用体验。
下面通过一个具体实施例，来对本发明的图表跟随用户界面的动态换肤方法进行详细阐述。
图2是本发明一具体实施例的图表跟随用户界面的动态换肤方法的流程图。
本方法是通过VUE框架的数据驱动WEB界面的特性，利用VUE的侦听器来实现异步数据实时变化的操作。VUE中通过watch选项提供了一个通用的方法来响应数据的变化。当皮肤选项的参数变化时，能够实时通过参数变化对界面做出响应的改变，从而实现无刷新的界面样式变化。
如图2所示，该方法包括以下步骤：
S201，接收切换皮肤操作。
具体地，界面中可提供多套皮肤供用户选择切换。用户可操作皮肤切换按钮选项来选择其中一套皮肤，从而改变皮肤参数。
其中，每一套皮肤都有一个标识，通过皮肤列表按钮的点击事件来传递皮肤对应的参数值，全局皮肤样式通过参数值来匹配对应的CSS样式文件。
S202，监测皮肤参数变化。
利用Watch方法监测参数变化。具体实例代码如下：
Figure BDA0002443019180000051
Figure BDA0002443019180000061
S203，接收新的皮肤参数，重新渲染图表。
从上述代码可以看出，如果watch侦听到style变化为darknightstyle时，则判断为if里面的颜色代码执行生效，否则为默认的颜色代码。判断完成后，将参数传递给图表，图表通过setoption方法重新赋值，如字体颜色赋值为lineFontColor＝'#D3D4D6'，线条颜色赋值为lineLineColor＝'#616986'，从而达到改变图表颜色的目的。
本发明利用Vue.js中的侦听器来编写一套判断机制，界面皮肤切换时图表的颜色也根据皮肤整体颜色的变化而变化，通过传递参数的方式而不是通过简单的类名切换或者文件替换，从而界面不会产生刷新的效果，页面的数据和操作状态也能够保持不变，提高用户体验，同时能够有效避免用户误操作，防止数据丢失。
为了实现上述实施例，本发明还提出了一种图表跟随用户界面的动态换肤装置。
图3是本发明一实施例的图表跟随用户界面的动态换肤装置的结构示意图。
如图3所示，该装置包括监测模块31、判断模块32以及换肤模块33。
监测模块31，用于实时监测用户界面的显示参数。
判断模块32，用于判断用户界面的显示参数是否发生变化。
换肤模块33，用于如果用户界面的显示参数发生变化，则运行图表换肤函数，以对图表进行换肤。
应当理解的是，本实施例的图表跟随用户界面的动态换肤装置与第一方面实施例的图表跟随用户界面的动态换肤方法的描述一致，此处不再赘述。
本发明实施例的图表跟随用户界面的动态换肤装置，通过实时监测用户界面的显示参数，在监测到用户界面的显示参数发生变化时，运行图表换肤函数，以对图表进行换肤，图表皮肤颜色能够实时跟随用户界面的皮肤颜色变化而变化，避免用户界面刷新效果，提高用户使用体验。
为了实现上述实施例，本发明还提出了一种计算机设备。
该计算机设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时，实现如第一方面实施例的图表跟随用户界面的动态换肤方法。
为了实现上述实施例，本发明还提出了一种非临时性计算机可读存储介质。
该非临时性计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现如第一方面实施例的图表跟随用户界面的动态换肤方法。
需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、物品或者设备中还存在另外的相同要素。
在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，"计算机可读介质"可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得程序，然后将其存储在计算机存储器中。
应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。
需要说明的是，在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。
在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

Claims (10)

1.一种图表跟随用户界面的动态换肤方法，其特征在于，包括：
实时监测用户界面的显示参数；
判断所述用户界面的显示参数是否发生变化；
如果所述用户界面的显示参数发生变化，则运行图表换肤函数，以对所述图表进行换肤。
2.如权利要求1所述的方法，其特征在于，实时监测用户界面的显示参数，包括：
利用视图框架VUE的侦听器实时监测所述用户界面的显示参数。
3.如权利要求1所述的方法，其特征在于，运行图表换肤函数，以对所述图表进行换肤，包括：
定义所述图表的文字和/或线条的变量参数；
当检测到所述用户界面的显示参数发生变化时，对所述图表的文字和/或线条的变量参数进行重新赋值。
4.如权利要求3所述的方法，其特征在于，当检测到所述用户界面的显示参数发生变化时，对所述图表的文字和/或线条的变量参数进行重新赋值，包括：
获取变化后的所述用户界面的显示参数；
根据变化后的所述用户界面的显示参数设置所述图表的属性，并将变化后的所述用户界面的显示参数传递至所述图表。
5.一种图表跟随用户界面的动态换肤装置，其特征在于，包括：
监测模块，用于实时监测用户界面的显示参数；
判断模块，用于判断所述用户界面的显示参数是否发生变化；
换肤模块，用于如果所述用户界面的显示参数发生变化，则运行图表换肤函数，以对所述图表进行换肤。
6.如权利要求5所述的装置，其特征在于，所述监测模块，用于：
利用视图框架VUE的侦听器实时监测所述用户界面的显示参数。
7.如权利要求5所述的装置，其特征在于，所述换肤模块，用于：
定义所述图表的文字和/或线条的变量参数；
当检测到所述用户界面的显示参数发生变化时，对所述图表的文字和/或线条的变量参数进行重新赋值。
8.如权利要求7所述的装置，其特征在于，所述换肤模块，具体用于：
获取变化后的所述用户界面的显示参数；
根据变化后的所述用户界面的显示参数设置所述图表的属性，并将变化后的所述用户界面的显示参数传递至所述图表。
9.一种计算机设备，其特征在于，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时，实现如权利要求1-4任一所述的图表跟随用户界面的动态换肤方法。
10.一种非临时性计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-4任一所述的图表跟随用户界面的动态换肤方法。
CN202010270627.4A 2020-04-08 2020-04-08 图表跟随用户界面的动态换肤方法、装置和计算机设备 Pending CN111611033A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010270627.4A CN111611033A (zh) 2020-04-08 2020-04-08 图表跟随用户界面的动态换肤方法、装置和计算机设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010270627.4A CN111611033A (zh) 2020-04-08 2020-04-08 图表跟随用户界面的动态换肤方法、装置和计算机设备

Publications (1)

Publication Number Publication Date
CN111611033A true CN111611033A (zh) 2020-09-01

Family

ID=72199330

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010270627.4A Pending CN111611033A (zh) 2020-04-08 2020-04-08 图表跟随用户界面的动态换肤方法、装置和计算机设备

Country Status (1)

Country Link
CN (1) CN111611033A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113296863A (zh) * 2021-05-26 2021-08-24 平安国际智慧城市科技股份有限公司 基于ios系统的动态换肤方法、装置、设备及存储介质

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113296863A (zh) * 2021-05-26 2021-08-24 平安国际智慧城市科技股份有限公司 基于ios系统的动态换肤方法、装置、设备及存储介质

Similar Documents

Publication Publication Date Title
CN106484396B (zh) 夜间模式切换方法、装置和终端设备
US9134972B2 (en) User interface generation apparatus
CN104516763B (zh) 一种应用程序的启动方法及装置
JPWO2009157560A1 (ja) ユーザインタフェース生成装置
CN107995510B (zh) 电视机控制方法、装置、电视机和可读存储介质
CN111813492B (zh) 快应用的显示方法、装置、电子设备以及存储介质
CN112506400A (zh) 一种页面信息语音播报方法及显示设备
CN108495169A (zh) 信息展示方法及装置
CN112925596B (zh) 移动终端及其显示对象的显示方法
CN113542851B (zh) 一种菜单刷新方法及显示设备
CN111611033A (zh) 图表跟随用户界面的动态换肤方法、装置和计算机设备
CN113961277A (zh) 信息展示方法、装置、可穿戴设备及存储介质
KR100695080B1 (ko) 화면 분할 기능을 갖는 이동통신 단말
KR101154996B1 (ko) 이동통신 단말기 및 그 메뉴화면 구성 방법
US20060236244A1 (en) Command links
CN113473202B (zh) 界面显示方法及显示设备
CN115079887B (zh) 一种桌面系统上安卓应用键盘映射辅助提示的显示方法
US10628179B2 (en) Universal graphical user interface objects
CN105094536A (zh) 一种信息显示方法及电子设备
CN109782985A (zh) 一种可视化智能按键控制方法、系统及存储介质
CN104391633A (zh) 控制设备的方法和装置
CN112562666B (zh) 一种筛选设备的方法及服务设备
CN105302582A (zh) 安装界面展示方法及装置
CN111078785A (zh) 一种数据可视化展示的方法、装置、电子设备及存储介质
CN115412751B (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