Data visualization method, apparatus, and electronic device

Abstract

This invention provides a data visualization method, apparatus, and electronic device. The method includes: sending a first rendering instruction to a push server, so as to forward the first rendering instruction to a rendering server based on the push server; receiving a rendered image sent by the push server and displaying the rendered image; obtaining a click instruction and obtaining corresponding two-dimensional image data from an image data server based on the click instruction; sending a second rendering instruction containing a clicked object to the push server, so as to forward the second rendering instruction to the rendering server based on the push server; receiving two-dimensional coordinates of the image sent by the push server, and performing chart rendering based on the two-dimensional image data and the two-dimensional coordinates of the image; wherein the two-dimensional coordinates of the image are obtained by the rendering server based on the second rendering instruction. This invention can solve the technical problem that it is currently impossible to display high-quality three-dimensional images on low-performance terminals in a low-cost manner.

Description

Technical Field

[0001] This invention relates to the field of image processing technology, and more specifically to a data visualization method, apparatus, and electronic device. Background Technology

[0002] With the booming development of the big data industry, large-screen display systems are no longer limited to simply displaying charts and data dashboards developed using visualization tools. Today's visualization screens incorporate technologies such as geographic trajectories, flight lines, heatmaps, blocks, 3D maps / globes, and electronic sand tables, making data more vivid and user-friendly, while also combining rich interactive functions and real-time capabilities. 3D image rendering has thus become a crucial component of large-screen visualization systems.

[0003] 3D image rendering in large-screen visualization systems typically employs the following methods: 1. Front-end WebGL rendering: The front-end browser first downloads the offline-generated 3D model from the server and then uses WebGL for rendering. All rendering and interaction are handled by the browser. The disadvantage is that if the model is too large, the hardware requirements for the front-end are very high. 2. Offline rendering of the 3D model into several fixed-angle 2D images: The advantage is very low performance requirements, and good visual effects can be achieved through graphic design. The disadvantage is poor interactivity, losing the advantages of 3D images. 3. Back-end cloud rendering: The visualization program is rendered on a remote server. User terminals send operation commands to the server through the browser. The server renders the visualization image in real time and then pushes the rendered image to the browser as a video stream using technologies such as WebRTC. The disadvantage is that image rendering places very high demands on the GPU. To support simultaneous online rendering across multiple terminals, cloud rendering requires at least several times to tens of times more hardware performance than conventional cloud computing applications to meet the needs of the same number of users.

[0004] In summary, current image rendering methods cannot meet the demand for displaying high-quality 3D images on low-performance terminals in a low-cost manner. Summary of the Invention

[0005] In view of this, it is necessary to provide a data visualization method, device, and electronic device to solve the technical problem of not being able to display high-quality 3D images on low-performance terminals in a low-cost manner.

[0006] To achieve the above objectives, the present invention provides a data visualization method, comprising:

[0007] Send a first rendering instruction to the push server, so that the first rendering instruction can be forwarded to the rendering server based on the push server;

[0008] The system receives and displays a rendered image sent by the push server; the rendered image is a 3D image obtained by the rendering server rendering the target model based on the first rendering instruction and sent to the push server.

[0009] When the rendered image is clicked, a click instruction is obtained, and the corresponding two-dimensional image data is obtained from the image data server based on the click instruction;

[0010] Send a second rendering instruction containing the clicked object to the push server, so as to send the second rendering instruction to the rendering server based on the push server;

[0011] The system receives the two-dimensional coordinates of an image sent by the push server, and performs chart rendering based on the two-dimensional image data and the two-dimensional coordinates of the image; the two-dimensional coordinates of the image are obtained by the rendering server converting the three-dimensional coordinates of the clicked object based on the second rendering instruction and sending them to the push server.

[0012] Furthermore, data visualization methods also include:

[0013] Before sending the first rendering instruction to the push server, a WebRTC protocol communication channel is established between the terminal device and the push server. Based on the WebRTC protocol communication channel, the terminal device sends the first rendering instruction and the second rendering instruction to the push server, and receives the rendered image and the two-dimensional coordinates of the image sent by the push server.

[0014] Furthermore, displaying the rendered image includes:

[0015] The rendered image is displayed to the browser based on the backend image canvas;

[0016] The chart rendering based on the two-dimensional image data and the two-dimensional coordinates of the image includes:

[0017] Chart rendering is performed on the front-end rendering canvas based on the two-dimensional image data and the two-dimensional coordinates of the image.

[0018] Furthermore, the two-dimensional coordinates of the image are obtained by the rendering server converting the three-dimensional coordinates of the clicked object based on a matrix projection algorithm.

[0019] Furthermore, data visualization methods also include:

[0020] Upon receiving an image drag instruction, a third rendering instruction containing the dragged object is sent to the push server, so that the third rendering instruction is sent to the rendering server based on the push server;

[0021] The system receives new two-dimensional coordinates of the image sent by the push server, and performs chart rendering based on the two-dimensional image data and the new two-dimensional coordinates of the image. The new two-dimensional coordinates of the image are obtained by the rendering server based on the third rendering instruction, which converts the three-dimensional coordinates of the dragged object and sends them to the push server.

