CN113391807A - Data display method and device, storage medium and electronic equipment - Google Patents
Data display method and device, storage medium and electronic equipment Download PDFInfo
- Publication number
- CN113391807A CN113391807A CN202110713387.5A CN202110713387A CN113391807A CN 113391807 A CN113391807 A CN 113391807A CN 202110713387 A CN202110713387 A CN 202110713387A CN 113391807 A CN113391807 A CN 113391807A
- Authority
- CN
- China
- Prior art keywords
- data
- dom object
- display
- dom
- determining
- 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 OR CALCULATING; 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
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The present disclosure relates to a data display method, apparatus, storage medium, and electronic device, the method comprising: acquiring target data to be displayed; determining a Document Object Model (DOM) object for data display, and determining the data change condition of the target data compared with historical data; and determining a display style of the DOM object according to the data change condition, and displaying the DOM object, wherein the display area of the DOM object is used for representing the change data amount of the target data compared with the historical data, and the display color of the DOM object is used for representing the data change trend of the target data compared with the historical data. Through the mode, data visualization can be carried out based on the DOM object, the data visualization process is simplified, and therefore the data visualization efficiency is improved.
Description
Technical Field
The present disclosure relates to the field of computer technologies, and in particular, to a data display method and apparatus, a storage medium, and an electronic device.
Background
Data visualization mainly displays data by means of graphics so as to clearly and effectively convey information. In the related art, data visualization is mainly implemented by cans or SVG (Scalable Vector Graphics). In the front-end data visualization process, a user needs to learn JavaScript alone except for learning HTML (hypertext Markup Language), and needs to learn SVG Language rules alone in the SVG mode, so that the learning costs of the two modes are high. Moreover, since the content of JavaScript and SVG language rules is various, it is difficult for a user to remember all the rules, and therefore, the user may often need to manually browse the corresponding writing rules during the data visualization process, thereby affecting the data visualization efficiency.
Disclosure of Invention
This summary is provided to introduce a selection of concepts in a simplified form that are further described below in the detailed description. This summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended to be used to limit the scope of the claimed subject matter.
In a first aspect, the present disclosure provides a data display method, the method comprising:
acquiring target data to be displayed;
determining a Document Object Model (DOM) object for data display, and determining the data change condition of the target data compared with historical data;
and determining a display style of the DOM object according to the data change condition, and displaying the DOM object, wherein the display area of the DOM object is used for representing the change data amount of the target data compared with the historical data, and the display color of the DOM object is used for representing the data change trend of the target data compared with the historical data.
In a second aspect, the present disclosure provides a data display apparatus, the apparatus comprising:
the acquisition module is used for acquiring target data to be displayed;
the determining module is used for determining a Document Object Model (DOM) object for data display and determining the data change condition of the target data compared with historical data;
and the display module is used for determining the display style of the DOM object according to the data change condition and displaying the DOM object, wherein the display area of the DOM object is used for representing the change data amount of the target data compared with the historical data, and the display color of the DOM object is used for representing the data change trend of the target data compared with the historical data.
In a third aspect, the present disclosure provides a non-transitory computer readable storage medium having stored thereon a computer program which, when executed by a processing apparatus, implements the steps of the method described in the first aspect.
In a fourth aspect, the present disclosure provides an electronic device comprising:
a storage device having a computer program stored thereon;
processing means for executing the computer program in the storage means to carry out the steps of the method of the first aspect.
Through the technical scheme, a new data visualization mode is provided, and different data change conditions can be displayed through different display styles of the DOM object. The display area of the DOM object can be used for representing the change data amount of the target data compared with the historical data, and the display color of the DOM object can be used for representing the data change trend of the target data compared with the historical data. Therefore, a user does not need to independently learn complex programming languages such as JavaScript or SVG, and pixel-level data display can be realized by changing the display area and the display color of the DOM object, so that the learning cost of the user is reduced, the data visualization process is simplified, and the data visualization efficiency is improved.
Additional features and advantages of the disclosure will be set forth in the detailed description which follows.
Drawings
The above and other features, advantages and aspects of various embodiments of the present disclosure will become more apparent by referring to the following detailed description when taken in conjunction with the accompanying drawings. Throughout the drawings, the same or similar reference numbers refer to the same or similar elements. It should be understood that the drawings are schematic and that elements and features are not necessarily drawn to scale. In the drawings:
FIG. 1 is a flow chart illustrating a method of displaying data according to an exemplary embodiment of the present disclosure;
FIG. 2 is a schematic diagram illustrating properties of DOM objects in a data display method according to an exemplary embodiment of the present disclosure;
FIG. 3 is a schematic diagram illustrating the setting of properties of DOM objects in a data display method according to an exemplary embodiment of the present disclosure;
FIG. 4 is a display diagram illustrating a DOM object in a data display method according to an exemplary embodiment of the present disclosure;
FIG. 5 is a block diagram illustrating a data display device according to an exemplary embodiment of the present disclosure;
fig. 6 is a block diagram illustrating an electronic device according to an exemplary embodiment of the present disclosure.
Detailed Description
Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While certain embodiments of the present disclosure are shown in the drawings, it is to be understood that the present disclosure may be embodied in various forms and should not be construed as limited to the embodiments set forth herein, but rather are provided for a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the disclosure are for illustration purposes only and are not intended to limit the scope of the disclosure.
It should be understood that the various steps recited in the method embodiments of the present disclosure may be performed in a different order, and/or performed in parallel. Moreover, method embodiments may include additional steps and/or omit performing the illustrated steps. The scope of the present disclosure is not limited in this respect.
The term "include" and variations thereof as used herein are open-ended, i.e., "including but not limited to". The term "based on" is "based, at least in part, on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". Relevant definitions for other terms will be given in the following description.
It should be noted that the terms "first", "second", and the like in the present disclosure are only used for distinguishing different devices, modules or units, and are not used for limiting the order or interdependence relationship of the functions performed by the devices, modules or units. It is further noted that references to "a", "an", and "the" modifications in the present disclosure are intended to be illustrative rather than limiting, and that those skilled in the art will recognize that "one or more" may be used unless the context clearly dictates otherwise.
The names of messages or information exchanged between devices in the embodiments of the present disclosure are for illustrative purposes only, and are not intended to limit the scope of the messages or information.
As background art, in the related art, data visualization is mainly implemented by Canvas or SVG. In the Canvas mode, since JavaScript is needed for data visualization, a user needs to learn JavaScript separately in addition to learning HTML (HyperText markup language) in the front-end data visualization process. And, by means of Canvas, if interaction is to be realized, manual programming setting is required through mouse coordinates, and if drawn graphics are to be moved, the graphics are required to be erased and then redrawn, and animation is formed by using visual errors of human eyes. In addition to learning HTML, the user needs to learn SVG language rules separately by means of SVG. It should also be understood that, unlike by Canvas, SVG is an image format based on XML (eXtensible Markup Language) syntax, describing graphics by XML documents. However, the SVG language rules have a lot of contents, and it is difficult for a user to completely remember all SVG language rules, so that the user may often need to manually browse the corresponding writing rules in the data visualization process, thereby affecting the data visualization efficiency.
In view of this, the present disclosure provides a data display method, which is used for performing data visualization based on a DOM object, and simplifying a data visualization process, thereby improving data visualization efficiency.
Fig. 1 is a flowchart illustrating a data display method according to an exemplary embodiment of the present disclosure. Referring to fig. 1, the data display method includes the steps of:
And 103, determining a display style of the DOM object according to the data change condition, and displaying the DOM object, wherein the display area of the DOM object is used for representing the change data amount of the target data compared with the historical data, and the display color of the DOM object is used for representing the data change trend of the target data compared with the historical data.
It should be understood at the outset that the DOM (Document Object Model) is a standard for W3C (world Wide Web Consortium), which defines a standard for accessing HTML and XML documents, is a platform and language independent interface that allows programs and scripts to dynamically access and update the content, structure, and style of a Document. The DOM consists of a core DOM, which is a standard model for any structured document, an XML DOM, which is a standard model for an XML document, and an HTML DOM, which is a standard model for an HTML document. DOM is an API (Application Programming Interface) that is extended for XML for HTML. The DOM maps the entire page into a multi-layered node structure, with each component in an XML or HTML page being a node of some type that contains different types of data.
In the embodiment of the disclosure, the data change condition of the target data to be displayed compared with the historical data can be determined, and then the display style of the DOM object is determined according to the data change condition, so that a new data visualization mode is provided, and different data change conditions can be displayed through different display styles of the DOM object. The display area of the DOM object can be used for representing the change data amount of the target data compared with the historical data, and the display color of the DOM object can be used for representing the data change trend of the target data compared with the historical data. Therefore, a user does not need to independently learn complex programming languages such as JavaScript or SVG, and pixel-level data display can be realized by changing the display area and the display color of the DOM object, so that the learning cost of the user is reduced, the data visualization process is simplified, and the data visualization efficiency is improved.
In order to make the data display method provided by the present disclosure more understandable to those skilled in the art, the above steps are exemplified in detail below.
The target data to be displayed may be, for example, the number of persons diagnosed in an epidemic situation. The data change condition of the target data compared with the historical data can comprise the change data amount and the data change trend of the target data compared with the historical data. For example, in an epidemic situation scenario, the change data volume may be the number of people diagnosed in a certain day compared with the number of people diagnosed in the previous day, and the data change trend may be a data trend in which the number of people diagnosed is increased, unchanged or decreased.
The display style of the DOM object can be determined according to the data change condition of the target data compared with the historical data, so that data visualization based on the DOM object is achieved. It should be understood that if the target data is increased compared to the historical data, the display area of the DOM object is used to represent the amount of changing data that is increased, and the display color is used to represent the data growth trend. If the target data is reduced compared with the historical data, the display area of the DOM object is used for representing the reduced change data amount, and the display color is used for representing the data reduction trend. If the data change trend of the target data compared with the historical data is that the number is unchanged, the display area of the DOM object can be 0, and a user can see that the display color of the DOM object is consistent with the background color of the preset display area.
It should be understood that DOM objects in embodiments of the present disclosure may be regular DOM objects or shadow DOM objects. Where the HTML tag elements within the regular DOM object are not kept isolated from the main document DOM. The shadow DOM can provide encapsulation for DOM and CSS (Cascading Style Sheets), so that elements in the shadow DOM are kept isolated from the DOM of the main document, thereby preventing CSS patterns of HTML elements in the DOM object from being leaked to other places, avoiding site accidents and improving the display effect of the DOM object.
Illustratively, the length and width of the DOM object may be specified by the length and width attributes of the DOM object. Therefore, determining the display style of the DOM object according to the data change of the target data compared with the historical data may be: and determining the value of the length attribute and the value of the width attribute of the DOM object according to the changed data quantity of the target data compared with the historical data, so that the changed data quantity is represented by the display area of the DOM object.
For example, referring to FIG. 2, DOM objects typically have the following properties: clientHeight, clientWidth, offsetHeight, offsetWidth, clientTop, clientLeft, offsetTop, offsetLeft, offsetParent, scrollWidth, scrollHeight, scrollLeft, and scrollTop. Wherein, clientHeight and clientWidth are used to describe the element inner dimension, which refers to the size of the element content (content) plus the inner margin (padding), and the part includes the frame (border), the outer frame and the scroll bar part. offsetHeight and offsetWidth are used to describe the element outer dimension, which refers to the element content plus the inner margin plus the bounding box dimension, excluding the outer margin and the scroll bar portion. clientTop and clientLeft are used for the horizontal and vertical distances between the edge of the inner margin and the outer edge of the bezel, i.e., the left and upper bezel widths, respectively. offsetTop and offsetLeft are used to indicate the distance of the top left corner of an element (outside border) from the top left corner of the parent container (offsettparent object) that has been located. The offsetParent object refers to the nearest located ancestor element of the element, and returns NULL if no ancestor element is located recursively up. scrollWidth and scrollHeight are the content area of the element plus the inner margin plus the overflow size, which is equal to clientHeight and clientWidth when the content just matches the content area without overflow. The scrollLeft and scrollTop refer to the position of the element scroll bar, and can be set according to actual conditions.
In the embodiment of the present disclosure, after determining the change data amount of the target data compared with the history data, the values of the attributes of the DOM objects may be determined according to the change data amount, so that the change data amount is represented by the display area of the DOM object.
In a possible mode, values of a content length attribute and a content width attribute of the DOM object can be determined according to a variation data volume of the target data compared with the historical data, wherein the content length attribute is used for representing the pixel length of the display content in the DOM object, and the content width attribute is used for representing the pixel width of the display content in the DOM object. And then, determining values of the DOM object background length attribute and the DOM object background width attribute according to the size of a preset display area corresponding to the DOM object, the value of the target width attribute and the value of the target length attribute.
Illustratively, the content length attribute may be clientHeight and the content width attribute may be clientWidth. Alternatively, the content length attribute may be offsetHeight and the content width attribute may be offsetWidth. The background length attribute may be offsetLeft and the background width attribute may be offsetTop.
For example, the values of the content length attribute and the content width attribute of the DOM object may be determined according to the changed data amount of the target data compared with the historical data and the preset data display scale. The preset data display proportion can represent the pixel occupied by the unit data, and can be set according to actual conditions. For example, the preset data display ratio is that 1 unit pixel occupies one tenth of a pixel, that is, 10 data occupies 1 pixel. It should be understood that for ease of computation, DOM objects in embodiments of the present disclosure may be displayed as squares of equal length and width. In this case, if the variation data amount of the target data compared with the history data is 100, it may be determined that the values of the content length attribute and the content width attribute of the DOM object are both 10, so that a square block of 10 × 10 pixels may be obtained, and the display area of the square block in the DOM object may represent the variation data amount of the target data compared with the history data.
For example, referring to fig. 3, if the preset display area is the area shown in box a, in the data visualization process, after the values of B1 and B2 are determined according to the changed data amount, that is, after the values of the content length attribute and the content width attribute are determined, the value of C1, that is, the value of the DOM object background length attribute is determined according to the length of box a and the value of B1. Similarly, the value of C2, i.e., the value of the DOM object background width attribute, can be determined according to the width of box a and the value of B2. It should be understood that, for convenience of calculation, in the embodiment of the present disclosure, the distance above and the distance below the display content and the preset display area are equal, and the distance to the left and the distance to the right of the display content and the preset display area are equal. Therefore, after determining B1 and B2, C1 and C2, that is, values of the background length attribute and the background width attribute, may be determined in conjunction with the length and width of the preset display area.
Through the method, the DOM object comprising the display background and the display content can be obtained. The display area (for example, the square in the above example) of the display content in the DOM object may represent a change data amount of the target data compared with the historical data, and the display background may perform uniform data display in a multi-data display scene, thereby improving the data display effect.
In other possible modes, the dynamic property of the target data to be displayed is considered, and the data display proportion can be dynamically changed according to the displayed data, so that the data visualization requirements under different scenes are better met. Specifically, the maximum value and the minimum value of the data may be determined according to the target data and the displayed historical data, and then the data display ratio used for representing the pixels occupied by the unit data may be determined according to the maximum value, the minimum value of the data and the size of the preset display area corresponding to the DOM object. And finally, determining the value of the length attribute and the value of the width attribute of the DOM object according to the data display proportion and the changed data amount of the target data compared with the historical data.
It should be understood that if the data display ratio is determined only according to the maximum value of the target data and the displayed data in the history data, the data with smaller data amount may have fewer pixels, and the data change condition cannot be clearly displayed. Similarly, if the data display ratio is determined only according to the target data and the minimum value of the data in the displayed historical data, the number of pixels corresponding to the data with a large data size may be large, and the data may overflow the preset display area, so that the data cannot be displayed well. Therefore, the embodiment of the disclosure determines the maximum value and the minimum value of data according to the target data and the displayed historical data, and then determines the data display scale according to the maximum value, the minimum value and the size of the preset display area corresponding to the DOM object. Therefore, the appropriate data display proportion suitable for most data can be obtained, data display is better performed, and the data display effect is improved.
In a possible manner, the history data may be displayed through a history data DOM object, the pixel length and the pixel width of the display content in the history data DOM object may be obtained according to a data change condition of the history data compared with the history data before, and the pixel length and the pixel width of the display content in the history data DOM object corresponding to the history data may be adjusted according to a data display ratio.
After the data display scale is determined according to the maximum data value, the minimum data value and the size of the preset display area corresponding to the DOM object, the data display scale may be different from the previous data display scale, for example, if the maximum data value is changed from some displayed historical data to the target data, the data display scale determined according to the maximum data value may be different from the previous data display scale determined according to the historical data. In this case, in order to unify the data display effect, the pixel length and the pixel width of the history data DOM object display content corresponding to the history data may be adjusted according to the newly determined data display scale. Therefore, after the data display proportion is re-determined each time, the display style of the DOM object of the historical data can be dynamically adjusted, so that the data change condition can be displayed in the same data dimension, and a user can better check the data change condition according to the display area of the DOM object.
In a possible manner, determining the display style of the DOM object according to the data change condition may also be: and if the data change trend of the target data is increased in number compared with the historical data, setting the color attribute of the DOM object to be a first color, if the data change trend of the target data is unchanged in number compared with the historical data, setting the color attribute of the DOM object to be a second color, and if the data change trend of the target data is decreased in number compared with the historical data, setting the color attribute of the DOM object to be a third color.
For example, if the data change trend of the target data compared with the historical data is in a quantity increase, the color attribute of the DOM object is determined to be red, if the data change trend of the target data compared with the historical data is in a quantity unchanged, the color attribute of the DOM object is determined to be gray, and if the data change trend of the target data compared with the historical data is in a quantity decrease, the color attribute of the DOM object is determined to be green. Therefore, the data change condition can be represented by different colors, and a user can conveniently and quickly know the data change trend according to the display color.
After the display style of the DOM object is determined, the DOM object with the determined display style can be displayed, so that the change data volume of the target data compared with the historical data can be displayed through the display area of the DOM object, the data change trend of the target data compared with the historical data is displayed through the display color of the DOM object, the data visualization process is simplified, and the data display efficiency is improved.
In a possible manner, the history data may be displayed through a history data DOM object, and displaying the DOM object may be: and displaying the DOM objects behind the historical data DOM objects at the same horizontal position of the display area where the historical data DOM objects are located, or displaying the DOM objects below the historical data DOM objects at the same vertical position of the display area where the historical data DOM objects are located. That is to say, the multiple data DOM objects can be arranged and displayed in rows or columns, so that a user can conveniently view the data change trend in a period of time.
In a possible mode, a numerical value of a change data volume of the target data compared with the historical data can be determined, and then the numerical value of the change data volume is displayed in a preset display area around the DOM object, so that a user can conveniently view the specific change data volume. Or, the data source and the data generation time corresponding to the target data can be displayed in another preset display area around the DOM object, so that the user can conveniently view the data source and the data generation time.
For example, referring to fig. 4, it is possible to display the data generation time above all DOM objects and to display a specific variation data amount below each DOM object. DOM objects of the same data source are arranged in the same row. For example, data corresponding to a first location may be arranged in a first row, and data corresponding to a second location may be arranged in a second row. In this case, if the target data is data corresponding to the first location, after the display style of the DOM object is determined according to the data change condition of the target data compared with the historical data, the DOM object may be displayed behind the last DOM object in the current first line. If the target data is data corresponding to the second location, after the display style of the DOM object is determined according to the data change condition of the target data compared with the historical data, the DOM object can be displayed behind the last DOM object in the current second row.
With continued reference to FIG. 4, each DOM object may correspond to a uniform preset display area, which may have the same background color. The display area within the DOM object displaying the content may characterize the amount of change data of the target data compared to the historical data of the previous day. If the target data is unchanged from the historical data of the previous day, the display area of the display content in the DOM object is 0, and the user can see that the display color of the display content in the DOM object is consistent with the background color of the preset display area, for example, the third DOM object in the second row in fig. 4. If the target data is increased compared with the historical data of the previous day, the numerical value below the DOM object represents the specific data increase amount, and the display content in the DOM object can be displayed in red (the display color of the DOM object is not shown in fig. 4). If the target data is reduced compared with the historical data of the previous day, the numerical value below the DOM object represents the specific data reduction amount, and the display content in the DOM object can be displayed in green (the display color of the DOM object is not shown in fig. 4).
By the method, different data change conditions can be displayed through different display styles of the DOM object. The display area of the DOM object can be used to display the amount of change data of the target data compared with the history data, and the display color of the DOM object can be used to display the data change trend of the target data compared with the history data. Therefore, the user does not need to independently learn complex programming languages such as JavaScript or SVG, and different data display can be realized by changing the display area and the display color of the DOM object, so that the learning cost of the user is reduced, the data visualization process is simplified, and the data visualization efficiency is improved.
Based on the same inventive concept, the disclosed embodiments also provide a data display device, which may be a part or all of an electronic device through software, hardware or a combination of both. Referring to fig. 5, the data display apparatus 500 may include:
an obtaining module 501, configured to obtain target data to be displayed;
a determining module 502, configured to determine a document object model DOM object for data display, and determine a data change condition of the target data compared with historical data;
and a display module 503, configured to determine a display style of the DOM object according to the data change condition, and display the DOM object, where a display area of the DOM object is used to represent a change data amount of the target data compared with the historical data, and a display color of the DOM object is used to represent a data change trend of the target data compared with the historical data.
Optionally, the display module 503 is configured to:
and determining the value of the length attribute and the value of the width attribute of the DOM object according to the changed data volume of the target data compared with the historical data, so as to represent the changed data volume through the display area of the DOM object.
Optionally, the display module 503 is configured to:
determining values of a content length attribute and a content width attribute of the DOM object according to the variation data volume of the target data compared with the historical data, wherein the content length attribute is used for representing the pixel length of the display content in the DOM object, and the content width attribute is used for representing the pixel width of the display content in the DOM object;
and determining values of the DOM object background length attribute and the DOM object background width attribute according to the size of a preset display area corresponding to the DOM object, the value of the target width attribute and the value of the target length attribute.
Optionally, the display module 503 is configured to:
determining a data maximum value and a data minimum value according to the target data and the displayed historical data;
determining a data display proportion according to the data maximum value, the data minimum value and the size of a preset display area corresponding to the DOM object, wherein the data display proportion is used for representing pixels occupied by unit data;
and determining the value of the length attribute and the value of the width attribute of the DOM object according to the data display proportion and the change data volume of the target data compared with the historical data.
Optionally, the history data is displayed through a history data DOM object, and the pixel length and the pixel width of the display content in the history data DOM object are obtained according to a data change condition of the history data compared with the history data before the earlier, the apparatus 500 further includes:
and the adjusting module is used for adjusting the pixel length and the pixel width of the display content in the DOM object of the historical data corresponding to the historical data according to the data display proportion.
Optionally, the display module 503 is configured to:
if the data change trend of the target data is increased in number compared with the historical data, setting the color attribute of the DOM object to be determined as a first color;
if the data change trend of the target data compared with the historical data is unchanged in quantity, determining that the color attribute of the DOM object is set to be a second color;
and if the data change trend of the target data is reduced in quantity compared with the historical data, determining that the color attribute of the DOM object is set to be a third color.
Optionally, the history data is displayed through a history data DOM object, the DOM object is displayed, and the display module 503 is configured to:
and displaying the DOM object behind the historical data DOM object at the same horizontal position of the display area of the historical data DOM object, or displaying the DOM object below the historical data DOM object at the same vertical position of the display area of the historical data DOM object.
Optionally, the apparatus 500 further comprises:
a value determination module for determining a value of a change data amount of the target data compared to the historical data;
and the numerical value display module is used for displaying the numerical value of the changed data volume in a preset display area around the DOM object.
With regard to the apparatus in the above-described embodiment, the specific manner in which each module performs the operation has been described in detail in the embodiment related to the method, and will not be elaborated here.
Based on the same inventive concept, the disclosed embodiments also provide a non-transitory computer-readable storage medium, on which a computer program is stored, which, when executed by a processing device, implements the steps of any of the above-described data display methods.
Based on the same inventive concept, an embodiment of the present disclosure further provides an electronic device, including:
a storage device having a computer program stored thereon;
and the processing device is used for executing the computer program in the storage device so as to realize the steps of any data display method.
Referring now to FIG. 6, a block diagram of an electronic device 600 suitable for use in implementing embodiments of the present disclosure is shown. The terminal device in the embodiments of the present disclosure may include, but is not limited to, a mobile terminal such as a mobile phone, a notebook computer, a digital broadcast receiver, a PDA (personal digital assistant), a PAD (tablet computer), a PMP (portable multimedia player), a vehicle terminal (e.g., a car navigation terminal), and the like, and a stationary terminal such as a digital TV, a desktop computer, and the like. The electronic device shown in fig. 6 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present disclosure.
As shown in fig. 6, electronic device 600 may include a processing means (e.g., central processing unit, graphics processor, etc.) 601 that may perform various appropriate actions and processes in accordance with a program stored in a Read Only Memory (ROM)602 or a program loaded from a storage means 608 into a Random Access Memory (RAM) 603. In the RAM 603, various programs and data necessary for the operation of the electronic apparatus 600 are also stored. The processing device 601, the ROM 602, and the RAM 603 are connected to each other via a bus 604. An input/output (I/O) interface 605 is also connected to bus 604.
Generally, the following devices may be connected to the I/O interface 605: input devices 606 including, for example, a touch screen, touch pad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; output devices 607 including, for example, a Liquid Crystal Display (LCD), a speaker, a vibrator, and the like; storage 608 including, for example, tape, hard disk, etc.; and a communication device 609. The communication means 609 may allow the electronic device 600 to communicate with other devices wirelessly or by wire to exchange data. While fig. 6 illustrates an electronic device 600 having various means, it is to be understood that not all illustrated means are required to be implemented or provided. More or fewer devices may alternatively be implemented or provided.
In particular, according to an embodiment of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program carried on a non-transitory computer readable medium, the computer program containing program code for performing the method illustrated by the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network via the communication means 609, or may be installed from the storage means 608, or may be installed from the ROM 602. The computer program, when executed by the processing device 601, performs the above-described functions defined in the methods of the embodiments of the present disclosure.
It should be noted that the computer readable medium in the present disclosure can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In contrast, in the present disclosure, a computer readable signal medium may comprise a propagated data signal with computer readable program code embodied therein, either in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: electrical wires, optical cables, RF (radio frequency), etc., or any suitable combination of the foregoing.
In some embodiments, the communication may be performed using any currently known or future developed network Protocol, such as HTTP (HyperText Transfer Protocol), and may be interconnected with any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network ("LAN"), a wide area network ("WAN"), the Internet (e.g., the Internet), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future developed network.
The computer readable medium may be embodied in the electronic device; or may exist separately without being assembled into the electronic device.
The computer readable medium carries one or more programs which, when executed by the electronic device, cause the electronic device to: acquiring target data to be displayed; determining a Document Object Model (DOM) object for data display, and determining the data change condition of the target data compared with historical data; and determining a display style of the DOM object according to the data change condition, and displaying the DOM object, wherein the display area of the DOM object is used for representing the change data amount of the target data compared with the historical data, and the display color of the DOM object is used for representing the data change trend of the target data compared with the historical data.
Computer program code for carrying out operations for the present disclosure may be written in any combination of one or more programming languages, including but not limited to an object oriented programming language such as Java, Smalltalk, C + +, and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The modules described in the embodiments of the present disclosure may be implemented by software or hardware. Wherein the name of a module in some cases does not constitute a limitation on the module itself.
The functions described herein above may be performed, at least in part, by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that may be used include: field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (ASSPs), systems on a chip (SOCs), Complex Programmable Logic Devices (CPLDs), and the like.
In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
Example 1 provides, in accordance with one or more embodiments of the present disclosure, a data display method including:
acquiring target data to be displayed;
determining a Document Object Model (DOM) object for data display, and determining the data change condition of the target data compared with historical data;
and determining a display style of the DOM object according to the data change condition, and displaying the DOM object, wherein the display area of the DOM object is used for representing the change data amount of the target data compared with the historical data, and the display color of the DOM object is used for representing the data change trend of the target data compared with the historical data.
Example 2 provides the method of example 1, the determining a display style of the DOM object according to the data variation, including:
and determining the value of the length attribute and the value of the width attribute of the DOM object according to the changed data volume of the target data compared with the historical data, so as to represent the changed data volume through the display area of the DOM object.
According to one or more embodiments of the present disclosure, example 3 provides the method of example 2, wherein determining a value of the DOM object height attribute and a value of the DOM object width attribute according to a change data amount of the target data compared with the historical data includes:
determining values of a content length attribute and a content width attribute of the DOM object according to the variation data volume of the target data compared with the historical data, wherein the content length attribute is used for representing the pixel length of the display content in the DOM object, and the content width attribute is used for representing the pixel width of the display content in the DOM object;
and determining values of the DOM object background length attribute and the DOM object background width attribute according to the size of a preset display area corresponding to the DOM object, the value of the target width attribute and the value of the target length attribute.
According to one or more embodiments of the present disclosure, example 4 provides the method of example 2, wherein determining the value of the DOM object length attribute and the value of the width attribute according to the change data amount of the target data compared with the historical data includes:
determining a data maximum value and a data minimum value according to the target data and the displayed historical data;
determining a data display proportion according to the data maximum value, the data minimum value and the size of a preset display area corresponding to the DOM object, wherein the data display proportion is used for representing pixels occupied by unit data;
and determining the value of the length attribute and the value of the width attribute of the DOM object according to the data display proportion and the change data volume of the target data compared with the historical data.
Example 5 provides the method of example 4, in accordance with one or more embodiments of the present disclosure, the history data being displayed by a history data DOM object, the pixel length and the pixel width of the display content within the history data DOM object being obtained from a data change of the history data compared to earlier history data, further comprising:
and adjusting the pixel length and the pixel width of the display content in the DOM object of the historical data corresponding to the historical data according to the data display proportion.
Example 6 provides the method of any one of examples 1-5, the determining the display style of the DOM object according to the data variation, including:
if the data change trend of the target data is increased in number compared with the historical data, setting the color attribute of the DOM object to be determined as a first color;
if the data change trend of the target data compared with the historical data is unchanged in quantity, determining that the color attribute of the DOM object is set to be a second color;
and if the data change trend of the target data is reduced in quantity compared with the historical data, determining that the color attribute of the DOM object is set to be a third color.
Example 7 provides the method of any one of examples 1-5, the historical data being displayed via a historical data DOM object, the displaying the DOM object, including:
and displaying the DOM object behind the historical data DOM object at the same horizontal position of the display area of the historical data DOM object, or displaying the DOM object below the historical data DOM object at the same vertical position of the display area of the historical data DOM object.
Example 8 provides the method of any one of examples 1-5, further comprising, in accordance with one or more embodiments of the present disclosure:
determining a numerical value of a change data amount of the target data compared with the historical data;
and displaying the numerical value of the changed data quantity in a preset display area around the DOM object.
Example 9 provides, in accordance with one or more embodiments of the present disclosure, a data display apparatus, the apparatus comprising:
the acquisition module is used for acquiring target data to be displayed;
the determining module is used for determining a Document Object Model (DOM) object for data display and determining the data change condition of the target data compared with historical data;
and the display module is used for determining the display style of the DOM object according to the data change condition and displaying the DOM object, wherein the display area of the DOM object is used for representing the change data amount of the target data compared with the historical data, and the display color of the DOM object is used for representing the data change trend of the target data compared with the historical data.
Example 10 provides a non-transitory computer-readable storage medium having stored thereon, a computer program that, when executed by a processing device, implements the steps of the method of any of examples 1-8, in accordance with one or more embodiments of the present disclosure.
Example 11 provides, in accordance with one or more embodiments of the present disclosure, an electronic device, comprising:
a storage device having a computer program stored thereon;
processing means for executing the computer program in the storage means to carry out the steps of the method of any of examples 1-8.
The foregoing description is only exemplary of the preferred embodiments of the disclosure and is illustrative of the principles of the technology employed. It will be appreciated by those skilled in the art that the scope of the disclosure herein is not limited to the particular combination of features described above, but also encompasses other embodiments in which any combination of the features described above or their equivalents does not depart from the spirit of the disclosure. For example, the above features and (but not limited to) the features disclosed in this disclosure having similar functions are replaced with each other to form the technical solution.
Further, while operations are depicted in a particular order, this should not be understood as requiring that such operations be performed in the particular order shown or in sequential order. Under certain circumstances, multitasking and parallel processing may be advantageous. Likewise, while several specific implementation details are included in the above discussion, these should not be construed as limitations on the scope of the disclosure. Certain features that are described in the context of separate embodiments can also be implemented in combination in a single embodiment. Conversely, various features that are described in the context of a single embodiment can also be implemented in multiple embodiments separately or in any suitable subcombination.
Although the subject matter has been described in language specific to structural features and/or methodological acts, it is to be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are disclosed as example forms of implementing the claims. With regard to the apparatus in the above-described embodiment, the specific manner in which each module performs the operation has been described in detail in the embodiment related to the method, and will not be elaborated here.
Claims (11)
1. A method of displaying data, the method comprising:
acquiring target data to be displayed;
determining a Document Object Model (DOM) object for data display, and determining the data change condition of the target data compared with historical data;
and determining a display style of the DOM object according to the data change condition, and displaying the DOM object, wherein the display area of the DOM object is used for representing the change data amount of the target data compared with the historical data, and the display color of the DOM object is used for representing the data change trend of the target data compared with the historical data.
2. The method according to claim 1, wherein the determining the display style of the DOM object according to the data change comprises:
and determining the value of the length attribute and the value of the width attribute of the DOM object according to the changed data volume of the target data compared with the historical data, so as to represent the changed data volume through the display area of the DOM object.
3. The method according to claim 2, wherein the determining the value of the DOM object height attribute and the value of the width attribute according to the amount of change data of the target data compared with the historical data comprises:
determining values of a content length attribute and a content width attribute of the DOM object according to the variation data volume of the target data compared with the historical data, wherein the content length attribute is used for representing the pixel length of the display content in the DOM object, and the content width attribute is used for representing the pixel width of the display content in the DOM object;
and determining values of the DOM object background length attribute and the DOM object background width attribute according to the size of a preset display area corresponding to the DOM object, the value of the target width attribute and the value of the target length attribute.
4. The method according to claim 2, wherein determining the value of the DOM object length attribute and the value of the width attribute according to the amount of change data of the target data compared to the historical data comprises:
determining a data maximum value and a data minimum value according to the target data and the displayed historical data;
determining a data display proportion according to the data maximum value, the data minimum value and the size of a preset display area corresponding to the DOM object, wherein the data display proportion is used for representing pixels occupied by unit data;
and determining the value of the length attribute and the value of the width attribute of the DOM object according to the data display proportion and the change data volume of the target data compared with the historical data.
5. The method according to claim 4, wherein the history data is displayed through a history data DOM object, and the pixel length and the pixel width of the display content in the DOM object are obtained according to the data change of the history data compared with the history data before the earlier, further comprising:
and adjusting the pixel length and the pixel width of the display content in the DOM object of the historical data corresponding to the historical data according to the data display proportion.
6. The method according to any one of claims 1-5, wherein determining the display style of the DOM object according to the data variation comprises:
if the data change trend of the target data is increased in number compared with the historical data, setting the color attribute of the DOM object to be determined as a first color;
if the data change trend of the target data compared with the historical data is unchanged in quantity, determining that the color attribute of the DOM object is set to be a second color;
and if the data change trend of the target data is reduced in quantity compared with the historical data, determining that the color attribute of the DOM object is set to be a third color.
7. The method according to any one of claims 1-5, wherein the historical data is displayed via a historical data DOM object, and wherein displaying the DOM object comprises:
and displaying the DOM object behind the historical data DOM object at the same horizontal position of the display area of the historical data DOM object, or displaying the DOM object below the historical data DOM object at the same vertical position of the display area of the historical data DOM object.
8. The method of any one of claims 1-5, further comprising:
determining a numerical value of a change data amount of the target data compared with the historical data;
and displaying the numerical value of the changed data quantity in a preset display area around the DOM object.
9. A data display device, the device comprising:
the acquisition module is used for acquiring target data to be displayed;
the determining module is used for determining a Document Object Model (DOM) object for data display and determining the data change condition of the target data compared with historical data;
and the display module is used for determining the display style of the DOM object according to the data change condition and displaying the DOM object, wherein the display area of the DOM object is used for representing the change data amount of the target data compared with the historical data, and the display color of the DOM object is used for representing the data change trend of the target data compared with the historical data.
10. A non-transitory computer readable storage medium, having stored thereon a computer program, characterized in that the program, when executed by a processing device, implements the steps of the method of any one of claims 1-8.
11. An electronic device, comprising:
a storage device having a computer program stored thereon;
processing means for executing the computer program in the storage means to carry out the steps of the method according to any one of claims 1 to 8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110713387.5A CN113391807A (en) | 2021-06-25 | 2021-06-25 | Data display method and device, storage medium and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110713387.5A CN113391807A (en) | 2021-06-25 | 2021-06-25 | Data display method and device, storage medium and electronic equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113391807A true CN113391807A (en) | 2021-09-14 |
Family
ID=77624133
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110713387.5A Pending CN113391807A (en) | 2021-06-25 | 2021-06-25 | Data display method and device, storage medium and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113391807A (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103150742A (en) * | 2011-12-06 | 2013-06-12 | 上海可鲁系统软件有限公司 | Method and device for vector graphic dynamic rendering |
| CN104484895A (en) * | 2014-12-24 | 2015-04-01 | 天脉聚源（北京）科技有限公司 | Data display method and device |
| CN109656665A (en) * | 2018-12-20 | 2019-04-19 | 成都四方伟业软件股份有限公司 | A kind of visual presentation method of data, component and readable storage medium storing program for executing |
| CN110286905A (en) * | 2019-06-21 | 2019-09-27 | 北京计算机技术及应用研究所 | A kind of method for exhibiting data based on Echarts |
| CN110909896A (en) * | 2019-11-27 | 2020-03-24 | 北京搜狐新媒体信息技术有限公司 | Visual operation and maintenance monitoring method and device |
-
2021
- 2021-06-25 CN CN202110713387.5A patent/CN113391807A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103150742A (en) * | 2011-12-06 | 2013-06-12 | 上海可鲁系统软件有限公司 | Method and device for vector graphic dynamic rendering |
| CN104484895A (en) * | 2014-12-24 | 2015-04-01 | 天脉聚源（北京）科技有限公司 | Data display method and device |
| CN109656665A (en) * | 2018-12-20 | 2019-04-19 | 成都四方伟业软件股份有限公司 | A kind of visual presentation method of data, component and readable storage medium storing program for executing |
| CN110286905A (en) * | 2019-06-21 | 2019-09-27 | 北京计算机技术及应用研究所 | A kind of method for exhibiting data based on Echarts |
| CN110909896A (en) * | 2019-11-27 | 2020-03-24 | 北京搜狐新媒体信息技术有限公司 | Visual operation and maintenance monitoring method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109460233B (en) | Method, device, terminal equipment and medium for updating native interface display of page | |
| CN111209721B (en) | Bitmap font implementation method, device, electronic device and storage medium | |
| US20120110438A1 (en) | Proportional Font Scaling | |
| CN109857486B (en) | Method, device, equipment and medium for processing program page data | |
| US20240112299A1 (en) | Video cropping method and apparatus, storage medium and electronic device | |
| US20230005194A1 (en) | Image processing method and apparatus, readable medium and electronic device | |
| WO2015078159A1 (en) | Webpage display method and device | |
| US12124688B2 (en) | Page display switching method, apparatus, storage medium, and electronic device | |
| CN110766772A (en) | Flatter-based cross-platform poster manufacturing method, device and equipment | |
| CN110188299B (en) | Response type page processing method and device and electronic equipment | |
| CN110019037A (en) | A kind of pdf document methods of exhibiting, device, equipment and storage medium | |
| EP4187490B1 (en) | Method and apparatus for displaying text, electronic device, and computer-readable storage medium | |
| CN107330087A (en) | Pagefile generation method and device | |
| CN105956133B (en) | Method and device for displaying file on intelligent terminal | |
| US20250147640A1 (en) | Method and apparatus for displaying collaboratively edited information, electronic device and readable medium | |
| CN110134905B (en) | Page update display method, device, equipment and storage medium | |
| CN110427584A (en) | Page generation method, device, electronic equipment and computer readable storage medium | |
| CN113961280B (en) | View display method and device, electronic equipment and computer readable storage medium | |
| CN115525852A (en) | Webpage rendering method, device, equipment and storage medium | |
| US12039628B2 (en) | Video mask layer display method, apparatus, device and medium | |
| EP4583519A1 (en) | Information display method and apparatus, and electronic device and computer-readable medium | |
| CN109992698B (en) | Data processing method and device, electronic equipment and readable storage medium | |
| CN110825989B (en) | Picture display method and device, electronic equipment and readable medium | |
| CN113391807A (en) | Data display method and device, storage medium and electronic equipment | |
| CN111859879B (en) | Data display method and device based on virtual form and electronic equipment |
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 | ||
| CB02 | Change of applicant information |
Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant after: Douyin Vision Co.,Ltd. Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant before: Tiktok vision (Beijing) Co.,Ltd. Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant after: Tiktok vision (Beijing) Co.,Ltd. Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant before: BEIJING BYTEDANCE NETWORK TECHNOLOGY Co.,Ltd. |
|
| CB02 | Change of applicant information |