CN115221853A - Visual chart optimization method, system, computer equipment and medium - Google Patents

Visual chart optimization method, system, computer equipment and medium Download PDF

Info

Publication number
CN115221853A
CN115221853A CN202210853065.5A CN202210853065A CN115221853A CN 115221853 A CN115221853 A CN 115221853A CN 202210853065 A CN202210853065 A CN 202210853065A CN 115221853 A CN115221853 A CN 115221853A
Authority
CN
China
Prior art keywords
css
class name
abbreviated
abbreviation
class
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
CN202210853065.5A
Other languages
Chinese (zh)
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.)
Pingan Payment Technology Service Co Ltd
Original Assignee
Pingan Payment Technology Service 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 Pingan Payment Technology Service Co Ltd filed Critical Pingan Payment Technology Service Co Ltd
Priority to CN202210853065.5A priority Critical patent/CN115221853A/en
Publication of CN115221853A publication Critical patent/CN115221853A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines
    • G06F40/18—Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/151—Transformation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/174—Form filling; Merging

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The invention discloses a visual chart optimization method, a visual chart optimization system, computer equipment and a medium, wherein the method comprises the following steps: determining a visual chart to be optimized in a front-end page, and positioning a CSS object corresponding to the visual chart to be optimized; when receiving class name data input aiming at the CSS object, determining a target CSS abbreviated class name of the CSS object according to the class name data and a preset CSS class name rule base; and configuring chart optimization parameters aiming at the target CSS abbreviation class name, and optimizing the visual chart to be optimized based on the chart optimization parameters to generate the optimized visual chart. Therefore, when the application receives the class name data, the target CSS abbreviated class name can be determined through the class name data and the preset CSS class name rule base, and the preset CSS class name rule base integrates the standard CSS abbreviated class name, so that the writing time of the correct CSS abbreviated class name is shortened, and the optimization efficiency of the visual chart is improved.

Description