[0022] The present invention also provides a data visualization method, comprising:

[0023] Receive the first rendering instruction sent by the push server;

[0024] The target model is rendered based on the first rendering instruction to obtain a rendered image, and the rendered image is sent to the push server so that the rendered image can be sent to the terminal device based on the push server;

[0025] The system receives a second rendering instruction containing a clicked object sent by the push server. Based on the second rendering instruction, it converts the three-dimensional coordinates of the clicked object into corresponding two-dimensional coordinates of the image and sends the two-dimensional coordinates of the image to the push server so that the push server can forward the two-dimensional coordinates of the image to the terminal device.

[0026] The two-dimensional coordinates of the image are used by the terminal device for chart rendering.

[0027] Further, the step of rendering the target model based on the first rendering instruction to obtain a rendered image, and sending the rendered image to the push server, includes:

[0028] If it is determined that there is no rendering image corresponding to the first rendering instruction in the cache pool of the rendering server, the target model is rendered in the rendering engine of the rendering server based on the first rendering instruction to obtain the rendering image, and the rendering image is sent to the cache pool for caching, and the rendering image is sent to the push server.

[0029] If the rendered image is found to exist in the cache pool, the rendered image is retrieved from the cache pool and then sent to the push server.

[0030] The present invention also provides a data visualization device, comprising:

[0031] The first sending module is used to send a first rendering instruction to the push server, so as to forward the first rendering instruction to the rendering server based on the push server;

[0032] The display module is used to receive the rendered image sent by the push server and display the rendered image; the rendered image is a three-dimensional image obtained by the rendering server rendering the target model based on the first rendering instruction and sent to the push server.

[0033] The acquisition module is used to acquire a click instruction when the rendered image is clicked, and to acquire the corresponding two-dimensional image data from the image data server based on the click instruction;

[0034] The second sending module is used to send a second rendering instruction containing the clicked object to the push server, so as to send the second rendering instruction to the rendering server based on the push server;

[0035] The rendering module is used to receive the two-dimensional coordinates of the image sent by the push server, and to perform chart rendering based on the two-dimensional image data and the two-dimensional coordinates of the image; the two-dimensional coordinates of the image are obtained by the rendering server based on the second rendering instruction, which converts the three-dimensional coordinates of the clicked object and sends them to the push server.

[0036] The present invention also provides a data visualization device, comprising:

[0037] The receiving module is used to receive the first rendering instruction sent by the push server;

[0038] The rendering module is used to render the target model based on the first rendering instruction to obtain a rendered image, and send the rendered image to the push server so as to send the rendered image to the terminal device based on the push server;

[0039] The coordinate determination module is used to receive a second rendering instruction containing a clicked object sent by the push server, convert the three-dimensional coordinates of the clicked object into corresponding two-dimensional coordinates of the image based on the second rendering instruction, and send the two-dimensional coordinates of the image to the push server so that the push server can forward the two-dimensional coordinates of the image to the terminal device.

[0040] The two-dimensional coordinates of the image are used by the terminal device for chart rendering.

[0041] The present invention also provides an electronic device, including a memory and a processor, wherein,

[0042] The memory is used to store programs;

[0043] The processor, coupled to the memory, is used to execute the program stored in the memory to implement the steps in the data visualization method described in any of the preceding claims.

[0044] The beneficial effects of the above implementation are as follows: The data visualization method, apparatus, and electronic device provided by the present invention send a first rendering instruction to a rendering server, where the rendering server renders the target model to obtain a three-dimensional image, i.e., a rendered image, and returns the rendered image for display; when the rendered image is clicked, two-dimensional image data is obtained from an image data server, and a second rendering instruction containing the clicked object is sent to the rendering server, whereby the rendering server converts the three-dimensional coordinates of the clicked object into two-dimensional coordinates of the image and returns the two-dimensional coordinates of the image. The terminal device can perform chart rendering based on the two-dimensional image data and the two-dimensional coordinates of the image, thereby realizing data visualization operations. This invention addresses the technical problem of displaying high-quality 3D images on low-performance terminals in a cost-effective manner by rendering images on a rendering server and displaying them on a terminal device. The rendering server also converts the 3D coordinates of clicked objects to obtain 2D coordinates, which the terminal device then uses to render charts based on. Throughout this process, the terminal device does not need to perform image rendering itself; both image rendering and coordinate conversion are handled by the rendering server. Therefore, the hardware requirements for the terminal device are low, while maintaining the interactivity of the 3D image. Furthermore, during 3D image interaction, the 2D image data is obtained from the image data server, and subsequent rendering is also performed on the terminal device, eliminating the need for repeated rendering by the rendering server and thus not increasing the hardware requirements of the rendering server. Attached Figure Description

[0045] To more clearly illustrate the technical solutions in the embodiments of the present invention, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0046] Figure 1 A flowchart illustrating an embodiment of the data visualization method provided by the present invention;

