CN112612989A - Data display method and device, computer equipment and storage medium - Google Patents
Data display method and device, computer equipment and storage medium Download PDFInfo
- Publication number
- CN112612989A CN112612989A CN202011630023.2A CN202011630023A CN112612989A CN 112612989 A CN112612989 A CN 112612989A CN 202011630023 A CN202011630023 A CN 202011630023A CN 112612989 A CN112612989 A CN 112612989A
- Authority
- CN
- China
- Prior art keywords
- data
- layout
- graphic
- graphic element
- display
- 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
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/972—Access to data in other repository systems, e.g. legacy data or dynamic Web page generation
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04842—Selection of displayed objects or displayed text elements
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/189—Automatic justification
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Health & Medical Sciences (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Artificial Intelligence (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请涉及一种数据展示方法、装置、计算机设备和存储介质。方法包括在进入数据展示界面时，加载待展示的布局图的网络地址、图形元素在布局图中的相对位置信息以及图形元素与展示数据的关联关系，图形元素用于表征布局图中的布局区域，展示数据为布局区域的关联数据；基于网络地址，将布局图加载并展示至数据展示界面，并根据图形元素在布局图中的相对位置信息，在布局图上渲染与布局区域对应的图形元素；当在数据展示界面侦测到触发操作时，根据触发操作对应位置，确定触发的目标图形元素；根据图形元素与展示数据的关联关系，查找并展示与目标图形元素关联的目标展示数据。在实现数据快速便捷展示的同时，能够便于后续对展示数据进行维护。
The present application relates to a data presentation method, apparatus, computer equipment and storage medium. The method includes, when entering the data display interface, loading the network address of the layout diagram to be displayed, the relative position information of the graphic element in the layout diagram, and the association relationship between the graphic element and the display data, and the graphic element is used to represent the layout area in the layout diagram. , the display data is the associated data of the layout area; based on the network address, the layout diagram is loaded and displayed to the data display interface, and the graphic elements corresponding to the layout area are rendered on the layout diagram according to the relative position information of the graphic elements in the layout diagram ; When a trigger operation is detected on the data display interface, the target graphic element to be triggered is determined according to the corresponding position of the trigger operation; according to the association relationship between the graphic element and the display data, the target display data associated with the target graphic element is searched and displayed. While realizing the fast and convenient display of data, it can facilitate the subsequent maintenance of the displayed data.
Description
Technical Field
The present application relates to the field of data processing technologies, and in particular, to a data display method and apparatus, a computer device, and a storage medium.
Background
With the development of information technology, the visual display of information has become a goal pursued by people. Taking the real estate industry as an example, when a real estate or other real estate developer develops a certain floor or project and goes to a house renting and selling link, the current renting and selling condition of the floor or project is expected to be clearly and intuitively known.
The existing information display mode generally displays information through a pre-drawn layout, the information display mode can quickly display data, but the quantity of information capable of being displayed is limited, when the displayed data needs to be updated and modified, the modification needs to be realized based on adjustment and modification of the whole layout, and the maintenance difficulty of the displayed data is large.
Disclosure of Invention
In view of the foregoing, it is necessary to provide a data display method, an apparatus, a computer device, and a storage medium, which can realize quick and convenient display of data and facilitate maintenance.
A data presentation method, characterized in that the method comprises:
when entering a data display interface, loading a network address of a layout to be displayed, relative position information of graphic elements in the layout and an association relation between the graphic elements and display data, wherein the graphic elements are used for representing layout areas in the layout, and the display data are association data of the layout areas;
loading and displaying the layout drawing to a data display interface based on the network address, and rendering the graphic elements corresponding to the layout area on the layout drawing according to the relative position information of the graphic elements in the layout drawing;
when the trigger operation is detected on the data display interface, determining a triggered target graphic element according to the corresponding position of the trigger operation;
and searching and displaying the target display data associated with the target graphic element according to the association relationship between the graphic element and the display data.
In one embodiment, when entering the data presentation interface, the method further comprises:
loading a graph drawing path of a graph element;
rendering the graphic elements corresponding to the layout area on the layout drawing according to the relative position information of the graphic elements in the layout drawing comprises:
and rendering the graphic elements corresponding to the layout area on the layout drawing according to the relative position information of the graphic elements in the layout drawing and the graphic drawing paths of the graphic elements.
In one embodiment, rendering the graphic elements corresponding to the layout area on the layout drawing according to the relative position information of the graphic elements in the layout drawing comprises:
obtaining display data corresponding to each layout area according to the incidence relation between the graphic elements and the display data;
determining a display style of the graphic element according to the data type to which the display data belongs and the display style corresponding to the data type;
and according to the relative position information of the graphic elements in the layout, rendering the graphic elements corresponding to the layout area on the layout according to the display style.
In one embodiment, the number of target graphic elements is not less than two;
according to the association relationship between the graphic elements and the display data, finding and displaying the target display data associated with the target graphic elements comprises the following steps:
searching target display data associated with the target graphic element according to the association relation between the graphic element and the display data;
and carrying out statistics on the target display data and displaying the statistical result.
In one embodiment, before loading the network address of the layout to be displayed, the relative position information of the graphic element in the layout, and the association relationship between the graphic element and the display data when entering the data display interface, the method further includes:
loading pre-configured display data to be associated when a preset graphic editing interface is entered, and acquiring an uploaded layout chart;
responding to the graphic drawing operation of the layout area in the layout drawing, obtaining the graphic elements corresponding to the layout area, and determining the relative position information of the graphic elements in the layout drawing;
responding to the selection operation of the graphic elements, and pushing a page containing display data to be associated;
when the selection operation of display data to be associated in the page is detected, establishing the association relationship between the selected graphic element and the selected display data;
and acquiring a network address of the layout, and performing association storage on the network address, the relative position information of the graphic elements in the layout and the established association relation.
In one embodiment, in response to a graphic drawing operation on a layout area in a layout diagram, obtaining a graphic element corresponding to the layout area, and determining relative position information of the graphic element in the layout diagram includes:
monitoring a keyboard and mouse event for carrying out graphic drawing based on the shape and the size of the layout area, and determining drawn image elements, wherein the keyboard and mouse event comprises at least one of graphic drawing, graphic movement, graphic scaling, graphic rotation, graphic alignment, graphic copying, graphic pasting and graphic batch generation;
and determining the relative position information of the graphic elements in the layout according to the coordinate information of the image elements.
In one embodiment, listening for a keyboard and mouse event for graphical rendering based on the shape and size of the layout area, determining the rendered image element comprises:
responding to a keyboard and mouse event of selecting a drawing tool, and determining the selected drawing tool, wherein the drawing tool is any one of a regular drawing tool and an irregular drawing tool;
monitoring a graphical drawing keyboard and mouse event based on the shape and size of the layout area and a drawing tool;
obtaining a graph drawing path defined by an XML format based on the graph drawing keyboard and mouse event;
and obtaining the image elements according to the graph drawing path.
A data presentation device, the device comprising:
the data loading module is used for loading the network address of the layout to be displayed, the relative position information of the graphic element in the layout and the incidence relation between the graphic element and the display data when the data display interface is entered, wherein the graphic element is used for representing the layout area in the layout, and the display data is the incidence data of the layout area;
the graphic rendering module is used for loading and displaying the layout drawing to the data display interface based on the network address, and rendering the graphic elements corresponding to the layout area on the layout drawing according to the relative position information of the graphic elements in the layout drawing;
the trigger response module is used for determining a triggered target graphic element according to a corresponding position of the trigger operation when the trigger operation is detected on the data display interface;
and the data display module is used for searching and displaying the target display data related to the target graphic element according to the incidence relation between the graphic element and the display data.
A computer device comprising a memory and a processor, the memory storing a computer program, the processor implementing the following steps when executing the computer program:
when entering a data display interface, loading a network address of a layout to be displayed, relative position information of graphic elements in the layout and an association relation between the graphic elements and display data, wherein the graphic elements are used for representing layout areas in the layout, and the display data are association data of the layout areas;
loading and displaying the layout drawing to a data display interface based on the network address, and rendering the graphic elements corresponding to the layout area on the layout drawing according to the relative position information of the graphic elements in the layout drawing;
when the trigger operation is detected on the data display interface, determining a triggered target graphic element according to the corresponding position of the trigger operation;
and searching and displaying the target display data associated with the target graphic element according to the association relationship between the graphic element and the display data.
A computer-readable storage medium, on which a computer program is stored which, when executed by a processor, carries out the steps of:
when entering a data display interface, loading a network address of a layout to be displayed, relative position information of graphic elements in the layout and an association relation between the graphic elements and display data, wherein the graphic elements are used for representing layout areas in the layout, and the display data are association data of the layout areas;
loading and displaying the layout drawing to a data display interface based on the network address, and rendering the graphic elements corresponding to the layout area on the layout drawing according to the relative position information of the graphic elements in the layout drawing;
when the trigger operation is detected on the data display interface, determining a triggered target graphic element according to the corresponding position of the trigger operation;
and searching and displaying the target display data associated with the target graphic element according to the association relationship between the graphic element and the display data.
According to the data display method, the data display device, the computer equipment and the storage medium, the layout graph to be displayed and the display data are disassembled, the data information is associated through the graphic elements, decoupling of each layout area and the corresponding display data in the layout graph is achieved, when the data display interface is entered, each disassembled data is loaded, the layout graph is loaded based on the network address, the graphic elements corresponding to the layout areas are rendered on the layout graph, the corresponding display data are searched and displayed according to triggering operation, the triggering display of the display data corresponding to the layout graph is conveniently achieved through rendering of different layers on the premise that the original layout graph is not modified, the display data can be conveniently maintained subsequently while the data are rapidly and conveniently displayed.
Drawings
FIG. 1 is a diagram of an application environment of a data presentation method according to an embodiment;
FIG. 2 is a flow diagram illustrating a method for displaying data according to one embodiment;
FIG. 3 is a schematic diagram illustrating a multi-plane presentation effect of the data presentation method according to an embodiment;
FIG. 4 is a diagram illustrating a single plane showing effect of the data showing method according to an embodiment;
FIG. 5 is a flow chart illustrating a data presentation method according to yet another embodiment;
FIG. 6 is a schematic flow chart diagram illustrating a data presentation method in accordance with yet another embodiment;
FIG. 7 is a flow chart illustrating a data presentation method according to another embodiment;
FIG. 8 is a diagram of a graphical editing interface for a method of presenting data in one embodiment;
FIG. 9 is a flowchart illustrating a data presentation method according to still another embodiment;
FIG. 10 is a diagram illustrating an effect of batch generation of graphics of the data presentation method according to an embodiment;
FIG. 11 is a flow chart illustrating a data association process of the data presentation method in one embodiment;
FIG. 12 is a schematic flow chart diagram illustrating a data presentation method in accordance with yet another embodiment;
FIG. 13 is a block diagram of the structure of a data presentation device in one embodiment;
FIG. 14 is a diagram illustrating an internal structure of a computer device according to an embodiment.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the present application 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 present application and are not intended to limit the present application.
The data presentation method provided by the application can be applied to the application environment shown in fig. 1. When the terminal 102 enters the data display interface, the network address of the layout to be displayed, the relative position information of the graphic element in the layout, and the association relationship between the graphic element and the display data are loaded from the memory 104, the graphic element is used for representing the layout area in the layout, and the display data is the association data of the layout area. And loading and displaying the layout drawing to a data display interface based on the network address, and rendering the graphic elements corresponding to the layout area on the layout drawing according to the relative position information of the graphic elements in the layout drawing. And when the triggering operation is detected on the data display interface, determining the triggered target graphic element according to the corresponding position of the triggering operation. And searching and displaying the target display data associated with the target graphic element according to the association relationship between the graphic element and the display data. The terminal 102 may be, but is not limited to, various personal computers, notebook computers, smart phones, tablet computers, and portable wearable devices. The memory 104 may be a server for data storage. The terminal acquires pre-stored data by accessing the server.
In an embodiment, as shown in fig. 2, a data presentation method is provided, which is described by taking the application of the method to the terminal in fig. 1 as an example, and includes the following steps:
The data display interface is an interface used for displaying pictures and corresponding display data. And when the terminal detects that the terminal enters the data display interface, loading the network address of the layout to be displayed, the relative position information of the graphic elements in the layout and the association relation between the graphic elements and the display data from the stored data according to the identification information of the selected layout or the preset identification information of the layout to be displayed.
Taking the display of the rental control chart of the real estate industry as an example, when a user enters a data display interface of the terminal, the user can select which data information of a certain floor of the building is to be displayed, and assuming that the user selects the 8 th floor of the 5 buildings in the a-zone, the terminal needs to display the plane layout chart of each user in the 8 th floor including the 5 buildings in the a-zone. At this time, the terminal may load the network address of the layout diagram of the 8 th layer of the a-zone 5, the relative position information of the graphic element in the layout diagram, and the association relationship of the graphic element and the presentation data from the stored data, with the 8 th layer of the a-zone 5 as the identifier.
The layout diagram is a structural schematic diagram of each layer of plane, can be pre-drawn and stored in a memory, and when the terminal needs to be displayed, the layout diagram is acquired and displayed in a real-time loading mode from the memory area through the network address of the layout diagram, so that the occupation of data processing resources of the terminal is reduced. The layout area in the layout diagram may be an area having presentation data, such as a tenant area, a shop area, and the like in the rental control diagram, and correspondingly, the presentation data may be a rental and sale condition of the tenant area, the shop area, and the like.
The graphic elements are used to characterize the layout area in the layout diagram. In an embodiment, the graphic element is drawn based on the shape and size of the layout area in the layout diagram, that is, the graphic element is drawn as the same as the layout area in the layer above the layer in which the layout diagram is located. The relative position information of the graphic element in the layout refers to the position of the graphic element in the layout after the graphic element is drawn. In an embodiment, the relative position information of the figure element in the layout diagram may be represented by coordinates of the figure element in a coordinate system with reference to the layout diagram.
And displaying the data as the associated data of the layout area. Each layout area in the layout diagram can have corresponding display data, the graphic elements are drawn on the layout areas, the graphic elements are associated with the display data corresponding to the layout areas, and data decoupling can be achieved through association among the features.
And 204, loading and displaying the layout drawing to a data display interface based on the network address, and rendering the graphic elements corresponding to the layout area on the layout drawing according to the relative position information of the graphic elements in the layout drawing.
The network address is also called a URL (Uniform Resource Locator), and the layout can be obtained in real time by loading the network address, thereby simplifying the memory occupation of the storage space.
And the layout is loaded and displayed on a data display interface, so that the display of the first layer is realized. The graphic elements corresponding to the layout areas are rendered on the layout map according to the relative position information of the graphic elements in the layout map, so that the graphic layers of the graphic elements and the layout map are superposed, the corresponding graphic elements are rendered in each layout area of the layout map, the detection and the response of the triggering operation of a user are facilitated, and the display data to be displayed are determined.
The triggering operation refers to a clicking operation of a user on a certain position of the data display interface, specifically, the user can control a cursor to move to a certain position through an input device such as a mouse and click the mouse, or the user can determine the triggering operation by sensing the clicking position of the user through a human-computer interaction device such as a touch screen, the terminal determines a triggered target graphic element according to a target layout area to which the corresponding position of the triggering operation belongs, and the target graphic element corresponds to the target layout area.
And step 208, searching and displaying target display data associated with the target graphic element according to the association relationship between the graphic element and the display data.
Taking the lease control diagram as an example, the display effect is shown in fig. 3 and fig. 4. The combined layout maps of all floors can be displayed firstly, and when a user selects one of the plane layout maps and clicks a certain position in the layout map, specific information of a layout area corresponding to the clicked position is displayed on a display interface.
The target display data related to the target graphic element can be quickly and conveniently found based on the incidence relation between the graphic element and the display data, and the occupation of the data storage space of the terminal can be reduced by a data searching mode based on the incidence relation, so that the response speed of the terminal is improved, and the target data is pertinently obtained and displayed.
According to the data display method, the layout graph to be displayed and the display data are disassembled, data information is associated through the graphic elements, decoupling of each layout area in the layout graph and the corresponding display data is achieved, when the layout graph enters a data display interface, the disassembled data are loaded, the layout graph is loaded based on the network address, the graphic elements corresponding to the layout areas are rendered on the layout graph, the corresponding display data are searched and displayed according to triggering operation, the triggering display of the display data corresponding to the layout graph is achieved conveniently on the premise that the original layout graph is not modified through rendering of different layers, and the display data can be maintained conveniently and subsequently while the data are displayed quickly and conveniently.
In one embodiment, as shown in fig. 5, when entering the data presentation interface, loading the network address of the layout to be presented, the relative position information of the graphic element in the layout, and the association relationship between the graphic element and the presentation data includes step 502.
Rendering 504 graphical elements corresponding to the layout area on the layout drawing according to the relative position information of the graphical elements in the layout drawing.
And step 504, rendering the graphic elements corresponding to the layout area on the layout drawing according to the relative position information of the graphic elements in the layout drawing and the graphic drawing paths of the graphic elements.
The graphic drawing path of the graphic element refers to a drawing path composed of constituent points of a contour line of the graphic element. In other embodiments, the graphical drawing path of the graphical element may be replaced with bitmap information. In particular, the graphics drawing path can be stored based on SVG, which is an image file format and is scalable vector graphics, and the bitmap information can be stored based on canvas, wherein the graphics drawing path of the graphics elements is defined by using an XML format, and the graphics elements can be rendered on a webpage html through the path of SVG. SVG storage and canvas storage are compared from data storage, and SVG storage data volume is small, so that data can be analyzed more easily when graphic elements are rendered, and performance is faster.
In one embodiment, as shown in fig. 6, loading and presenting the layout drawing to the data presentation interface based on the network address, and rendering the graphic element corresponding to the layout area on the layout drawing according to the relative position information of the graphic element in the layout drawing includes steps 602 to 606.
And 606, according to the relative position information of the graphic elements in the layout, rendering the graphic elements corresponding to the layout area on the layout according to the display style.
The data categories may be used to characterize the state in which the layout area is currently located. For example, a rented room and a room to be rented in a rental control graph belong to different data categories. The terminal can color the graphic elements according to different states of the data, and visually display the data states, for example, a rented room can be displayed as gray, and a room to be rented is displayed as green. The gray display and the green display are different display styles, and the different display styles are used for distinguishing different data types. The display pattern may be different display colors, different border colors, different shading patterns, and the like, and is not limited herein.
In one embodiment, the number of target graphic elements is not less than two. According to the association relationship between the graphic elements and the display data, finding and displaying the target display data associated with the target graphic elements comprises the following steps:
and searching target display data associated with the target graphic element according to the association relation between the graphic element and the display data. And carrying out statistics on the target display data and displaying the statistical result.
In the embodiment, the terminal can respond to a plurality of graphic elements selected by the user, and perform summary calculation on statistical data to be displayed, for example, when the property cost of a room is displayed, when a plurality of rooms are selected, the total property cost data can be displayed in a combined manner, so that the visual display of the data is realized.
In one embodiment, as shown in fig. 7, before entering the data presentation interface, the data association process is further included before loading the network address of the layout to be presented, the relative position information of the graphic element in the layout, and the association relationship between the graphic element and the presentation data, and the data association process specifically includes the following steps 702 to 710.
The graphic editing interface is an interface for drawing graphic elements according to a layout diagram, and the graphic editing interface may include a drawing tool selection area, a layout diagram presentation and graphic element drawing area, and a bound data presentation area, as shown in fig. 8. The user can upload the layout chart which needs to be processed according to the requirement. Such as a room layout diagram for each level in the rental control graph. The associated display data can be displayed on the graphical editing interface, the graphical elements of the associated display data and the graphical elements of the unassociated display data are displayed through different display styles, and the associated data is modified in a graphical editing page.
In an embodiment, a plurality of background data sources can be configured in advance through a terminal as display data, which is convenient for explaining room data which can be a renting control graph; after entering a graphic editing interface, a terminal loads room data to be bound firstly, the room data to be bound can be displayed in a data source area (the data source area can be displayed in a pop-up window mode and the like when graphic elements are selected), the graphic editing interface displays a layout diagram uploaded by a user, graphic elements corresponding to each room are drawn in the room area of the layout diagram, and relative position information of the graphic elements in the layout diagram is determined; and then the terminal pushes a popup window comprising room data to be bound according to the drawn room graphic element selected by the user so that the user selects the data corresponding to the room data to bind, thereby establishing the association relationship between the selected graphic element and the selected display data. The terminal stores the drawing information of the graphic elements, the information (access URL, size) of the layout, the graphic drawing path of the graphic elements, the position information of the graphic elements relative to the layout and the binding relationship between the graphic elements and the room data in a database so as to load data in the subsequent data display process.
By drawing the graphic elements on the layout chart, the areas of the drawn graphic elements can be kept consistent with the layout chart, and the accuracy of data is guaranteed.
In one embodiment, as shown in fig. 9, in response to a graphic drawing operation on a layout area in a layout diagram, a graphic element corresponding to the layout area is obtained, and determining the relative position information of the graphic element in the layout diagram includes steps 902 to 904.
And step 902, monitoring a keyboard and mouse event for carrying out graphic drawing based on the shape and the size of the layout area, and determining drawn image elements.
And 904, determining the relative position information of the graphic elements in the layout according to the coordinate information of the image elements.
The keyboard and mouse event comprises at least one of graph drawing, graph moving, graph zooming, graph rotating, graph aligning, graph copying, graph pasting and graph batch generation.
The graphic rendering may be a process of rendering an outline of the graphic element corresponding to the layout area. The graphic replication may be a process of copying path information of a graphic element by monitoring a copy and paste event of the keyboard to generate a new element. The movement, the zooming and the rotation of the graph can be realized by mainly monitoring the events of the mouse after the graph is selected, calculating the movement distance, the dragging distance and the rotation angle of the mouse and converting the movement distance, the zooming and the rotation angle into the movement, the zooming and the rotation operation of the graph. The graphic alignment may be that after pressing the keyboard ctrl, a plurality of graphics may be selected by the mouse; the graphics are aligned by selecting an alignment mode (an alignment mode such as up, down, left, right, center, equal distance and the like), and the process needs to calculate the direction and distance of each graphic which needs to be moved according to the position information of a plurality of selected graphics. The batch generation of the graphs can be to select two initial graphs and two final graphs in a certain area, select the filling quantity, generate graphs with the same size in the area, align the graphs at equal intervals and be suitable for drawing large-batch areas. The batch production effect of the graphics can be as shown in fig. 10.
The terminal can acquire mouse coordinates and dragging behaviors by monitoring a keyboard and mouse event and convert the mouse coordinates and dragging behaviors into corresponding SVG (scalable vector graphics); by carrying out operations such as zooming, copying, aligning, moving, rotating and the like on the selected SVG graph, the graph is edited, and meanwhile, the layout graph can be supported to be amplified and edited.
Based on the operation, flexible drawing can be realized, graphic elements can be drawn on the layout diagram quickly, drawing of various irregular graphs is met, various graphic operation modes (copying, aligning, moving, zooming and rotating) are provided, the graphic elements can be conveniently arranged, especially regular areas (such as parking spaces) can be arranged quickly by using the copying and equidistant aligning modes.
In one embodiment, listening for a keyboard and mouse event for graphical rendering based on the shape and size of the layout area, determining the rendered image element comprises: in response to a keyboard and mouse event selecting a drawing tool, the selected drawing tool is determined. A graphical drawing keymouse event based on the shape and size of the layout area and the drawing tool is intercepted. And drawing a keyboard and mouse event based on the graph to obtain a graph drawing path defined by an XML format. And obtaining the image elements according to the graph drawing path.
The drawing tool is any one of a regular figure drawing tool and an irregular figure drawing tool. The regular graph drawing tool is used for drawing regular graphs, can select preset graph information such as elements of rectangles, squares, circles and the like, converts the distance dragged by the mouse into the size of the graphs and draws the graphs. The irregular graph drawing tool is used for drawing irregular graphs, a multi-edge drawing mode can be selected, and paths are connected into a closed graph through anchor point drawing paths.
In one embodiment, the drawing and presentation of lease control graphs is taken as an example. The rental control map generally shows resource information (e.g., room area) or related information such as rental and sales status corresponding to different room areas in real time on a 2D planar space layout. The drawing process is essentially a process of identifying the coordinates and ranges of different rooms/areas on a spatial layout diagram and establishing an association relationship with room data configured in the background. The display of the rental control graph comprises the process that when a certain point on the layout graph is clicked, the room area to which the coordinate belongs needs to be identified, the room area is associated with the room data of the background, and the room data corresponding to the room area is inquired and displayed.
As shown in fig. 11, the process of drawing a lease control graph includes: entering a visual editing interface of the rental control graph, loading a data source, displaying associable room data, uploading a layout graph as a base graph, drawing room area graphic elements on the base graph to form a room area graphic layer, binding the selected room graphic elements with the selected data source after the user selects the room graphic elements, and then storing the drawing paths of the room graphic elements and the binding relationship between the room graphic elements and the corresponding data source of the room.
The user can configure different data sources for different data types through the terminal; the data of the data source can contain elements such as data type, id, name, code and the like, so that the different layout areas can be distinguished conveniently. By selecting the room graphic elements and adding the binding relationship, the bound data information and the graphic elements of the bound data can be displayed on the editing interface, and the bound data can be modified.
As shown in fig. 12, the display process of the lease control graph includes: and entering a data display page, loading stored data, including the URL of the base map, the path and position information of the room graphic elements and the binding relationship between the room graphic elements and the corresponding data sources of the rooms, loading the base map according to the URL, and rendering each room graphic element on the base map according to the position and the drawing path of the graphic element. When the user clicks the room graphic element, the data source corresponding to the room graphic element clicked by the user is searched for data display according to the binding relationship between the room graphic element and the data source corresponding to the room.
The stored data comprises SVG drawing path and position information of the room graphic elements and is used for representing the coordinates of the graphic elements, and after the base map data is loaded, the graphic elements are rendered on the base map according to the coordinates of the graphic elements. After detecting that the user selects the graphic element, calling different query interfaces of a background according to the data types needing to be displayed in different service scenes to display the data. The data display can be displayed in various modes according to the characteristics of the data, for example, the state data is displayed by using thermodynamic diagrams, the summarized data is displayed by adopting a billboard, and the like.
By the method, the graphic elements can be drawn on the base map, the area of the drawn graphic elements can be kept consistent with the base map, and the accuracy of data is guaranteed. The flexible drawing technology is provided, the graphic elements can be drawn on the base map quickly, the drawing of various irregular graphic elements is met, various graphic operation modes (copying, aligning, moving, zooming and rotating) are provided, the layout of the graphics is very convenient, especially regular areas (such as parking spaces) can be conveniently carried out, and the modes of copying and equidistant aligning can be used for quickly typesetting.
By binding the graphic elements with the display data and configuring different data sources, various data source information with regional attributes (such as administrative regions on a map) can be met; various information data of each layout area are visually displayed, specifically, different background data can be inquired by using different data types for displaying, for example, the renting and selling state of a room is displayed on a renting and selling site, and the data to be paid for the room is displayed on a charging service desk; coloring the graphic elements according to different states of the data, and visually displaying the data states, wherein if the rented rooms can be displayed as grey, the rooms to be rented are displayed as green; by responding to the selection of a plurality of graphic elements by a user, summarizing and calculating statistical data to be displayed, for example, when the property cost of a room is displayed, the total property cost data can be combined and displayed when a plurality of rooms are selected; and (4) screening graphic elements according to the data state, carrying out highlight display, and displaying various display results in a combined manner to form a large-screen billboard effect. Moreover, SVG graphical elements can be rendered using HTML5, supporting cross-platform, cross-client presentation.
It should be understood that, although the steps in the flowcharts related to the above embodiments are shown in sequence as indicated by the arrows, the steps are not necessarily executed in sequence as indicated by the arrows. The steps are not performed in the exact order shown and described, and may be performed in other orders, unless explicitly stated otherwise. Moreover, at least a part of the steps in each flowchart related to the above embodiments may include multiple steps or multiple stages, which are not necessarily performed at the same time, but may be performed at different times, and the order of performing the steps or stages is not necessarily sequential, but may be performed alternately or alternately with other steps or at least a part of the steps or stages in other steps.
In one embodiment, as shown in fig. 13, there is provided a data presentation apparatus including: a data loading module 1302, a graphics rendering module 1304, a trigger response module 1306, and a data presentation module 1308, wherein:
the data loading module 1302 is configured to, when entering the data display interface, load a network address of the layout to be displayed, relative position information of the graphic element in the layout, and an association relationship between the graphic element and the display data, where the graphic element is used to represent a layout area in the layout, and the display data is association data of the layout area.
And the graphic rendering module 1304 is configured to load and display the layout drawing to the data display interface based on the network address, and render the graphic element corresponding to the layout area on the layout drawing according to the relative position information of the graphic element in the layout drawing.
The trigger response module 1306 is configured to determine, when a trigger operation is detected on the data display interface, a triggered target graphic element according to a corresponding position of the trigger operation.
The data display module 1308 is configured to search and display target display data associated with the target graphic element according to the association relationship between the graphic element and the display data.
In one embodiment, the data loading module is further configured to load a graphics rendering path for the graphical element; the graphic rendering module is further used for rendering the graphic elements corresponding to the layout area on the layout drawing according to the relative position information of the graphic elements in the layout drawing and the graphic drawing paths of the graphic elements.
In one embodiment, the graphic rendering module is further configured to obtain display data corresponding to each layout area according to an association relationship between the graphic element and the display data; determining a display style of the graphic element according to the data type to which the display data belongs and the display style corresponding to the data type; and according to the relative position information of the graphic elements in the layout, rendering the graphic elements corresponding to the layout area on the layout according to the display style.
In one embodiment, the number of target graphic elements is not less than two; the data display module is also used for searching target display data related to the target graphic element according to the incidence relation between the graphic element and the display data; and carrying out statistics on the target display data and displaying the statistical result.
In one embodiment, the data display device further includes a data association module, configured to load pre-configured display data to be associated when entering a preset graphic editing interface, and obtain an uploaded layout diagram; responding to the graphic drawing operation of the layout area in the layout drawing, obtaining the graphic elements corresponding to the layout area, and determining the relative position information of the graphic elements in the layout drawing; responding to the selection operation of the graphic elements, and pushing a page containing display data to be associated; when the selection operation of display data to be associated in the page is detected, establishing the association relationship between the selected graphic element and the selected display data; and acquiring a network address of the layout, and performing association storage on the network address, the relative position information of the graphic elements in the layout and the established association relation.
In one embodiment, the data association module further includes a graph drawing unit, where the graph drawing unit is configured to monitor a keyboard and mouse event for performing graph drawing based on the shape and size of the layout area, and determine a drawn image element, where the keyboard and mouse event includes at least one of graph drawing, graph movement, graph scaling, graph rotation, graph alignment, graph copying, graph pasting, and graph batch generation; and determining the relative position information of the graphic elements in the layout according to the coordinate information of the image elements.
In one embodiment, the graphic drawing unit is further configured to determine a selected drawing tool in response to a keystroke event for selecting the drawing tool, the drawing tool being any one of a regular graphic drawing tool and an irregular graphic drawing tool; monitoring a graphical drawing keyboard and mouse event based on the shape and size of the layout area and a drawing tool; obtaining a graph drawing path defined by an XML format based on the graph drawing keyboard and mouse event; and obtaining the image elements according to the graph drawing path.
Above-mentioned data display device, through the overall arrangement picture and the show data of waiting to demonstrate disassembling, carry out data information's relevance through graphic element, the decoupling zero of each layout region with corresponding show data in the overall arrangement picture has been realized, when getting into data display interface, each item data after the loading is disassembled, based on network address loading overall arrangement picture and render the graphic element that corresponds with the layout region on the overall arrangement picture, according to triggering operation, look for and demonstrate the show data that corresponds, through the rendering on different layers, under the prerequisite of not modifying original overall arrangement picture, be convenient for realize having the show data's that corresponds with it and trigger the show, when realizing the quick convenient show of data, can be convenient for follow-up maintain show data.
For the specific definition of the data display device, reference may be made to the above definition of the data display method, which is not described herein again. The various modules in the data presentation device described above may be implemented in whole or in part by software, hardware, and combinations thereof. The modules can be embedded in a hardware form or independent from a processor in the computer device, and can also be stored in a memory in the computer device in a software form, so that the processor can call and execute operations corresponding to the modules.
In one embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as shown in fig. 14. The computer device includes a processor, a memory, a communication interface, a display screen, and an input device connected by a system bus. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device comprises a nonvolatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of an operating system and computer programs in the non-volatile storage medium. The communication interface of the computer device is used for carrying out wired or wireless communication with an external terminal, and the wireless communication can be realized through WIFI, an operator network, NFC (near field communication) or other technologies. The computer program is executed by a processor to implement a data presentation method. The display screen of the computer equipment can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer equipment can be a touch layer covered on the display screen, a key, a track ball or a touch pad arranged on the shell of the computer equipment, an external keyboard, a touch pad or a mouse and the like.
Those skilled in the art will appreciate that the architecture shown in fig. 14 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.
In one embodiment, a computer device is further provided, which includes a memory and a processor, the memory stores a computer program, and the processor implements the steps of the above method embodiments when executing the computer program.
In an embodiment, a computer-readable storage medium is provided, on which a computer program is stored which, when being executed by a processor, carries out the steps of the above-mentioned method embodiments.
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 can be implemented by hardware instructions of a computer program, which can be stored in a non-volatile computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. Any reference to memory, storage, database or other medium used in the embodiments provided herein can include at least one of non-volatile and volatile memory. Non-volatile Memory may include Read-Only Memory (ROM), magnetic tape, floppy disk, flash Memory, optical storage, or the like. Volatile Memory can include Random Access Memory (RAM) or external cache Memory. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM), among others.
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 express several embodiments of the present application, and the description thereof is more specific and detailed, but not construed as limiting the scope of the invention. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, which falls within the scope of protection of the present application. Therefore, the protection scope of the present patent shall be subject to the appended claims.
Claims (10)
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011630023.2A CN112612989A (en) | 2020-12-30 | 2020-12-30 | Data display method and device, computer equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011630023.2A CN112612989A (en) | 2020-12-30 | 2020-12-30 | Data display method and device, computer equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112612989A true CN112612989A (en) | 2021-04-06 |
Family
ID=75253164
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011630023.2A Pending CN112612989A (en) | 2020-12-30 | 2020-12-30 | Data display method and device, computer equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112612989A (en) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113590859A (en) * | 2021-08-05 | 2021-11-02 | 深圳须弥云图空间科技有限公司 | Method for building plan display and related equipment |
| CN114581546A (en) * | 2021-12-31 | 2022-06-03 | 广州能迪云服务科技有限公司 | SVG technology-based building graphic display method |
| CN115130993A (en) * | 2022-07-01 | 2022-09-30 | 江苏海洋大学 | Method for automatically drawing university course establishment relation topology structure diagram |
| CN116091642A (en) * | 2022-12-26 | 2023-05-09 | 北京小熊博望科技有限公司 | Method for rapidly positioning drawing element by using intermediate variable |
| CN116383674A (en) * | 2023-04-17 | 2023-07-04 | 北京看云软件有限公司 | Method and device for determining component similarity |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104765843A (en) * | 2015-04-16 | 2015-07-08 | 国家电网公司 | Control method used for graphic interface of electric power real-time monitoring system |
| CN106228588A (en) * | 2016-07-20 | 2016-12-14 | 东方网力科技股份有限公司 | Image Hotpoint creation methods based on big data and device |
| CN106599009A (en) * | 2015-10-20 | 2017-04-26 | 北京国双科技有限公司 | Display method and device for map data |
| US20170215041A1 (en) * | 2016-01-22 | 2017-07-27 | Academia Sinica | Building design information based indoor positioning system |
| CN108021539A (en) * | 2016-11-03 | 2018-05-11 | 北京国双科技有限公司 | The methods of exhibiting and device of data |
| CN109814847A (en) * | 2019-02-18 | 2019-05-28 | 安徽典典科技发展有限责任公司 | Component format element in the service of polar plot configuration |
| CN109857919A (en) * | 2019-01-17 | 2019-06-07 | 珠海市纳思特科技有限公司 | A kind of SVG graphic plotting and data show interactive system and method |
| CN110245180A (en) * | 2019-06-14 | 2019-09-17 | 北京阿尔山金融科技有限公司 | Data visualization methods of exhibiting and system |
| CN111833454A (en) * | 2020-06-30 | 2020-10-27 | 北京市商汤科技开发有限公司 | Presentation method, presentation device, presentation equipment and computer-readable storage medium |
-
2020
- 2020-12-30 CN CN202011630023.2A patent/CN112612989A/en active Pending
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104765843A (en) * | 2015-04-16 | 2015-07-08 | 国家电网公司 | Control method used for graphic interface of electric power real-time monitoring system |
| CN106599009A (en) * | 2015-10-20 | 2017-04-26 | 北京国双科技有限公司 | Display method and device for map data |
| US20170215041A1 (en) * | 2016-01-22 | 2017-07-27 | Academia Sinica | Building design information based indoor positioning system |
| CN106228588A (en) * | 2016-07-20 | 2016-12-14 | 东方网力科技股份有限公司 | Image Hotpoint creation methods based on big data and device |
| CN108021539A (en) * | 2016-11-03 | 2018-05-11 | 北京国双科技有限公司 | The methods of exhibiting and device of data |
| CN109857919A (en) * | 2019-01-17 | 2019-06-07 | 珠海市纳思特科技有限公司 | A kind of SVG graphic plotting and data show interactive system and method |
| CN109814847A (en) * | 2019-02-18 | 2019-05-28 | 安徽典典科技发展有限责任公司 | Component format element in the service of polar plot configuration |
| CN110245180A (en) * | 2019-06-14 | 2019-09-17 | 北京阿尔山金融科技有限公司 | Data visualization methods of exhibiting and system |
| CN111833454A (en) * | 2020-06-30 | 2020-10-27 | 北京市商汤科技开发有限公司 | Presentation method, presentation device, presentation equipment and computer-readable storage medium |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113590859A (en) * | 2021-08-05 | 2021-11-02 | 深圳须弥云图空间科技有限公司 | Method for building plan display and related equipment |
| CN114581546A (en) * | 2021-12-31 | 2022-06-03 | 广州能迪云服务科技有限公司 | SVG technology-based building graphic display method |
| CN115130993A (en) * | 2022-07-01 | 2022-09-30 | 江苏海洋大学 | Method for automatically drawing university course establishment relation topology structure diagram |
| CN116091642A (en) * | 2022-12-26 | 2023-05-09 | 北京小熊博望科技有限公司 | Method for rapidly positioning drawing element by using intermediate variable |
| CN116383674A (en) * | 2023-04-17 | 2023-07-04 | 北京看云软件有限公司 | Method and device for determining component similarity |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112612989A (en) | Data display method and device, computer equipment and storage medium | |
| US9552129B2 (en) | Interactive visual representation of points of interest data | |
| US8640042B2 (en) | Image display tabs for accessing related information | |
| US12020311B2 (en) | Systems and methods for product visualization using a single-page application | |
| CN114003160B (en) | Data visual display method, device, computer equipment and storage medium | |
| CN114357345A (en) | Image processing method, apparatus, electronic device, and computer-readable storage medium | |
| CN111596911B (en) | Method, device, computer equipment and storage medium for generating control | |
| CN112667212A (en) | Buried point data visualization method and device, terminal and storage medium | |
| CN111679818A (en) | Method and system for editing display software | |
| US20210224302A1 (en) | Systems and methods for coordinate-based search | |
| US20200226833A1 (en) | A method and system for providing a user interface for a 3d environment | |
| US10782850B2 (en) | User interface and a method for searching a model | |
| CN113947450A (en) | Rendering method and editing method and device of seating chart and terminal equipment | |
| CN119127999A (en) | A data visualization processing method, device, system and medium | |
| CN114117161A (en) | Display method and device | |
| CN113742544A (en) | Method, apparatus and computer-readable storage medium for associative display of multiple objects | |
| CN111782740A (en) | Seat data processing method, computing device and storage medium | |
| KR102730189B1 (en) | Automatic frame creation system for 2d artwork image in 3d virtual gallery space | |
| JP6423933B2 (en) | Information processing apparatus, form management system, form management server, information processing method, and program thereof | |
| CN119179541B (en) | Multi-screen visual interactive switching method, device and equipment | |
| CN111782309A (en) | Method, apparatus, and computer-readable storage medium for displaying information | |
| KR102823436B1 (en) | System for application automatic cutting line and the operating method thereof | |
| JP6203613B2 (en) | Information processing apparatus, form management system, form management apparatus, information processing method, and program thereof | |
| CN119229264A (en) | A remote sensing image target recognition system and method for the public | |
| EP3859566A1 (en) | Systems and methods for product visualization using a single-page application |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210406 |
|
| RJ01 | Rejection of invention patent application after publication |