Visual chart optimization method, system, computer equipment and medium
Technical Field
The invention relates to the technical field of computer software, in particular to a visual chart optimization method, a visual chart optimization system, a computer device and a medium.
Background
CSS (Cascading Style Sheets) is a computer language used to represent file styles such as HTML or XML. The CSS can not only statically modify the web page, but also dynamically format elements of the web page in coordination with various scripting languages. After the system is deployed on line to a production environment, problems still occur inevitably, for example, the distance between web pages is a little bit less or the height is a little more, and then the visual chart of the web page needs to be optimized through the CSS language.
In the prior art, when optimizing a visual chart of a web page, a CSS object corresponding to a visual chart with a problem needs to be found in a web page code block, a CSS class name is added to the CSS object, and a style is set for the CSS class name to complete optimization. In the prior art, when the CSS class names are added to CSS objects, due to the fact that the length of the CSS class names is complex and the forms of the CSS class names are various, the CSS class names need to be correctly written by looking up technical documents of the CSS class names, and a large amount of time and energy need to be spent on looking up the technical documents of the CSS class names, so that the writing time of the correct CSS abbreviation class names is prolonged, and the optimization efficiency of the visual chart is reduced.
Disclosure of Invention
Based on this, it is necessary to provide a visual chart optimization method, system, computer device and medium for the problems of small medical question-answering user group and low platform service capability.
A visual chart optimization method comprises the following steps: determining a visual chart to be optimized in a front-end page, and positioning a CSS object corresponding to the visual chart to be optimized; when receiving class name data input aiming at a CSS object, determining a target CSS abbreviation class name of the CSS object according to the class name data and a preset CSS class name rule base; and configuring chart optimization parameters aiming at the target CSS abbreviation class name, and optimizing the visual chart to be optimized based on the chart optimization parameters to generate the optimized visual chart.
In one embodiment, determining a target CSS abbreviation class name for a CSS object based on class name data and a preset CSS class name rule base includes: if the class name data are single characters, fuzzy search is carried out in a preset CSS class name rule base through a regular expression to obtain a CSS abbreviation class name sequence of a CSS object; displaying a CSS abbreviation class name sequence; when a selection instruction for the displayed CSS abbreviated class name sequence is received, a target CSS abbreviated class name is determined in the CSS abbreviated class name sequence according to the selection instruction.
In one embodiment, determining a target CSS abbreviation class name for a CSS object based on class name data and a preset CSS class name rule base includes: if the class name data are a plurality of characters and the characters are not newly added in the preset duration, judging whether the plurality of characters exist in a preset CSS class name rule base or not; if the plurality of characters exist in a preset CSS class name rule base, determining the plurality of characters as target CSS abbreviation class names; or if the characters do not exist in a preset CSS class name rule base, constructing an error description text for displaying; deleting a last character of the plurality of characters; if the deleted residual characters exist in a preset CSS class name rule base, constructing a correct description text based on the deleted residual characters for displaying; and when a determination instruction is received, determining the deleted residual characters as target CSS abbreviation class names.
In one embodiment, a CSS abbreviation class name sequence is presented comprising: determining the priority of each CSS abbreviation class name in the CSS abbreviation class name sequence; sequencing the CSS abbreviation class name sequences based on the high-low sequence of the priority to obtain a plurality of sequenced CSS abbreviation class names; constructing a visual window according to the preset size parameters, and calculating the number of elements which can be accommodated in the visual window; and sequentially selecting the CSS abbreviated class names capable of containing the number of elements from the sequenced plurality of CSS abbreviated class names, displaying the CSS abbreviated class names in a visual window, and hiding the remaining CSS abbreviated class names after selection.
In one embodiment, determining a priority for each CSS abbreviated class name in the sequence of CSS abbreviated class names comprises: counting the use frequency of each CSS abbreviation class name in the CSS abbreviation class name sequence; determining a priority for each CSS abbreviated class name based on a frequency of use of each CSS abbreviated class name; or calculating the association degree between each CSS abbreviated class name in the CSS abbreviated class name sequence and the CSS object corresponding to the visual chart to be optimized to obtain the association degree of each CSS abbreviated class name; and determining the priority of each CSS abbreviation class name according to the relevance of each CSS abbreviation class name.
In one embodiment, the method further comprises: when a sliding instruction for a sliding key on a visual window is received in real time, determining a sliding distance according to the sliding instruction; calculating the number of displayable elements according to the sliding distance; and sequentially selecting the CSS abbreviated class names capable of displaying the number of elements from the CSS abbreviated class names displayed in the visual window for hiding, and sequentially selecting the CSS abbreviated class names capable of displaying the number of elements from the hidden CSS abbreviated class names for displaying.
In one embodiment, locating the CSS object corresponding to the visualization chart to be optimized includes: loading a web front-end code block to which a visual chart to be optimized belongs; traversing and searching all CSS objects in the web front-end code block; constructing a depth tree of all CSS objects; determining a search identifier of a visual chart to be optimized; searching in the depth tree by combining a depth-first traversal algorithm according to the search identifier to obtain a search result; and determining the CSS object corresponding to the visual chart to be optimized according to the search result.
A visual chart optimization system, the system comprising: the CSS object positioning module is used for determining a visual chart to be optimized in the front-end page and positioning a CSS object corresponding to the visual chart to be optimized; the target CSS abbreviation class name determining module is used for determining a target CSS abbreviation class name of the CSS object according to the class name data and a preset CSS class name rule base when receiving the class name data input aiming at the CSS object; and the visual chart optimization module is used for configuring chart optimization parameters aiming at the target CSS abbreviation class names, optimizing the visual chart to be optimized based on the chart optimization parameters and generating the optimized visual chart.
A computer device comprising a memory and a processor, the memory having stored therein computer readable instructions which, when executed by the processor, cause the processor to perform the steps of the visual chart optimization method described above.
A medium having computer-readable instructions stored thereon, which, when executed by one or more processors, cause the one or more processors to perform the steps of the visual chart optimization method described above.
According to the visual chart optimization method, the visual chart optimization system and the visual chart optimization medium, the visual chart to be optimized in the front-end page is determined, the CSS object corresponding to the visual chart to be optimized is located, then when the class name data input aiming at the CSS object is received, the target CSS abbreviation class name of the CSS object is determined according to the class name data and the preset CSS class name rule base, finally, chart optimization parameters are configured aiming at the target CSS abbreviation class name, the visual chart to be optimized is optimized based on the chart optimization parameters, and the optimized visual chart is generated. According to the method and the device, when the class name data are received, the target CSS abbreviated class name can be determined through the class name data and the preset CSS class name rule base, and the preset CSS class name rule base integrates the standard CSS abbreviated class name, so that the writing time of the correct CSS abbreviated class name is shortened, and the optimization efficiency of the visual chart is improved.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the invention and together with the description, serve to explain the principles of the invention.
FIG. 1 is a diagram of an implementation environment of a visual chart optimization method provided in an embodiment of the present application;
FIG. 2 is a schematic diagram of an internal structure of a computer device according to an embodiment of the present application;
FIG. 3 is a method diagram of a visualization chart optimization method provided in an embodiment of the present application;
FIG. 4 is a process diagram of a visual chart optimization process provided in one embodiment of the present application;
FIG. 5 is a method diagram of a visual chart optimization method provided in another embodiment of the present application;
fig. 6 is a schematic system structure diagram of a visual chart optimization system according to an embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and do not limit the invention.
It will be understood that, as used herein, the terms "first," "second," and the like may be used herein to describe various elements, but these elements are not limited by these terms. These terms are only used to distinguish one element from another.
Fig. 1 is a diagram of an implementation environment of a visualization chart optimization method provided in an embodiment, as shown in fig. 1, in the implementation environment, including a server 110 and a client 120.
The server 110 may be a server, which may specifically be an independent server, or may be a cloud server that provides basic cloud computing services such as a cloud service, a cloud database, cloud computing, a cloud function, cloud storage, a Network service, cloud communication, a middleware service, a domain name service, a security service, a Content Delivery Network (CDN), a big data and artificial intelligence platform, and the like, for example, a server device that stores a preset CSS class name rule base. The client 120 determines a visual chart to be optimized in a front-end page, locates a CSS object corresponding to the visual chart to be optimized, obtains a preset CSS class name rule base from the server 110 when receiving class name data input aiming at the CSS object, determines a target CSS abbreviation class name of the CSS object according to the class name data and the preset CSS class name rule base, and configures chart optimization parameters aiming at the target CSS abbreviation class name and optimizes the visual chart to be optimized based on the chart optimization parameters to generate an optimized visual chart.
It should be noted that the client 120 may be a smart phone, a tablet computer, a notebook computer, a desktop computer, and the like, but is not limited thereto. The server 110 and the client 120 may be connected through bluetooth, USB (Universal Serial Bus), or other communication connection methods, which is not limited herein.
FIG. 2 is a diagram illustrating an internal structure of a computer device according to an embodiment. As shown in fig. 2, the computer device includes a processor, a medium, a memory, and a network interface connected through a system bus. The computer device comprises a medium, an operating system, a database and computer readable instructions, wherein the database can store control information sequences, and the computer readable instructions can enable a processor to realize a visual chart optimization method when being executed by the processor. The processor of the computer device is used for providing calculation and control capability and supporting the operation of the whole device. The memory of the computer device may have stored thereon computer readable instructions that, when executed by the processor, cause the processor to perform a method of visual chart optimization. The network interface of the computer device is used for connecting and communicating with the terminal. Those skilled in the art will appreciate that the architecture shown in fig. 2 is merely a block diagram of some of the structures associated with the disclosed aspects and is not intended to limit the computing devices to which the disclosed aspects apply, as particular computing devices may include more or less components than those shown, or may combine certain components, or have a different arrangement of components. Wherein the medium is a readable storage medium.
The visualization chart optimization method provided by the embodiment of the application will be described in detail below with reference to fig. 3 to 5. The method may be implemented in dependence on a computer program, operable on a visual chart optimization system based on a von neumann architecture. The computer program may be integrated into the application or may run as a separate tool-like application.
The embodiment of the application can acquire and process related data based on an artificial intelligence technology. Among them, artificial Intelligence (AI) is a theory, method, technique and application system that simulates, extends and expands human Intelligence using a digital computer or a machine controlled by a digital computer, senses the environment, acquires knowledge and uses the knowledge to obtain the best result.
The artificial intelligence base technologies generally include technologies such as sensors, dedicated artificial intelligence chips, cloud computing, distributed storage, large visual chart optimization technologies, operation/interaction systems, mechatronics, and the like. The artificial intelligence software technology mainly comprises a computer vision technology, a robot technology, a biological recognition technology, a voice processing technology, a natural language processing technology, machine learning/deep learning and the like.
Referring to fig. 3, a schematic flow chart diagram of a visualization chart optimization method is provided in an embodiment of the present application. As shown in fig. 3, the method of the embodiment of the present application may include the following steps:
s101, determining a visual chart to be optimized in a front-end page, and positioning a CSS object corresponding to the visual chart to be optimized;
the front-end page is a web page of a web end, and each web page comprises a large number of visual charts.
In general, after the system is deployed online to a production environment, problems still occur inevitably, for example, a visual chart in a webpage is spaced a little less or is higher than the visual chart to be optimized.
In the embodiment of the application, a visual chart to be optimized in a front-end page is determined, a web front-end code block to which the visual chart to be optimized belongs is loaded, all CSS objects are searched in the web front-end code block in a traversing mode, a depth tree of all CSS objects is constructed, a search identifier of the visual chart to be optimized is determined, searching is performed in the depth tree according to the search identifier and in combination with a depth-first traversing algorithm, a search result is obtained, and finally the CSS object corresponding to the visual chart to be optimized is determined according to the search result.
S102, when receiving class name data input aiming at the CSS object, determining a target CSS abbreviation class name of the CSS object according to the class name data and a preset CSS class name rule base;
the class name data is code data input by a user on a front-end code editor, and the code data can be one character or a plurality of characters. The preset CSS class name rule base is a standard class name database created by the currently specified CSS abbreviated class names.
In the embodiment of the application, when class name data input for a CSS object is received, if the class name data is a single character, fuzzy search is performed in a preset CSS class name rule base through a regular expression to obtain a CSS abbreviation class name sequence of the CSS object, then the CSS abbreviation class name sequence is displayed, and finally when a selection instruction for the displayed CSS abbreviation class name sequence is received, a target CSS abbreviation class name is determined in the CSS abbreviation class name sequence according to the selection instruction, for example, the target CSS abbreviation class name is vueclass-mt-10.
Specifically, when a CSS abbreviation class name sequence is displayed, the priority of each CSS abbreviation class name in the CSS abbreviation class name sequence is determined, the CSS abbreviation class name sequence is sequenced based on the sequence of the priority to obtain a plurality of sequenced CSS abbreviation class names, a visual window is constructed according to preset size parameters, the number of elements capable of being accommodated in the visual window is calculated, and finally CSS abbreviation class names of the number of the elements capable of being accommodated are sequentially selected from the sequenced CSS abbreviation class names to be displayed in the visual window, and the rest CSS abbreviation class names after selection are hidden.
Specifically, when determining the priority of each CSS abbreviated class name in the CSS abbreviated class name sequence, firstly counting the use frequency of each CSS abbreviated class name in the CSS abbreviated class name sequence, and then determining the priority of each CSS abbreviated class name based on the use frequency of each CSS abbreviated class name;
or firstly calculating the association degree between each CSS abbreviated class name in the CSS abbreviated class name sequence and the CSS object corresponding to the visual chart to be optimized to obtain the association degree of each CSS abbreviated class name, and then determining the priority of each CSS abbreviated class name according to the association degree of each CSS abbreviated class name.
Further, when hidden CSS abbreviated class names are processed, firstly, when a sliding instruction for a sliding key on a visual window is received in real time, a sliding distance is determined according to the sliding instruction, then, the number of elements capable of being displayed is calculated according to the sliding distance, finally, CSS abbreviated class names capable of being displayed in number are sequentially selected from the CSS abbreviated class names displayed in the visual window for hiding, and the CSS abbreviated class names capable of being displayed in number are sequentially selected from the hidden CSS abbreviated class names for displaying.
In the embodiment of the application, if the class name data is a plurality of characters and the characters are not newly added within the preset time duration, whether the plurality of characters exist in the preset CSS class name rule base is judged, and if the plurality of characters exist in the preset CSS class name rule base, the plurality of characters are determined as the target CSS abbreviated class name.
Or if the plurality of characters do not exist in the preset CSS class name rule base, constructing an error description text for displaying, then deleting the last character of the plurality of characters, if the deleted residual characters exist in the preset CSS class name rule base, constructing a correct description text for displaying based on the deleted residual characters, and finally determining the deleted residual characters as the target CSS abbreviation class name when a determination instruction is received.
For example, as shown in FIG. 4, class name data input for a CSS object is first received and then analyzed. If the input character is a single character, fuzzy search is carried out in a preset CSS class name rule base based on the single character, and all searched class names are displayed in a prompt box for a user to select. If the input is the complete class name, correctness verification is carried out based on a preset CSS class name rule base, if the input is the correct class name, prompting is not carried out, if the input is the wrong class name, prompting error reporting is carried out, the last character of the input class name data is deleted, verification is continued, and if the input is the correct class name, prompting is carried out.
S103, configuring chart optimization parameters aiming at the target CSS abbreviation class name, and optimizing the visual chart to be optimized based on the chart optimization parameters to generate the optimized visual chart.
Wherein the chart optimization parameter is a parameter for specifically controlling the chart change, such as margin-top:10px.
In the embodiment of the application, after the object CSS abbreviation class name is obtained, chart optimization parameters can be configured according to the object CSS abbreviation class name, specifically, a style label can be directly added below a vue file when a page is analyzed, the chart optimization parameters are automatically generated in the style label as vue class-mt-10 Margin-top:10px }, and finally, the chart optimization parameters can be automatically operated to optimize a visual chart to be optimized, so that the optimized visual chart is generated.
Adding a plug-in special for processing abbreviation class names, storing part of contents in a development document into the plug-in, storing all available CSS abbreviation class names into a set, searching the set for filtering when a user fills in the abbreviation class names, filtering out abbreviations with the user filling contents as prefixes, and popping up the abbreviations as input prompts for the user to select. Or after the user writes the abbreviation style, the user takes the abbreviation name and searches in the abbreviation set to determine whether the user fills in the correct format, if not, the user can make a mistake in the ide to prompt that the abbreviation of the class name is wrong (the error prompt of the ide is only a prompt and is irrelevant to code operation). If the user's class name abbreviation is wrong, we can remove the last letter from the retrieved class name to see if there is a similar abbreviated class name in the collection, and if so, prompt in the save message if you want to write ' xxxx ', if there is no similarity, or if there is a special lot of similarity, then no prompt is made. Therefore, a user can always pay attention to the code on the editor without searching online development documents, and the efficiency is improved.
In the embodiment of the application, the visual chart optimization system firstly determines a visual chart to be optimized in a front-end page, locates a CSS object corresponding to the visual chart to be optimized, then determines a target CSS abbreviation class name of the CSS object according to class name data and a preset CSS class name rule base when receiving class name data input aiming at the CSS object, and finally configures chart optimization parameters aiming at the target CSS abbreviation class name and optimizes the visual chart to be optimized based on the chart optimization parameters to generate an optimized visual chart. According to the method and the device, when the class name data are received, the target CSS abbreviated class name can be determined through the class name data and the preset CSS class name rule base, and the preset CSS class name rule base integrates the standard CSS abbreviated class name, so that the writing time of the correct CSS abbreviated class name is shortened, and the optimization efficiency of the visual chart is improved.
Please refer to fig. 5, which is a flowchart illustrating another method for optimizing a visualization chart according to an embodiment of the present application. As shown in fig. 5, the method of the embodiment of the present application may include the following steps:
s201, determining a visual chart to be optimized in a front-end page, and positioning a CSS object corresponding to the visual chart to be optimized;
s202, when receiving the class name data input aiming at the CSS object, judging characters;
s203, if the class name data are single characters, carrying out fuzzy search in a preset CSS class name rule base through a regular expression to obtain a CSS abbreviation class name sequence of a CSS object;
s204, displaying a CSS abbreviation class name sequence;
s205, when a selection instruction for the displayed CSS abbreviated class name sequence is received, determining a target CSS abbreviated class name in the CSS abbreviated class name sequence according to the selection instruction;
s206, if the class name data are multiple characters and the characters are not newly added in a preset duration, determining the multiple characters as target CSS abbreviation class names if the multiple characters exist in a preset CSS class name rule base;
s207, if the characters do not exist in a preset CSS class name rule base, constructing an error description text for displaying; deleting a last character of the plurality of characters; if the deleted residual characters exist in a preset CSS class name rule base, constructing a correct description text based on the deleted residual characters for displaying; when a determining instruction is received, determining the deleted residual characters as target CSS abbreviation class names;
s208, configuring chart optimization parameters aiming at the target CSS abbreviation class names, and optimizing the visual chart to be optimized based on the chart optimization parameters to generate the optimized visual chart.
In the embodiment of the application, the visual chart optimization system firstly determines a visual chart to be optimized in a front-end page, locates a CSS object corresponding to the visual chart to be optimized, then determines a target CSS abbreviation class name of the CSS object according to class name data and a preset CSS class name rule base when receiving class name data input aiming at the CSS object, and finally configures chart optimization parameters aiming at the target CSS abbreviation class name and optimizes the visual chart to be optimized based on the chart optimization parameters to generate an optimized visual chart. According to the method and the device, when the class name data are received, the target CSS abbreviated class name can be determined through the class name data and the preset CSS class name rule base, and the preset CSS class name rule base integrates the standard CSS abbreviated class name, so that the writing time of the correct CSS abbreviated class name is shortened, and the optimization efficiency of the visual chart is improved.
The following are embodiments of systems of the present invention that may be used to perform embodiments of methods of the present invention. For details which are not disclosed in the embodiments of the system of the present invention, reference is made to the embodiments of the method of the present invention.
Referring to fig. 6, a schematic structural diagram of a visualization chart optimization system according to an exemplary embodiment of the present invention is shown. The visual chart optimization system may be implemented as all or part of a device in software, hardware, or a combination of both. The system 1 comprises a CSS object positioning module 10, a target CSS abbreviation class name determining module 20 and a visual chart optimizing module 30.
The CSS object positioning module 10 is used for determining a visual chart to be optimized in a front-end page and positioning a CSS object corresponding to the visual chart to be optimized;
a target CSS abbreviated class name determining module 20, configured to determine a target CSS abbreviated class name of a CSS object according to class name data and a preset CSS class name rule base when receiving class name data input for the CSS object;
and the visual chart optimization module 30 is configured to configure chart optimization parameters for the target CSS abbreviation class name, and optimize the visual chart to be optimized based on the chart optimization parameters to generate an optimized visual chart.
It should be noted that, when the visualized chart optimization system provided in the foregoing embodiment executes the visualized chart optimization method, only the division of the functional modules is used as an example, and in practical applications, the functions may be distributed to different functional modules according to needs, that is, the internal structure of the device is divided into different functional modules, so as to complete all or part of the functions described above. In addition, the visualized chart optimization system and the visualized chart optimization method provided by the above embodiments belong to the same concept, and details of the implementation process are shown in the method embodiments, which are not described herein again.
The above-mentioned serial numbers of the embodiments of the present application are merely for description and do not represent the merits of the embodiments.
In the embodiment of the application, the visual chart optimization system firstly determines a visual chart to be optimized in a front-end page, locates a CSS object corresponding to the visual chart to be optimized, then determines a target CSS abbreviation class name of the CSS object according to class name data and a preset CSS class name rule base when receiving class name data input aiming at the CSS object, and finally configures chart optimization parameters aiming at the target CSS abbreviation class name and optimizes the visual chart to be optimized based on the chart optimization parameters to generate an optimized visual chart. According to the method and the device, when the class name data are received, the target CSS abbreviated class name can be determined through the class name data and the preset CSS class name rule base, and the preset CSS class name rule base integrates the standard CSS abbreviated class name, so that the writing time of the correct CSS abbreviated class name is shortened, and the optimization efficiency of the visual chart is improved.
In one embodiment, a computer device is provided, the device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the following steps when executing the computer program: determining a visual chart to be optimized in a front-end page, and positioning a CSS object corresponding to the visual chart to be optimized; when receiving class name data input aiming at the CSS object, determining a target CSS abbreviated class name of the CSS object according to the class name data and a preset CSS class name rule base; and configuring chart optimization parameters aiming at the target CSS abbreviation class name, and optimizing the visual chart to be optimized based on the chart optimization parameters to generate the optimized visual chart.
In one embodiment, when the processor determines the target CSS abbreviated class name of the CSS object according to the class name data and the preset CSS class name rule base, the following operations are specifically performed:
if the class name data are single characters, fuzzy search is carried out in a preset CSS class name rule base through a regular expression to obtain a CSS abbreviation class name sequence of a CSS object; displaying a CSS abbreviation class name sequence; when a selection instruction for the displayed CSS abbreviated class name sequence is received, a target CSS abbreviated class name is determined in the CSS abbreviated class name sequence according to the selection instruction.
In one embodiment, when the processor determines a target CSS abbreviated class name of a CSS object according to class name data and a preset CSS class name rule base, the following operations are specifically performed:
if the class name data are a plurality of characters and the characters are not newly added within the preset time length, judging whether the plurality of characters exist in a preset CSS class name rule base or not; if the plurality of characters exist in a preset CSS class name rule base, determining the plurality of characters as target CSS abbreviation class names; or if the characters do not exist in a preset CSS class name rule base, constructing an error description text for displaying; deleting a last character of the plurality of characters; if the deleted residual characters exist in a preset CSS class name rule base, constructing a correct description text based on the deleted residual characters for displaying; and when a determination instruction is received, determining the residual deleted characters as target CSS abbreviation class names.
In one embodiment, the processor performs the following operations when displaying the CSS abbreviated class name sequence:
determining the priority of each CSS abbreviation class name in the CSS abbreviation class name sequence; sequencing the CSS abbreviation class name sequence based on the high-low sequence of the priority to obtain a plurality of sequenced CSS abbreviation class names; constructing a visual window according to the preset size parameters, and calculating the number of elements which can be accommodated in the visual window; and sequentially selecting CSS abbreviation class names capable of containing the number of elements from the sorted plurality of CSS abbreviation class names, displaying the CSS abbreviation class names in a visual window, and hiding the remaining CSS abbreviation class names after selection.
In one embodiment, the processor, when determining the priority of each CSS abbreviated class name in the sequence of CSS abbreviated class names, specifically performs the following:
counting the use frequency of each CSS abbreviated class name in the CSS abbreviated class name sequence; determining a priority for each CSS abbreviation class name based on a frequency of use of each CSS abbreviation class name; or calculating the association degree between each CSS abbreviation class name in the CSS abbreviation class name sequence and the CSS object corresponding to the visual chart to be optimized to obtain the association degree of each CSS abbreviation class name; the priority of each CSS abbreviated class name is determined according to the degree of association of each CSS abbreviated class name.
In one embodiment, the processor further performs the following:
when a sliding instruction for a sliding key on a visual window is received in real time, determining a sliding distance according to the sliding instruction; calculating the number of elements capable of being displayed according to the sliding distance; and sequentially selecting CSS abbreviation class names with displayable element quantity from the CSS abbreviation class names displayed in the visual window for hiding, and sequentially selecting the CSS abbreviation class names with displayable element quantity from the hidden CSS abbreviation class names for displaying.
In an embodiment, when the processor locates the CSS object corresponding to the visualization chart to be optimized, the following operations are specifically performed:
loading a web front-end code block to which a visual chart to be optimized belongs; traversing and searching all CSS objects in the web front-end code block; constructing a depth tree of all CSS objects; determining a search identifier of a visual chart to be optimized; searching in the depth tree by combining a depth-first traversal algorithm according to the search identifier to obtain a search result; and determining the CSS object corresponding to the visual chart to be optimized according to the search result.
In the embodiment of the application, the visual chart optimization system firstly determines a visual chart to be optimized in a front-end page, locates a CSS object corresponding to the visual chart to be optimized, then determines a target CSS abbreviation class name of the CSS object according to class name data and a preset CSS class name rule base when receiving class name data input aiming at the CSS object, and finally configures chart optimization parameters aiming at the target CSS abbreviation class name and optimizes the visual chart to be optimized based on the chart optimization parameters to generate an optimized visual chart. According to the method and the device, when the class name data are received, the target CSS abbreviated class name can be determined through the class name data and the preset CSS class name rule base, and the preset CSS class name rule base integrates the standard CSS abbreviated class name, so that the writing time of the correct CSS abbreviated class name is shortened, and the optimization efficiency of the visual chart is improved.
In one embodiment, a medium is presented having computer-readable instructions stored thereon which, when executed by one or more processors, cause the one or more processors to perform the steps of: determining a visual chart to be optimized in a front-end page, and positioning a CSS object corresponding to the visual chart to be optimized; when receiving class name data input aiming at the CSS object, determining a target CSS abbreviated class name of the CSS object according to the class name data and a preset CSS class name rule base; and configuring chart optimization parameters aiming at the target CSS abbreviation class name, and optimizing the visual chart to be optimized based on the chart optimization parameters to generate the optimized visual chart.
In one embodiment, when the processor determines the target CSS abbreviated class name of the CSS object according to the class name data and the preset CSS class name rule base, the following operations are specifically performed:
if the class name data are single characters, fuzzy search is carried out in a preset CSS class name rule base through a regular expression to obtain a CSS abbreviation class name sequence of a CSS object; displaying a CSS abbreviation class name sequence; when a selection instruction for the displayed CSS abbreviation class name sequence is received, a target CSS abbreviation class name is determined in the CSS abbreviation class name sequence according to the selection instruction.
In one embodiment, when the processor determines the target CSS abbreviated class name of the CSS object according to the class name data and the preset CSS class name rule base, the following operations are specifically performed:
if the class name data are a plurality of characters and the characters are not newly added within the preset time length, judging whether the plurality of characters exist in a preset CSS class name rule base or not; if the plurality of characters exist in a preset CSS class name rule base, determining the plurality of characters as target CSS abbreviation class names; or if the characters do not exist in a preset CSS class name rule base, constructing an error description text for displaying; deleting a last character of the plurality of characters; if the deleted residual characters exist in a preset CSS class name rule base, constructing a correct description text based on the deleted residual characters for displaying; and when a determination instruction is received, determining the deleted residual characters as target CSS abbreviation class names.
In one embodiment, the processor performs the following operations when displaying the CSS abbreviated class name sequence:
determining a priority for each CSS abbreviated class name in the sequence of CSS abbreviated class names; sequencing the CSS abbreviation class name sequence based on the high-low sequence of the priority to obtain a plurality of sequenced CSS abbreviation class names; constructing a visual window according to the preset size parameters, and calculating the number of elements which can be accommodated in the visual window; and sequentially selecting the CSS abbreviated class names capable of containing the number of elements from the sequenced plurality of CSS abbreviated class names, displaying the CSS abbreviated class names in a visual window, and hiding the remaining CSS abbreviated class names after selection.
In one embodiment, the processor, when determining the priority of each CSS abbreviated class name in the sequence of CSS abbreviated class names, specifically performs the following:
counting the use frequency of each CSS abbreviation class name in the CSS abbreviation class name sequence; determining a priority for each CSS abbreviation class name based on a frequency of use of each CSS abbreviation class name; or calculating the association degree between each CSS abbreviated class name in the CSS abbreviated class name sequence and the CSS object corresponding to the visual chart to be optimized to obtain the association degree of each CSS abbreviated class name; and determining the priority of each CSS abbreviation class name according to the relevance of each CSS abbreviation class name.
In one embodiment, the processor further performs the following:
when a sliding instruction for a sliding key on a visual window is received in real time, determining a sliding distance according to the sliding instruction; calculating the number of displayable elements according to the sliding distance; and sequentially selecting the CSS abbreviated class names capable of displaying the number of elements from the CSS abbreviated class names displayed in the visual window for hiding, and sequentially selecting the CSS abbreviated class names capable of displaying the number of elements from the hidden CSS abbreviated class names for displaying.
In an embodiment, when the processor locates the CSS object corresponding to the visualization chart to be optimized, the following operations are specifically performed:
loading a web front-end code block to which a visual chart to be optimized belongs; traversing and searching all CSS objects in the web front-end code block; constructing a depth tree of all CSS objects; determining a search identifier of a visual chart to be optimized; searching in the depth tree by combining a depth-first traversal algorithm according to the search identifier to obtain a search result; and determining the CSS object corresponding to the visual chart to be optimized according to the search result.
In the embodiment of the application, the visual chart optimization system firstly determines a visual chart to be optimized in a front-end page, locates a CSS object corresponding to the visual chart to be optimized, then determines a target CSS abbreviation class name of the CSS object according to class name data and a preset CSS class name rule base when receiving class name data input aiming at the CSS object, and finally configures chart optimization parameters aiming at the target CSS abbreviation class name and optimizes the visual chart to be optimized based on the chart optimization parameters to generate an optimized visual chart. According to the method and the device, when the class name data are received, the target CSS abbreviated class name can be determined through the class name data and the preset CSS class name rule base, and the preset CSS class name rule base integrates the standard CSS abbreviated class name, so that the writing time of the correct CSS abbreviated class name is shortened, and the optimization efficiency of the visual chart is improved.
It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above may be implemented by a computer program, which may be stored in a computer readable medium, and when executed, may include the processes of the embodiments of the methods described above. The medium may be a non-volatile medium such as a magnetic disk, an optical disk, a Read-Only Memory (ROM), or a Random Access Memory (RAM).
The technical features of the above embodiments can be arbitrarily combined, and for the sake of brevity, all possible combinations of the technical features in the above embodiments are not described, but should be considered as the scope of the present specification as long as there is no contradiction between the combinations of the technical features.
The above examples only show some embodiments of the present invention, and the description thereof is more specific and detailed, but not construed as limiting the scope of the present invention. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the inventive concept, which falls within the scope of the present invention. Therefore, the protection scope of the present patent shall be subject to the appended claims.