[0047] Figure 2 A flowchart illustrating another embodiment of the data visualization method provided by the present invention;

[0048] Figure 3 An interactive schematic diagram of an embodiment of the data visualization method provided by the present invention;

[0049] Figure 4 A schematic diagram of the structure of an embodiment of the data visualization device provided by the present invention;

[0050] Figure 5 A schematic diagram of another embodiment of the data visualization device provided by the present invention;

[0051] Figure 6 A schematic diagram of an embodiment of the electronic device provided by the present invention. Detailed Implementation

[0052] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of the present invention, and not all of them. All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without creative effort are within the scope of protection of the present invention.

[0053] In the description of the embodiments of this application, unless otherwise stated, "a plurality of" means two or more.

[0054] In this embodiment of the invention, the terms "comprising" and "having" and any variations thereof are intended to cover non-exclusive inclusion, for example, a process, method, apparatus, product or device that includes a series of steps or modules is not necessarily limited to those steps or modules that are explicitly listed, but may include other steps or modules that are not explicitly listed or that are inherent to such process, method, product or device.

[0055] The naming or numbering of steps in the embodiments of the present invention does not mean that the steps in the method flow must be executed in the time / logical order indicated by the naming or numbering. The execution order of the named or numbered process steps can be changed according to the technical purpose to be achieved, as long as the same or similar technical effect can be achieved.

[0056] In this document, the term "embodiment" means that a particular feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of the invention. The appearance of this phrase in various places throughout the specification does not necessarily refer to the same embodiment, nor is it a separate or alternative embodiment mutually exclusive with other embodiments. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments.

[0057] This invention provides a data visualization method, apparatus, and electronic device, which are described below.

[0058] like Figure 1 As shown, the present invention provides a data visualization method, including:

[0059] Step 110: Send a first rendering instruction to the push server, so that the first rendering instruction is forwarded to the rendering server based on the push server.

[0060] It is understood that the data visualization method provided in this embodiment is applied to a terminal device, that is, the method is executed by the terminal device, which can be a personal computer terminal or a mobile terminal device.

[0061] The terminal device is equipped with an event interaction center. Users trigger an initialization event through the event interaction center on the terminal device, and issue an instruction to render the model in the rendering room, which is the first rendering instruction. The push server forwards the first rendering instruction to the rendering engine of the rendering server.

[0062] The rendering server can be a cloud server. Its model management module stores 3D computer room models to be used. The rendering server automatically selects and allocates appropriate computing resources based on the model's size to perform rendering. After receiving a rendering command, the rendering server locates the computing resources containing the model to be rendered, searches for the rendering image in the cache pool, and if the image is present, pushes it directly to the terminal device. If the image is not present in the cache pool, real-time rendering is performed, the image is pushed directly to the terminal device, and then added to the cache pool.

[0063] Step 120: Receive the rendered image sent by the push server and display the rendered image; the rendered image is a three-dimensional image obtained by the rendering server rendering the target model based on the first rendering instruction and sent to the push server.

[0064] Understandably, after receiving the first rendering instruction, the rendering engine of the rendering server locates the data center model from the model management system based on the instruction, and uses the computing resources allocated by the computing resource scheduling engine to perform real-time rendering of the image, thus obtaining the rendered image. After obtaining the rendered image, the rendering engine sends it to the cache pool for caching so that it can be used again on the next call, and also sends the rendered image to the push server so that the first rendering instruction can be sent to the terminal device through the push server.

[0065] Step 130: When the rendered image is clicked, obtain the click instruction, and obtain the corresponding two-dimensional image data from the image data server based on the click instruction.

[0066] Understandably, users obtain the server ID by clicking the server identifier on the rendered image, and then use the server ID to call the image data server's interface to retrieve the 2D image data from the image data server. The image data server can be a local server.

[0067] Step 140: Send a second rendering instruction containing the clicked object to the push server, so as to send the second rendering instruction to the rendering server based on the push server.

[0068] It is understandable that after obtaining the two-dimensional image data from the image data server, a second rendering instruction containing the clicked object is sent to the push server, which then sends the second rendering instruction to the rendering engine of the rendering server.

[0069] Step 150: Receive the two-dimensional coordinates of the image sent by the push server, and perform chart rendering based on the two-dimensional image data and the two-dimensional coordinates of the image; the two-dimensional coordinates of the image are obtained by the rendering server based on the second rendering instruction, which converts the three-dimensional coordinates of the clicked object and sends them to the push server.

[0070] Understandably, the rendering engine uses OpenGL's matrix projection algorithm to convert the three-dimensional coordinates of the clicked object contained in the second rendering instruction into two-dimensional coordinates of the image. The rendering server sends the converted two-dimensional coordinates of the image to the push server, which then sends them to the terminal device for rendering charts and completing the data visualization operation.

[0071] In some embodiments, the data visualization method further includes:

[0072] Before sending the first rendering instruction to the push server, a WebRTC protocol communication channel is established between the terminal device and the push server. Based on the WebRTC protocol communication channel, the terminal device sends the first rendering instruction and the second rendering instruction to the push server, and receives the rendered image and the two-dimensional coordinates of the image sent by the push server.

[0073] Understandably, users can open the operation page on their terminal devices, load the front-end rendering canvas and the back-end image canvas, establish a WebRTC protocol communication channel with the push server to receive images pushed by the push server, and establish a WebRTC protocol communication channel with the event interaction center to send commands.

[0074] In some embodiments, the data visualization method, wherein displaying the rendered image includes:

[0075] The rendered image is displayed to the browser based on the backend image canvas;

[0076] The chart rendering based on the two-dimensional image data and the two-dimensional coordinates of the image includes:

[0077] Chart rendering is performed on the front-end rendering canvas based on the two-dimensional image data and the two-dimensional coordinates of the image.

[0078] Understandably, the backend image canvas can display the rendered image to the browser via the WebRTC protocol.

[0079] For the rendering modes of visualization components, two main categories are defined: front-end rendering components and back-end rendering components. Back-end rendering components are generally 3D components, such as 3D globes, 3D GIS, and custom 3D models. Front-end rendering components are generally 2D web components such as ECharts charts, text, and images. The visualization page consists of two canvases: the bottom canvas (i.e., the back-end image canvas) is used to place back-end rendering components, and the top canvas (i.e., the front-end rendering canvas) is used to place front-end rendering components. An event interaction center handles the coordinate mapping and event passing between different types of components on different canvases, resolving interaction issues between the two canvases.

[0080] Event delivery typically occurs when a user clicks or inputs on the canvas. Depending on the event, it needs to be translated into different rendering instructions, including rotating, moving, scaling, showing, hiding, and toggling 3D models.

[0081] In some embodiments, the two-dimensional coordinates of the image are obtained by the rendering server converting the three-dimensional coordinates of the clicked object based on a matrix projection algorithm.

[0082] Understandably, coordinate mapping typically occurs after the underlying canvas drag-and-drop event. The 2D components rendered on the backend image canvas need to be positioned in real-time relative to a fixed location on the 3D component. Since the 2D and 3D components use different coordinate systems, coordinate transformation is necessary. Specifically, the 2D component records its position in the 3D coordinate system and sends it to the rendering server. During rendering, the rendering server uses OpenGL's matrix projection algorithm to convert the 3D component's coordinates back to 2D component coordinates and returns them to the terminal device for positioning on the frontend rendering canvas.

[0083] In some embodiments, the data visualization method further includes:

[0084] Upon receiving an image drag instruction, a third rendering instruction containing the dragged object is sent to the push server, so that the third rendering instruction is sent to the rendering server based on the push server;

[0085] The system receives new two-dimensional coordinates of the image sent by the push server, and performs chart rendering based on the two-dimensional image data and the new two-dimensional coordinates of the image. The new two-dimensional coordinates of the image are obtained by the rendering server based on the third rendering instruction, which converts the three-dimensional coordinates of the dragged object and sends them to the push server.

[0086] Understandably, when a user drags a page on a terminal device, the terminal device's event interaction center generates a command to move the model (i.e., the third rendering command), which is then handed over to the rendering server to render the target model and obtain new two-dimensional coordinates of the image. The new two-dimensional coordinates of the image are then pushed to the terminal device via the push server. The terminal device uses the previously acquired two-dimensional image data and the newly acquired two-dimensional coordinates of the image to render the chart on the front-end rendering canvas and render the two-dimensional overlay at the new location.

[0087] In summary, the data visualization method provided by this invention includes: sending a first rendering instruction to a push server to forward the first rendering instruction to a rendering server based on the push server; receiving a rendered image sent by the push server and displaying the rendered image; the rendered image is a three-dimensional image obtained by the rendering server rendering a target model based on the first rendering instruction and sent to the push server; when the rendered image is clicked, obtaining a click instruction and obtaining corresponding two-dimensional image data from an image data server based on the click instruction; sending a second rendering instruction containing the clicked object to the push server to forward the second rendering instruction to the rendering server based on the push server; receiving image two-dimensional coordinates sent by the push server and performing chart rendering based on the two-dimensional image data and the image two-dimensional coordinates; the image two-dimensional coordinates are obtained by the rendering server converting the three-dimensional coordinates of the clicked object based on the second rendering instruction and sending them to the push server.