Claims (10)

1. A method for visual chart optimization, the method comprising:
determining a visual chart to be optimized in a front-end page, and positioning a CSS object corresponding to the visual chart to be optimized;
when receiving class name data input aiming at the CSS object, determining a target CSS abbreviation class name of the CSS object according to the class name data and a preset CSS class name rule base;
and configuring chart optimization parameters aiming at the target CSS abbreviation class name, and optimizing the visual chart to be optimized based on the chart optimization parameters to generate an optimized visual chart.
2. The method of claim 1, wherein determining the target CSS abbreviated class name for the CSS object based on the class name data and a preset CSS class name rule base comprises:
if the class name data are single characters, fuzzy search is carried out in a preset CSS class name rule base through a regular expression to obtain a CSS abbreviation class name sequence of a CSS object;
displaying the CSS abbreviation class name sequence;
when a selection instruction aiming at the displayed CSS abbreviation class name sequence is received, determining a target CSS abbreviation class name in the CSS abbreviation class name sequence according to the selection instruction.
3. The method of claim 1, wherein determining the target CSS abbreviated class name for the CSS object based on the class name data and a preset CSS class name rule base comprises:
if the class name data are a plurality of characters and the characters are not newly added in a preset time length, judging whether the characters exist in a preset CSS class name rule base or not;
if the characters exist in a preset CSS class name rule base, determining the characters as target CSS abbreviation class names;
or,
if the characters do not exist in a preset CSS class name rule base, constructing an error description text for displaying;
deleting a last character of the plurality of characters;
if the deleted residual characters exist in a preset CSS class name rule base, constructing a correct description text based on the deleted residual characters for displaying;
and when a determination instruction is received, determining the deleted residual characters as target CSS abbreviation class names.
4. The method of claim 2, wherein said displaying said sequence of CSS abbreviated class names comprises:
determining the priority of each CSS abbreviation class name in the CSS abbreviation class name sequence;
sequencing the CSS abbreviation class name sequence based on the high-low sequence of the priority to obtain a plurality of sequenced CSS abbreviation class names;
constructing a visual window according to preset size parameters, and calculating the number of elements which can be accommodated in the visual window;
and sequentially selecting CSS abbreviation class names capable of containing the number of elements from the plurality of sequenced CSS abbreviation class names, displaying the CSS abbreviation class names in the visual window, and hiding the remaining CSS abbreviation class names after selection.
5. The method of claim 4, wherein determining the priority of each CSS abbreviated class name in the sequence of CSS abbreviated class names comprises:
counting the use frequency of each CSS abbreviated class name in the CSS abbreviated class name sequence;
determining a priority of each CSS abbreviated class name based on a frequency of use of the each CSS abbreviated class name;
or,
calculating the association degree between each CSS abbreviated class name in the CSS abbreviated class name sequence and the CSS object corresponding to the visual chart to be optimized to obtain the association degree of each CSS abbreviated class name;
and determining the priority of each CSS abbreviated class name according to the association degree of each CSS abbreviated class name.
6. The method of claim 4, further comprising:
when a sliding instruction for a sliding key on the visual window is received in real time, determining a sliding distance according to the sliding instruction;
calculating the number of elements capable of being displayed according to the sliding distance;
and sequentially selecting the CSS abbreviated class names with the displayable element quantity from the CSS abbreviated class names displayed in the visualization window for hiding, and sequentially selecting the CSS abbreviated class names with the displayable element quantity from the hidden CSS abbreviated class names for displaying.
7. The method of claim 1, wherein the locating the CSS object corresponding to the visualization chart to be optimized comprises:
loading a web front-end code block to which the visual chart to be optimized belongs;
traversing and searching all CSS objects in the web front-end code block;
constructing a depth tree of all CSS objects;
determining a search identifier of the visual chart to be optimized;
searching in the depth tree by combining a depth-first traversal algorithm according to the search identifier to obtain a search result;
and determining the CSS object corresponding to the visual chart to be optimized according to the search result.
8. A visual chart optimization system, the system comprising:
the CSS object positioning module is used for determining a visual chart to be optimized in a front-end page and positioning a CSS object corresponding to the visual chart to be optimized;
the target CSS abbreviated class name determining module is used for determining a target CSS abbreviated class name of the CSS object according to the class name data and a preset CSS class name rule base when the class name data input aiming at the CSS object is received;
and the visual chart optimization module is used for configuring chart optimization parameters aiming at the target CSS abbreviation class names, optimizing the visual chart to be optimized based on the chart optimization parameters and generating the optimized visual chart.
9. A computer device comprising a memory and a processor, the memory having stored therein computer-readable instructions which, when executed by the processor, cause the processor to perform the steps of the visual chart optimization method according to any one of claims 1 to 7.
10. A medium having computer-readable instructions stored thereon which, when executed by one or more processors, cause the one or more processors to perform the steps of optimizing a visualization chart as recited in any one of claims 1 to 7.
CN202210853065.5A 2022-07-20 2022-07-20 Visual chart optimization method, system, computer equipment and medium Pending CN115221853A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210853065.5A CN115221853A (en) 2022-07-20 2022-07-20 Visual chart optimization method, system, computer equipment and medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210853065.5A CN115221853A (en) 2022-07-20 2022-07-20 Visual chart optimization method, system, computer equipment and medium