[0088] In the data visualization method provided by this invention, a first rendering instruction is sent to a rendering server, where the target model is rendered to obtain a three-dimensional image, i.e., a rendered image, and the rendered image is returned for display. When the rendered image is clicked, two-dimensional image data is obtained from an image data server, and a second rendering instruction containing the clicked object is sent to the rendering server. The rendering server converts the three-dimensional coordinates of the clicked object into two-dimensional coordinates of the image and returns the two-dimensional coordinates of the image. The terminal device can perform chart rendering based on the two-dimensional image data and the two-dimensional coordinates of the image to realize data visualization operations. This invention addresses the technical problem of displaying high-quality 3D images on low-performance terminals in a cost-effective manner by rendering images on a rendering server and displaying them on a terminal device. The rendering server also converts the 3D coordinates of clicked objects to obtain 2D coordinates, which the terminal device then uses to render charts based on. Throughout this process, the terminal device does not need to perform image rendering itself; both image rendering and coordinate conversion are handled by the rendering server. Therefore, the hardware requirements for the terminal device are low, while maintaining the interactivity of the 3D image. Furthermore, during 3D image interaction, the 2D image data is obtained from the image data server, and subsequent rendering is also performed on the terminal device, eliminating the need for repeated rendering by the rendering server and thus not increasing the hardware requirements of the rendering server.

[0089] In another embodiment, such as Figure 2 As shown, the present invention provides a data visualization method, comprising:

[0090] Step 210: Receive the first rendering instruction sent by the push server.

[0091] It is understood that the method in this embodiment is applied to the rendering server, and the rendering server executes the method. The method steps executed by the rendering server in this embodiment correspond to the method steps executed by the terminal device in the above embodiments, and they can be referred to each other.

[0092] The rendering server's model management module stores 3D computer room models that are yet to be used. The rendering server will automatically select and allocate appropriate computing resources based on the model size to achieve rendering.

[0093] Step 220: Render the target model based on the first rendering instruction to obtain a rendered image, and send the rendered image to the push server so that the rendered image can be sent to the terminal device based on the push server.

[0094] Understandably, after receiving the first rendering instruction, the rendering engine of the rendering server locates the data center model from the model management system based on the instruction, and uses the computing resources allocated by the computing resource scheduling engine to perform real-time rendering of the image, thus obtaining the rendered image. After obtaining the rendered image, the rendering engine sends it to the cache pool for caching so that it can be used again on the next call, and also sends the rendered image to the push server so that the first rendering instruction can be sent to the terminal device through the push server.

[0095] Step 230: Receive a second rendering instruction containing the clicked object sent by the push server; based on the second rendering instruction, convert the three-dimensional coordinates of the clicked object into corresponding two-dimensional coordinates of the image; and send the two-dimensional coordinates of the image to the push server so that the push server can forward the two-dimensional coordinates of the image to the terminal device.

[0096] The two-dimensional coordinates of the image are used by the terminal device for chart rendering.

[0097] Understandably, the rendering engine of the rendering server uses OpenGL's matrix projection algorithm to convert the three-dimensional coordinates of the clicked object contained in the second rendering instruction into two-dimensional coordinates of the image. The rendering server then sends the converted two-dimensional coordinates of the image to the push server, which in turn sends them to the terminal device for rendering charts and completing the data visualization operation.

[0098] In some embodiments, rendering the target model based on the first rendering instruction to obtain a rendered image and sending the rendered image to the push server includes:

[0099] If it is determined that there is no rendering image corresponding to the first rendering instruction in the cache pool of the rendering server, the target model is rendered in the rendering engine of the rendering server based on the first rendering instruction to obtain the rendering image, and the rendering image is sent to the cache pool for caching, and the rendering image is sent to the push server.

[0100] If the rendered image exists in the cache pool, the rendered image is retrieved from the cache pool and then sent to the push server. It can be understood that after receiving a rendering instruction, the rendering server locates the computing resource containing the model to be rendered, searches for the rendered image in the cache pool, and if the rendered image is present in the cache pool, it directly pushes the rendered image to the terminal device; if the rendered image is not present in the cache pool, real-time rendering is performed, the rendered image is directly pushed to the terminal device, and then placed into the cache pool.

[0101] In some other embodiments, the interactive schematic diagram of the data visualization method provided by the present invention can be referred to. Figure 3 Taking smart data center data visualization as an example, the 3D model of the data center is used by the backend rendering component to render the target model, and the real-time operation status of each server is displayed using 2D elements such as text and charts, which are rendered by the frontend rendering component in the browser to display the target model.

[0102] Data visualization methods specifically include:

[0103] Step 3010: User A opens a page on the terminal device, loading the front-end rendering canvas and the back-end image canvas. The back-end image canvas establishes a WebRTC protocol communication channel with the push server to receive pushed images. The event interaction center of the terminal device establishes a WebRTC protocol communication channel with the push server to send instructions.

[0104] Step 3020: The event interaction center triggers the initialization event and issues the instruction to render the server room model, i.e., the first rendering instruction.

[0105] Step 3030: The push server forwards the first rendering instruction to the rendering engine of the rendering server.

[0106] Step 3040: The rendering engine finds the data center model from the model management according to the first rendering instruction, calls the computing resources allocated by the computing resource scheduling engine to perform real-time rendering of the image, puts the rendering result, i.e. the rendered image, into the cache pool and pushes it to the push server.

[0107] Step 3050: The backend image canvas displays the rendered image obtained from the push server to the browser via the WebRTC protocol.

[0108] Step 360: User A clicks on the server identifier on the corresponding layer of the rendered image in the browser to obtain the server ID. Then, the user calls the data service interface through the server ID to obtain the server data, i.e., the two-dimensional image data.