Publications (1)

Publication Number Publication Date
CN115221853A true CN115221853A (en) 2022-10-21

Family

ID=83612046

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210853065.5A Pending CN115221853A (en) 2022-07-20 2022-07-20 Visual chart optimization method, system, computer equipment and medium

Country Status (1)

Country Link
CN (1) CN115221853A (en)

Similar Documents

Publication Publication Date Title
US9229927B2 (en) Macro replacement of natural language input
US9047346B2 (en) Reporting language filtering and mapping to dimensional concepts
CN102508845B (en) Interface to navigate and search a concept hierarchy
JPH04505227A (en) Document generation device and method
CN111563220A (en) Business website project construction method and device, computer equipment and storage medium
JP4502615B2 (en) Similar sentence search device, similar sentence search method, and program
CN110399448B (en) Chinese place name address searching and matching method, terminal and computer readable storage medium
CN110825840B (en) Word bank expansion method, device, equipment and storage medium
CN113051011A (en) RPA and AI combined image information extraction method and device
CN111625638A (en) Question processing method, device and equipment and readable storage medium
CN117787290A (en) Drawing prompting method and device based on knowledge graph
CN115757054A (en) Log recording method, system, computer equipment and medium
CN115221853A (en) Visual chart optimization method, system, computer equipment and medium
CN116400910A (en) Code performance optimization method based on API substitution
CN116185416A (en) Operator interface file generation method, device, equipment and storage medium
CN113535916B (en) Question and answer method and device based on table and computer equipment
CN114625372A (en) Automatic component compiling method and device, computer equipment and storage medium
CN110716994B (en) Retrieval method and device supporting heterogeneous geographic data resource retrieval
CN107015955A (en) Document edit method and device
CN111753548A (en) Information acquisition method and device, computer storage medium and electronic equipment
CN117725190B (en) Multi-round question-answering method, system, terminal and storage medium based on large language model
Düwel Enhancing system analysis by means of formal concept analysis
CN117556033B (en) Method and device for determining embedded model parameters of question-answering system and computing equipment
CN109902278B (en) Annotating processing method and device
CN116501297A (en) Method, system, computer equipment and medium for generating text of function points in webpage

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