[0109] Step 3070: When User A clicks on the server identifier, a second rendering instruction containing the clicked object is sent to the rendering engine of the rendering server. The three-dimensional coordinates of the clicked object are converted into two-dimensional coordinates through the matrix projection algorithm of OpenGL and returned to the canvas of the terminal device. The coordinates of the rendered image in the browser are obtained. Using the two-dimensional image data obtained in step 3060, the chart is rendered on the front-end rendering canvas, thereby completing the data visualization of the image data server.

[0110] Step 3080: User A drags the page on the terminal device. The event interaction center of the terminal device generates a command to move the model (i.e., the third rendering command) and hands it over to the backend for rendering. At the same time, step 370 is repeated to render the two-dimensional overlay at the new position.

[0111] Step 3090: User B opens the same page on the terminal device and repeats steps 2, 3, and 4. Since the rendered image has been cached in the cache pool, the image push service will directly retrieve the image from the cache pool and push it to the layer.

[0112] Step 3010: User B clicks on another server representation on the layer, and repeats steps 3060 and 3070 to complete the data visualization of another image data server.

[0113] In one embodiment, such as Figure 4 As shown, the present invention also provides a data visualization device 400, comprising:

[0114] The first sending module 410 is used to send a first rendering instruction to the push server, so as to forward the first rendering instruction to the rendering server based on the push server;

[0115] The display module 420 is used to receive the rendered image sent by the push server and display the rendered image; the rendered image is a three-dimensional image obtained by the rendering server rendering the target model based on the first rendering instruction and sent to the push server.

[0116] The acquisition module 430 is used to acquire a click instruction when the rendered image is clicked, and acquire the corresponding two-dimensional image data from the image data server based on the click instruction;

[0117] The second sending module 440 is used to send a second rendering instruction containing the clicked object to the push server, so as to send the second rendering instruction to the rendering server based on the push server;

[0118] The rendering module 450 is used to receive the two-dimensional coordinates of the image sent by the push server, and to perform chart rendering based on the two-dimensional image data and the two-dimensional coordinates of the image; the two-dimensional coordinates of the image are obtained by the rendering server based on the second rendering instruction, which converts the three-dimensional coordinates of the clicked object and sends them to the push server.

[0119] In other embodiments, the present invention provides a data visualization device 500, comprising:

[0120] The receiving module 510 is used to receive the first rendering instruction sent by the push server;

[0121] The rendering module 520 is used to render the target model based on the first rendering instruction to obtain a rendered image, and send the rendered image to the push server so as to send the rendered image to the terminal device based on the push server;

[0122] The coordinate determination module 530 is used to receive a second rendering instruction containing a clicked object sent by the push server, convert the three-dimensional coordinates of the clicked object into corresponding two-dimensional coordinates of the image based on the second rendering instruction, and send the two-dimensional coordinates of the image to the push server so that the push server can forward the two-dimensional coordinates of the image to the terminal device.

[0123] The two-dimensional coordinates of the image are used by the terminal device for chart rendering.

[0124] The data visualization device provided in the above embodiments can implement the technical solutions described in the above data visualization method embodiments. The specific implementation principles of each module or unit can be found in the corresponding content in the above data visualization method embodiments, and will not be repeated here.

[0125] like Figure 6 As shown, the present invention also provides an electronic device 600. The electronic device 600 includes a processor 601, a memory 602, and a display 603. Figure 6 Only some components of the electronic device 600 are shown, but it should be understood that it is not required to implement all the components shown, and more or fewer components may be implemented instead.

[0126] In some embodiments, memory 602 may be an internal storage unit of electronic device 600, such as a hard disk or memory of electronic device 600. In other embodiments, memory 602 may also be an external storage device of electronic device 600, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc. equipped on electronic device 600.

[0127] Furthermore, the memory 602 may include both internal storage units of the electronic device 600 and external storage devices. The memory 602 is used to store application software and various types of data installed on the electronic device 600.

[0128] In some embodiments, processor 601 may be a central processing unit (CPU), microprocessor, or other data processing chip, used to run program code stored in memory 602 or process data, such as the data visualization method of the present invention.

[0129] In some embodiments, display 603 may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, or an OLED (Organic Light-Emitting Diode) touchscreen. Display 603 is used to display information from electronic device 600 and to display a visual user interface. Components 601-603 of electronic device 600 communicate with each other via a system bus.

[0130] In some embodiments of the present invention, when the processor 601 executes a data visualization program with front-end and back-end hybrid rendering in the memory 602, the following steps can be implemented:

[0131] Send a first rendering instruction to the push server, so that the first rendering instruction can be forwarded to the rendering server based on the push server;

[0132] The system receives and displays a rendered image sent by the push server; the rendered image is a 3D image obtained by the rendering server rendering the target model based on the first rendering instruction and sent to the push server.

[0133] When the rendered image is clicked, a click instruction is obtained, and the corresponding two-dimensional image data is obtained from the image data server based on the click instruction;

[0134] Send a second rendering instruction containing the clicked object to the push server, so as to send the second rendering instruction to the rendering server based on the push server;

[0135] The system receives the two-dimensional coordinates of an image sent by the push server, and performs chart rendering based on the two-dimensional image data and the two-dimensional coordinates of the image; the two-dimensional coordinates of the image are obtained by the rendering server based on the second rendering instruction, which converts the three-dimensional coordinates of the clicked object and sends them to the push server.

[0136] Or, including:

[0137] Receive the first rendering instruction sent by the push server;

[0138] The target model is rendered based on the first rendering instruction to obtain a rendered image, and the rendered image is sent to the push server so that the rendered image can be sent to the terminal device based on the push server;

[0139] The system receives a second rendering instruction containing a clicked object sent by the push server. Based on the second rendering instruction, it converts the three-dimensional coordinates of the clicked object into corresponding two-dimensional coordinates of the image and sends the two-dimensional coordinates of the image to the push server so that the push server can forward the two-dimensional coordinates of the image to the terminal device.

[0140] The two-dimensional coordinates of the image are used by the terminal device for chart rendering.

[0141] It should be understood that when the processor 601 executes the front-end and back-end hybrid rendering data visualization program in the memory 602, in addition to the functions mentioned above, it can also perform other functions, as can be found in the description of the corresponding method embodiments above.

[0142] Furthermore, this embodiment of the invention does not specifically limit the type of electronic device 600 mentioned. Electronic device 600 can be a mobile phone, tablet computer, personal digital assistant (PDA), wearable device, laptop computer, or other portable electronic device. Exemplary embodiments of portable electronic devices include, but are not limited to, portable electronic devices running iOS, Android, Microsoft, or other operating systems. The aforementioned portable electronic device can also be other portable electronic devices, such as a laptop computer with a touch-sensitive surface (e.g., a touch panel). It should also be understood that in some other embodiments of the invention, electronic device 600 may not be a portable electronic device, but rather a desktop computer with a touch-sensitive surface (e.g., a touch panel).

[0143] In another aspect, the present invention also provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, is implemented to perform the data visualization methods provided by the methods described above, the method comprising:

[0144] Send a first rendering instruction to the push server, so that the first rendering instruction can be forwarded to the rendering server based on the push server;

[0145] The system receives and displays a rendered image sent by the push server; the rendered image is a 3D image obtained by the rendering server rendering the target model based on the first rendering instruction and sent to the push server.

[0146] When the rendered image is clicked, a click instruction is obtained, and the corresponding two-dimensional image data is obtained from the image data server based on the click instruction;

[0147] Send a second rendering instruction containing the clicked object to the push server, so as to send the second rendering instruction to the rendering server based on the push server;

[0148] The system receives the two-dimensional coordinates of an image sent by the push server, and performs chart rendering based on the two-dimensional image data and the two-dimensional coordinates of the image; the two-dimensional coordinates of the image are obtained by the rendering server based on the second rendering instruction, which converts the three-dimensional coordinates of the clicked object and sends them to the push server.

[0149] Or, including:

[0150] Receive the first rendering instruction sent by the push server;

[0151] The target model is rendered based on the first rendering instruction to obtain a rendered image, and the rendered image is sent to the push server so that the rendered image can be sent to the terminal device based on the push server;

[0152] The system receives a second rendering instruction containing a clicked object sent by the push server. Based on the second rendering instruction, it converts the three-dimensional coordinates of the clicked object into corresponding two-dimensional coordinates of the image and sends the two-dimensional coordinates of the image to the push server so that the push server can forward the two-dimensional coordinates of the image to the terminal device.

[0153] The two-dimensional coordinates of the image are used by the terminal device for chart rendering.

[0154] Those skilled in the art will understand that all or part of the processes of the methods described in the above embodiments can be implemented by a computer program instructing related hardware, and the program can be stored in a computer-readable storage medium. The computer-readable storage medium may be a disk, optical disk, read-only memory, or random access memory, etc.

[0155] The data visualization method, apparatus, and electronic device provided by the present invention have been described in detail above. Specific examples have been used to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only for the purpose of helping to understand the method and core ideas of the present invention. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of the present invention. Therefore, the content of this specification should not be construed as a limitation of the present invention.

Claims

1. A data visualization method, characterized in that, include: Send a first rendering instruction to the push server, so that the first rendering instruction can be forwarded to the rendering server based on the push server; The system receives and displays a rendered image sent by the push server; the rendered image is a 3D image obtained by the rendering server rendering the target model based on the first rendering instruction and sent to the push server. When the rendered image is clicked, a click instruction is obtained, and the corresponding two-dimensional image data is obtained from the image data server based on the click instruction; Send a second rendering instruction containing the clicked object to the push server, so as to send the second rendering instruction to the rendering server based on the push server; The system receives the two-dimensional coordinates of an image sent by the push server, and performs chart rendering based on the two-dimensional image data and the two-dimensional coordinates of the image; the two-dimensional coordinates of the image are obtained by the rendering server converting the three-dimensional coordinates of the clicked object based on the second rendering instruction and sending them to the push server.

2. The data visualization method according to claim 1, characterized in that, Also includes: Before sending the first rendering instruction to the push server, a WebRTC protocol communication channel is established between the terminal device and the push server. Based on the WebRTC protocol communication channel, the terminal device sends the first rendering instruction and the second rendering instruction to the push server, and receives the rendered image and the two-dimensional coordinates of the image sent by the push server.

3. The data visualization method according to claim 1, characterized in that, The step of displaying the rendered image includes: The rendered image is displayed to the browser based on the backend image canvas; The chart rendering based on the two-dimensional image data and the two-dimensional coordinates of the image includes: Chart rendering is performed on the front-end rendering canvas based on the two-dimensional image data and the two-dimensional coordinates of the image.

4. The data visualization method according to claim 1, characterized in that, The two-dimensional coordinates of the image are obtained by the rendering server converting the three-dimensional coordinates of the clicked object based on a matrix projection algorithm.

5. The data visualization method according to any one of claims 1-4, characterized in that, Also includes: Upon receiving an image drag instruction, a third rendering instruction containing the dragged object is sent to the push server, so that the third rendering instruction is sent to the rendering server based on the push server; The system receives new two-dimensional coordinates of the image sent by the push server, and performs chart rendering based on the two-dimensional image data and the new two-dimensional coordinates of the image. The new two-dimensional coordinates of the image are obtained by the rendering server based on the third rendering instruction, which converts the three-dimensional coordinates of the dragged object and sends them to the push server.

6. A data visualization method, characterized in that, include: Receive the first rendering instruction sent by the push server; The target model is rendered based on the first rendering instruction to obtain a rendered image, and the rendered image is sent to the push server so that the rendered image can be sent to the terminal device based on the push server; The system receives a second rendering instruction containing a clicked object sent by the push server. Based on the second rendering instruction, it converts the three-dimensional coordinates of the clicked object into corresponding two-dimensional coordinates of the image and sends the two-dimensional coordinates of the image to the push server so that the push server can forward the two-dimensional coordinates of the image to the terminal device. The two-dimensional coordinates of the image are used by the terminal device to render charts in conjunction with the two-dimensional image data; the two-dimensional image data is obtained by the terminal device from the image data server based on the corresponding click instruction when the rendered image on the terminal device is clicked.

7. The data visualization method according to claim 6, characterized in that, The step of rendering the target model based on the first rendering instruction to obtain a rendered image, and sending the rendered image to the push server, includes: If it is determined that the rendering image corresponding to the first rendering instruction does not exist in the cache pool of the rendering server, the rendering engine of the rendering server renders the target model based on the first rendering instruction to obtain the rendering image, and sends the rendering image to the cache pool for caching, and sends the rendering image to the push server. If the rendered image is found to exist in the cache pool, the rendered image is retrieved from the cache pool and then sent to the push server.

8. A data visualization device, characterized in that, include: The first sending module is used to send a first rendering instruction to the push server, so as to forward the first rendering instruction to the rendering server based on the push server; The display module is used to receive the rendered image sent by the push server and display the rendered image; the rendered image is a three-dimensional image obtained by the rendering server rendering the target model based on the first rendering instruction and sent to the push server. The acquisition module is used to acquire a click instruction when the rendered image is clicked, and to acquire the corresponding two-dimensional image data from the image data server based on the click instruction; The second sending module is used to send a second rendering instruction containing the clicked object to the push server, so as to send the second rendering instruction to the rendering server based on the push server; The rendering module is used to receive the two-dimensional coordinates of the image sent by the push server, and to perform chart rendering based on the two-dimensional image data and the two-dimensional coordinates of the image; the two-dimensional coordinates of the image are obtained by the rendering server based on the second rendering instruction, which converts the three-dimensional coordinates of the clicked object and sends them to the push server.

9. A data visualization device, characterized in that, include: The receiving module is used to receive the first rendering instruction sent by the push server; The rendering module is used to render the target model based on the first rendering instruction to obtain a rendered image, and send the rendered image to the push server so as to send the rendered image to the terminal device based on the push server; The coordinate determination module is used to receive a second rendering instruction containing a clicked object sent by the push server, convert the three-dimensional coordinates of the clicked object into corresponding two-dimensional coordinates of the image based on the second rendering instruction, and send the two-dimensional coordinates of the image to the push server so that the push server can forward the two-dimensional coordinates of the image to the terminal device. The two-dimensional coordinates of the image are used by the terminal device to render charts in conjunction with the two-dimensional image data; the two-dimensional image data is obtained by the terminal device from the image data server based on the corresponding click instruction when the rendered image on the terminal device is clicked.

10. An electronic device, characterized in that, Including memory and processor, among which, The memory is used to store programs; The processor, coupled to the memory, is used to execute the program stored in the memory to implement the steps in the data visualization method according to any one of claims 1 to 7.

Images