CN113127784A - Large-screen data visual display method and device, storage medium and computer equipment - Google Patents

Large-screen data visual display method and device, storage medium and computer equipment Download PDF

Info

Publication number
CN113127784A
CN113127784A CN202110476925.3A CN202110476925A CN113127784A CN 113127784 A CN113127784 A CN 113127784A CN 202110476925 A CN202110476925 A CN 202110476925A CN 113127784 A CN113127784 A CN 113127784A
Authority
CN
China
Prior art keywords
component
scaling
canvas
target
container
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202110476925.3A
Other languages
Chinese (zh)
Inventor
吴海杰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping An International Smart City Technology Co Ltd
Original Assignee
Ping An International Smart City Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Ping An International Smart City Technology Co Ltd filed Critical Ping An International Smart City Technology Co Ltd
Priority to CN202110476925.3A priority Critical patent/CN113127784A/en
Publication of CN113127784A publication Critical patent/CN113127784A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The application relates to the technical field of data visualization, and discloses a large-screen data visualization display method, a large-screen data visualization display device, a storage medium and computer equipment, wherein the method comprises the following steps: when monitoring that the browser viewport changes, acquiring change data and container parameters of the browser viewport; calculating the canvas scaling of the canvas according to the change data of the browser viewport and the container parameters; re-rendering the browser container according to the canvas scaling; acquiring target components related to the container, broadcasting the canvas to each target component in a scaling manner, and finishing re-rendering of each target component; and acquiring large-screen data, importing the large-screen data into the re-rendered container and each target assembly, generating a visual graph, and displaying the visual graph on an interface. According to the method and the device, the container and each target assembly are automatically re-rendered according to the change condition of the viewport of the browser, so that the display proportion and parameters are adjusted, the displayed content is guaranteed not to deform, and the display effect is improved.

Description

Large-screen data visual display method and device, storage medium and computer equipment
Technical Field
The application relates to the technical field of data visualization, in particular to a large-screen data visualization display method, a large-screen data visualization display device, a storage medium and computer equipment.
Background
Large screen data visualization is a relatively wide area among terminal applications. Data visualization is mainly aimed at clearly and effectively conveying and communicating information by means of graphical means. No matter in retail, logistics, electric power, water conservancy, environmental protection, still traffic field, help the user to discover, diagnose the problem through the visual screen wall of interactive real-time data, become an indispensable ring in big data solution more and more.
Unlike the currently popular HTML5 responsive development, HTML5 responsive development adapts where the device viewport allows scrolling, allowing components to be presented in different forms and locations, or a scroll bar to appear to hold the complete content when horizontal or vertical content cannot be accommodated.
The largest difference of large-screen data visualization is that the integrity of content needs to be guaranteed, the form and position of components are not allowed to change, the overflow of the content is not allowed, and all data are required to be displayed under a single screen.
However, for the display on a large screen, the display needs to be supported by a visualization technology, a single screen needs to contain as much content as possible, and the overall layout of the page is not affected, so that the problem of adaptation of a viewport of a browser always occurs, the displayed content is deformed, and the display effect is poor.
Disclosure of Invention
The application mainly aims to provide a large-screen data visual display method, a large-screen data visual display device, a large-screen data visual display storage medium and computer equipment, so that a browser view port of a terminal is automatically adapted, displayed content is ensured not to deform, and a display effect is improved.
In order to achieve the above object, the present application provides a large-screen data visualization display method, including:
when monitoring that a browser viewport changes, acquiring change data of the browser viewport, and reading container parameters preset by a container of the browser; wherein the container parameters include canvas size, zoom mode;
calculating the scaling of the canvas according to the change data of the browser viewport and the container parameters to obtain the scaling of the canvas;
re-rendering the browser container according to the canvas scaling;
acquiring components related to the container to obtain target components, broadcasting the canvas to each target component in a scaling manner, and finishing re-rendering of each target component;
and acquiring large-screen data, importing the large-screen data into the container and each target assembly which are re-rendered, generating a visual graph, and displaying the visual graph on an interface.
Further, the target components include a graph component, and after the steps of obtaining the components associated with the container, obtaining the target components, and broadcasting the canvas scaling to each target component, the method further includes:
acquiring chart component parameters preset by the chart component;
re-determining the chart component parameters of the chart component according to the canvas scaling and the chart component parameters to obtain target chart component parameters; the target diagram component parameters comprise an approach animation, a diagram component scaling ratio, a relative relation between components and position information;
and finishing the re-rendering of the chart component according to the target chart component parameter of the chart component, acquiring the component related to the chart component, and broadcasting the target chart component parameter of the chart component to the component related to the chart component to finish the re-rendering.
Preferably, the step of re-determining the chart component parameters of the chart component according to the canvas scaling and the chart component parameters comprises:
adjusting the width and height of the chart component and the chart component scaling according to the canvas scaling;
taking the adjusted width, height and scale of the chart component as the parameters of the chart component;
the step of completing the re-rendering of the chart assembly according to the target chart assembly parameters of the chart assembly comprises the following steps:
and reducing or enlarging the width and the height of the chart component according to the chart component scaling, and cutting the content exceeding the width and the height of the chart component to finish the re-rendering of the chart component.
Preferably, the step of re-determining the chart component parameters of the chart component according to the canvas scaling and the chart component parameters comprises:
adjusting the width, height and width scaling of the chart component according to the canvas scaling;
taking the adjusted width, height and width scaling of the chart component as the chart component parameters;
the step of completing the re-rendering of the chart assembly according to the target chart assembly parameters of the chart assembly comprises the following steps:
and reducing or enlarging the width of the chart component according to the width scaling, and keeping the height of the chart component unchanged, thereby finishing the re-rendering of the chart component.
Further, after the step of broadcasting the canvas scaling to the target components, the method further comprises:
monitoring the broadcast message of each target component; wherein the broadcast message carries target component parameters of the target component;
when a broadcast message of at least one target component is monitored, extracting target component parameters of the target component from the broadcast message;
re-rendering the container according to the target component parameters of the target component.
Further, before the step of broadcasting the canvas scaling to each target component, the method further comprises:
judging whether the canvas scaling is a preset target scaling or not;
if not, the step of broadcasting the canvas scaling to each target component is executed;
and if so, re-rendering each target component according to the canvas scaling.
Preferably, the step of importing the large-screen data into the re-rendered container and each target component to generate a visual graph, and displaying the visual graph on an interface includes:
carrying out planarization treatment on the large-screen data;
importing the large-screen data subjected to planarization treatment into the container and each target assembly subjected to re-rendering to obtain a visual graph;
and displaying the visual graph on an interface according to a preset style.
The application also provides a large-screen data visual display device, including:
the monitoring module is used for acquiring change data of a browser viewport when monitoring that the browser viewport changes and reading container parameters preset by a container of the browser; wherein the container parameters include canvas size, zoom mode;
the computing module is used for computing the zoom ratio of the canvas according to the change data of the browser viewport and the container parameters to obtain the zoom ratio of the canvas;
a re-rendering module to re-render the browser container according to the canvas scaling;
the broadcasting module is used for acquiring components related to the container to obtain target components, broadcasting the canvas to each target component in a scaling manner and finishing the re-rendering of each target component;
and the display module is used for acquiring large-screen data, importing the large-screen data into the re-rendered container and each target assembly, generating a visual graph, and displaying the visual graph on an interface.
The present application further provides a computer device comprising a memory and a processor, the memory storing a computer program, the processor implementing the steps of any of the above methods when executing the computer program.
The present application also provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, carries out the steps of the method of any of the above.
According to the large-screen data visual display method, the large-screen data visual display device, the storage medium and the computer equipment, when the change of the view port of the browser is monitored, the change data of the view port of the browser is obtained, and the container parameters preset by a container of the browser are read; calculating the scaling of the canvas according to the change data of the viewport of the browser and the container parameters to obtain the scaling of the canvas; re-rendering the browser container according to the canvas scaling; acquiring components related to the container to obtain target components, broadcasting the canvas to each target component in a scaling manner, and finishing re-rendering of each target component; acquiring large-screen data, importing the large-screen data into the re-rendered container and each target assembly to generate a visual graph, and displaying the visual graph on an interface, so that the container and each target assembly are automatically re-rendered according to the change condition of a viewport of the browser, such as the change of terminal resolution, so as to adjust display proportion and parameters, ensure that display content is not deformed, and improve display effect; in addition, for a UI designer, the UI designer can adapt to various displays by only using the size of the universal canvas and outputting a set of design scheme, and the displayed content is ensured not to deform; for developers, only visual restoration is needed according to the design scheme of a UI designer, and development efficiency is improved. In practical application, a developer does not need to care about what display a program is displayed on, and only needs to configure relevant parameters during development, so that the program can be normally displayed on various resolutions, and the problem of browser viewport adaptation is solved.
Drawings
Fig. 1 is a schematic flowchart of a large-screen data visualization display method according to an embodiment of the present application;
fig. 2 is a schematic block diagram of a large-screen data visualization display device according to an embodiment of the present application;
fig. 3 is a block diagram illustrating a structure of a computer device according to an embodiment of the present application.
The implementation, functional features and advantages of the objectives of the present application will be further explained with reference to the accompanying drawings.
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 application provides a large-screen data visual display method, which is used for solving the problems that displayed content is deformed and the display effect is poor when a viewport of a browser is adapted, and in an embodiment, as shown in fig. 1, the large-screen data visual display method comprises the following steps:
s1, when the change of the browser viewport is monitored, obtaining the change data of the browser viewport and reading container parameters preset by a container of the browser; wherein the container parameters include canvas size, zoom mode;
s2, calculating the zoom ratio of the canvas according to the change data of the browser viewport and the container parameters to obtain the zoom ratio of the canvas;
s3, re-rendering the browser container according to the canvas scaling;
s4, acquiring components related to the container to obtain target components, broadcasting the canvas scaling to each target component, and finishing re-rendering of each target component;
s5, acquiring large-screen data, importing the large-screen data into the re-rendered container and each target assembly, generating a visual graph, and displaying the visual graph on an interface.
As described in step S1, the browser is a main tool for implementing operations such as web browsing on a computer, a mobile phone, and a smart tv. With the upgrading of hardware equipment, browsers are increasingly working on high-definition large-area displays, and the development trend of large screens is realized. The browser view port is a display area used for displaying webpage content, and can be reduced to be displayed on the browser by setting the browser view port no matter how large the original resolution size of the webpage is, so that the webpage looks more like a desktop browser on a mobile phone. The basic unit of the browser interface is a UI element, a container is a component for accommodating a plurality of sub-elements, and the container can be added with other components to form a composite component, for example, a button can be added in a panel, which is also a component.
The terminal monitors the change condition of the browser viewport in real time, obtains the change data of the browser viewport and obtains the container parameters preset by the container from the database. Wherein the changing condition may include zooming in, zooming out of the viewport, or changing the resolution of the terminal, etc. The variation data may include a zoom-in scale, a zoom-out scale, a terminal resolution, etc. of the viewport. The container parameters include the number of elements, height, width, and position information, among others.
As described in step S2 above, each project is first sized before being developed, such as 1920 × 1080px, to determine the content of the response to be presented according to the browser layout in the limited canvas. And calculating the scaling of response according to the container size and the browser size, thereby ensuring that the browser can completely display the canvas content under different canvas sizes. Such as: if one wishes to show canvas content 3840 x 2160px, under the 2k display, the content will be shown in its entirety; at a 1080p display, then the multiplication by the compression factor is required: the horizontal compression coefficient scaleX is 0.5, the longitudinal compression coefficient caleY is 0.5, namely the canvas content is reduced by 0.5 times; under a 4k display, the horizontal compression factor scaleX is 2, the vertical compression factor scaleY is 2, and the canvas content is enlarged by two times; the above is limited to when the canvas size and the display size are both 16: in case 9, the scaling of the canvas does not result in a distortion of the content. When the canvas size in the project is not matched with the size of the actual demonstration display seriously, the display effect of the current scheme seriously influences the experience. For example, developing under a canvas of 1080p, where projected onto a very large screen such as the police, the display resolution may be 12000 x 6000, the canvas content will necessarily be severely distorted.
Therefore, in this embodiment, after it is monitored that the browser viewport is changed, for example, when the browser viewport is enlarged, reduced or switched to a display device with different resolutions, the container is initialized to obtain the pre-configured container parameter, the size of the canvas is determined, and the scaling of the canvas is calculated as the scaling of the canvas according to the change data of the browser viewport and the container parameter, so as to re-determine the scaling of the canvas, thereby avoiding the deformation of the content displayed on the display device with different resolutions. For example, when the resolution of the display device is changed from 16: when the ratio 9 becomes 2:1, the height of the viewport of the browser is increased, and the height of the container, the position of the element or the number of the elements need to be adjusted, so as to avoid that the content displayed on the display device with the resolution is longitudinally elongated, which affects the viewing experience.
As described above in step S3, this step re-renders the container at the canvas scale, such as re-laying out the height of the container, the location or number of internal elements at the canvas scale.
After the container is re-rendered, the components directly or indirectly related to the container are further obtained to obtain the target component as described in step S4 above. For example, when the canvas scaling of the canvas is changed, the display scale of the target component directly or indirectly related to the container also needs to be adjusted, so that the canvas scaling needs to be broadcast to each target component, so that each target component adjusts the scaling and other parameters according to the canvas scaling, and re-renders the target component.
As described in step S5, when the container and each target component are re-rendered, the large-screen data of the visual graphic data is obtained, the visual graphic data is imported into the rendered container and each target component to generate a visual graphic, and the generated visual graphic is displayed on the interface of the display device, where the visual graphic is a graphic adapted to the change of the view port of the browser, so as to automatically adapt to the change of the view port of the browser, automatically adjust the display scale and parameters of the container and each target component, ensure that the display content is not deformed, and solve the technical problem that the traditional response type display content is compressed and deformed. The large-screen data is visual graphic data corresponding to the condition that the screen size is larger than a preset value or the resolution of the display equipment is larger than a preset resolution.
According to the large-screen data visual display method, when the change of the view port of the browser is monitored, the change data of the view port of the browser is obtained, and container parameters preset by a container of the browser are read; calculating the scaling of the canvas according to the change data of the viewport of the browser and the container parameters to obtain the scaling of the canvas; re-rendering the browser container according to the canvas scaling; acquiring components related to the container to obtain target components, broadcasting the canvas to each target component in a scaling manner, and finishing re-rendering of each target component; acquiring large-screen data, importing the large-screen data into the re-rendered container and each target assembly to generate a visual graph, and displaying the visual graph on an interface, so that the container and each target assembly are automatically re-rendered according to the change condition of a viewport of the browser, such as the change of terminal resolution, so as to adjust display proportion and parameters, ensure that display content is not deformed, and improve display effect; in addition, for a UI designer, the UI designer can adapt to various displays by only using the size of the universal canvas and outputting a set of design scheme, and the displayed content is ensured not to deform; for developers, only visual restoration is needed according to the design scheme of a UI designer, and development efficiency is improved. In practical application, a developer does not need to care about what display a program is displayed on, and only needs to configure relevant parameters during development, so that the program can be normally displayed on various resolutions, and the problem of browser viewport adaptation is solved.
In an embodiment, the step of obtaining the components related to the container, obtaining target components, and broadcasting the canvas scaling to each target component in step S4 may further include:
d5, obtaining chart component parameters preset by the chart component;
d6, re-determining the chart component parameters of the chart component according to the canvas scaling and the chart component parameters to obtain target chart component parameters; the target diagram component parameters comprise an approach animation, a diagram component scaling ratio, a relative relation between components and position information;
d7, finishing the re-rendering of the chart component according to the target chart component parameter of the chart component, acquiring the component related to the chart component, and broadcasting the target chart component parameter of the chart component to the component related to the chart component to finish the re-rendering.
As described in step D5, the chart component associated with the container may be queried from the pre-built list, and the chart component parameters configured in the chart component may be extracted from the database according to the query result. The chart component parameters may include, among other things, chart type, chart size, chart position, approach, chart scale, and so forth.
As described in step D6, when a change is detected in the container or the related component, the broadcasted canvas scaling is received, and the chart component parameters of the chart component are recalculated according to the canvas scaling and the chart component parameters, such as adjusting the position, size and scaling of the target chart component based on the canvas scaling, and generating new target chart component parameters.
As described in step D7, the step re-renders the chart component according to the target chart component parameter to adjust the position, size, scaling, etc. of the chart component, and obtains other components related to the target chart component parameter, broadcasts the target chart component parameter to the other components, so that the other components re-render according to the target chart component parameter, and repeats the process until each component completes re-rendering.
The attributes of the container and the components are transmitted in a broadcasting mode, and when the parameters of any component are changed, the parameters of other components related to the component are correspondingly adjusted, so that the container and each target component are automatically re-rendered by monitoring the change condition of the view port of the browser, the display proportion and the parameters are adjusted in real time, the display content is guaranteed not to be deformed, and the display effect is improved.
In an embodiment, in the step D6, the step of re-determining the chart component parameter of the chart component according to the canvas scaling and the chart component parameter may specifically include:
d61, adjusting the width and height of the chart component and the chart component scaling according to the canvas scaling;
d62, taking the adjusted width, height and scale of the chart component as the chart component parameters;
at this time, in step D7, the step of completing the re-rendering of the chart component according to the target chart component parameter of the chart component may specifically include:
d71, reducing or enlarging the width and height of the chart component according to the chart component scaling, and cutting the content exceeding the width and height of the chart component to finish the re-rendering of the chart component.
Due to the fact that the positions and the effects of the chart components on different display devices are different, the chart components need to be subjected to independent scaling adaptation so as to guarantee that the graphic contents of the chart components cannot be deformed.
Specifically, when the method is applied to a map, as described in step D61, the scaling of the chart component may be changed automatically according to the scaling of the canvas, that is, the width, height, and scaling of the chart component may be adjusted correspondingly according to the scaling of the canvas, so as to automatically adjust the chart component parameters of the chart component after the size of the canvas is changed.
As described above in step D62, after adjusting the width, height, and chart component scale of the chart component, this step may use the adjusted width, height, and chart component scale of the chart component directly as the chart component parameters.
As described in step D71, this step cuts the graphical content beyond the width and height, but the graphical content does not distort, so that the size of the display does not depend on the scale of the chart assembly, but instead adapts by changing the height to highlight key areas in the map.
In another embodiment, in the step D6, the step of re-determining the chart component parameter of the chart component according to the canvas scaling and the chart component parameter may specifically include:
c61, adjusting the width, height and width scaling of the chart component according to the canvas scaling;
c62, taking the width, height and width scaling of the chart component after adjustment as the chart component parameters;
at this time, in step D7, the step of completing the re-rendering of the chart component according to the target chart component parameter of the chart component may specifically include:
c71, reducing or enlarging the width of the chart component according to the width scaling, and keeping the height of the chart component unchanged, thereby finishing the re-rendering of the chart component.
As described in step C61 above, the width scaling of the chart component may be automatically changed to follow the canvas scaling of the canvas, i.e., the width, height and width scaling of the chart component may be correspondingly adjusted according to the canvas scaling, but the height scaling of the chart component is kept unchanged, so as to automatically adjust the chart component parameters of the chart component after the canvas size is changed.
As described above in step C62, after adjusting the width, height, and width scaling of the chart assembly, this step may use the adjusted width, height, and width scaling of the chart assembly directly as chart assembly parameters.
As described in step C71, this step reduces or enlarges the width of the chart component according to the width scaling, and keeps the height of the chart component unchanged, and re-renders the chart component, thereby adapting the change of the view port of the browser by only changing the width to avoid that the content of the chart component in the longitudinal direction can not be fully displayed.
In other embodiments, the rendering mode may further include the following:
the scaling of the chart component can be made to follow the scaling of the container, the width and the height of the items of the chart component are not changed, the longitudinal scaling is not changed, but the transverse scaling is automatically changed, the content is ensured not to be deformed, and therefore the content is kept not to be deformed by keeping the longitudinal scaling unchanged and adjusting the transverse scaling;
the scaling of the chart component can be made to follow the scaling of the container, the width and the height of the items of the chart component are not changed, the transverse scaling is not changed, but the longitudinal scaling is automatically changed, the content is ensured not to be deformed, and therefore the content can be kept not to be deformed by keeping the transverse scaling unchanged and adjusting the longitudinal scaling;
the scaling of the chart assembly can be made to follow the container scaling of the container, with the width relatively fixed and the height automatically scaled. When the horizontal scaling ratio or the vertical scaling ratio of the canvas is more than 1, automatically changing the width and the horizontal scaling ratio; when the horizontal scaling ratio of the canvas or the vertical scaling ratio of the canvas is less than 1, the vertical scaling ratio is automatically changed, and the content is ensured not to deform;
the scaling of the chart assembly can be made to follow the container scaling of the container, with the height relatively fixed and the width automatically scaled. When the horizontal scaling ratio or the vertical scaling ratio of the canvas is larger than 1, automatically changing the horizontal scaling ratio; when the horizontal scaling ratio of the canvas or the vertical scaling ratio of the canvas is less than 1, the height and the vertical scaling ratio are automatically changed, and the content is ensured not to be deformed.
In an embodiment, in step S5, the step of importing the large-screen data into the re-rendered container and each target component to generate a visual graph, and displaying the visual graph on an interface may specifically include:
s51, carrying out planarization processing on the large-screen data;
s52, importing the flattened large-screen data into the re-rendered container and each target assembly to obtain a visual graph;
and S53, displaying the visual graph on the interface according to a preset style.
In this embodiment, the definition of the large-screen data of various visual graphic data is different, the format is different, the name and the usage of the visual graphic data need to be unified and standardized during use, and the standardization of the parameters can be realized by unifying the visual graphic data definition parameters, so that the subsequent unified packaging processing is facilitated.
Therefore, as described in step S51, the present step can perform planarization processing on multiple large-screen data formats such as arrays and matrices required by various visual images, and form a uniform data format or large-screen data with the same dimension.
As described in step S52, the flattened visualization data is imported into the rendered container and each target component to obtain a visualization graph, for example, colors of the visualization graph can be dynamically displayed, and after all parameters are defined, styles of all visualization graphs can be uniformly controlled.
As described in step S53, in this step, the visual graphics are displayed on the interface according to a predetermined style, for example, the visual graphics are displayed on the interface in a style of uniform color, character, and the like, which improves user experience.
In an embodiment, in step S4, before the step of broadcasting the canvas scaling to each target component, the method may further include:
judging whether the canvas scaling is a preset target scaling or not;
if not, the step of broadcasting the canvas scaling to each target component is executed;
and if so, re-rendering each target component according to the canvas scaling.
In this embodiment, after the canvas scaling is obtained by calculation, it is further determined whether the canvas scaling is a target scaling, where the target scaling is generally 16: and 9, of course, the user can also customize the system according to the actual situation.
When the canvas scaling is the preset target scaling, it indicates that after the container and each target component are directly reduced according to the target scaling, the content of the generated visual graph is not deformed, so that the container and each target component can be directly rendered according to the target scaling, for example, under a 2k display, the content is completely displayed, and under a 1080p display, the content needs to be multiplied by a compression coefficient: the horizontal scaleX is 0.5, and the vertical caleY is 0.5, that is, the canvas content is reduced by 0.5 times.
When the canvas scaling is not the preset target scaling, the container and each target component cannot be directly rendered according to the canvas scaling, the canvas scaling needs to be broadcasted to each target component, so that the component parameters of each target component are adjusted according to the canvas scaling, the properties of the container and the component are transmitted in a broadcasting mode, the change condition of a view port of a browser is automatically adapted, the display scales and the parameters of the container and each target component are automatically adjusted, and the displayed content is ensured not to be deformed.
In an embodiment, in step S4, after the step of broadcasting the canvas scaling to each target component, the method may further include:
monitoring the broadcast message of each target component; wherein the broadcast message carries target component parameters of the target component;
when a broadcast message of at least one target component is monitored, extracting target component parameters of the target component from the broadcast message;
re-rendering the container according to the target component parameters of the target component.
In this embodiment, when a graph component with a relationship set is monitored, each time a broadcast message of at least one related component is monitored, the current container is re-rendered to ensure that the relative relationship between the two components remains unchanged, so that the attributes of the two components are transmitted in a broadcast manner to perform automatic re-rendering.
Wherein the relative relationship between the two components may include: the current graph component is located above, below, to the left, or to the right of the target component, and may also be such that the current graph component left boundary is aligned with the target component left boundary, right boundary, upper boundary, or lower boundary.
Referring to fig. 2, an embodiment of the present application further provides a large-screen data visualization display device, including:
the monitoring module 1 is used for acquiring change data of a browser viewport when monitoring that the browser viewport changes, and reading container parameters preset by a container of the browser; wherein the container parameters include canvas size, zoom mode;
the calculation module 2 is used for calculating the scaling of the canvas according to the change data of the browser viewport and the container parameters to obtain the canvas scaling;
a re-rendering module 3, configured to re-render the browser container according to the canvas scaling;
the broadcasting module 4 is used for acquiring components related to the container to obtain target components, broadcasting the canvas to each target component in a scaling manner, and finishing re-rendering of each target component;
and the display module 5 is used for acquiring large-screen data, importing the large-screen data into the re-rendered container and each target assembly, generating a visual graph, and displaying the visual graph on an interface.
The browser is a main tool for realizing operations such as web browsing and the like on a computer, a mobile phone and an intelligent television. With the upgrading of hardware equipment, browsers are increasingly working on high-definition large-area displays, and the development trend of large screens is realized. The browser view port is a display area used for displaying webpage content, and can be reduced to be displayed on the browser by setting the browser view port no matter how large the original resolution size of the webpage is, so that the webpage looks more like a desktop browser on a mobile phone. The basic unit of the browser interface is a UI element, a container is a component for accommodating a plurality of sub-elements, and the container can be added with other components to form a composite component, for example, a button can be added in a panel, which is also a component.
In addition, the terminal can monitor the change condition of the browser view port in real time, acquire the change data of the browser view port and acquire the container parameters preset by the container from the database. Wherein the changing condition may include zooming in, zooming out of the viewport, or changing the resolution of the terminal, etc. The variation data may include a zoom-in scale, a zoom-out scale, a terminal resolution, etc. of the viewport. The container parameters include the number of elements, height, width, and position information, among others.
Each project is first sized, such as 1920 x 1080px, before being developed to determine the content of the response that is to be presented according to the browser layout in the limited canvas. And calculating the scaling of response according to the container size and the browser size, thereby ensuring that the browser can completely display the canvas content under different canvas sizes. Such as: if one wishes to show canvas content 3840 x 2160px, under the 2k display, the content will be shown in its entirety; at a 1080p display, then the multiplication by the compression factor is required: the horizontal compression coefficient scaleX is 0.5, the longitudinal compression coefficient caleY is 0.5, namely the canvas content is reduced by 0.5 times; under a 4k display, the horizontal compression factor scaleX is 2, the vertical compression factor scaleY is 2, and the canvas content is enlarged by two times; the above is limited to when the canvas size and the display size are both 16: in case 9, the scaling of the canvas does not result in a distortion of the content. When the canvas size in the project is not matched with the size of the actual demonstration display seriously, the display effect of the current scheme seriously influences the experience. For example, developing under a canvas of 1080p, where projected onto a very large screen such as the police, the display resolution may be 12000 x 6000, the canvas content will necessarily be severely distorted.
Therefore, in this embodiment, after it is monitored that the browser viewport is changed, for example, when the browser viewport is enlarged, reduced or switched to a display device with different resolutions, the container is initialized to obtain the pre-configured container parameter, the size of the canvas is determined, and the scaling of the canvas is calculated as the scaling of the canvas according to the change data of the browser viewport and the container parameter, so as to re-determine the scaling of the canvas, thereby avoiding the deformation of the content displayed on the display device with different resolutions. For example, when the resolution of the display device is changed from 16: when the ratio 9 becomes 2:1, the height of the viewport of the browser is increased, and the height of the container, the position of the element or the number of the elements need to be adjusted, so as to avoid that the content displayed on the display device with the resolution is longitudinally elongated, which affects the viewing experience.
When rendering the container, the container may be re-rendered at the canvas scaling, such as re-laying out the height of the container, the location or number of internal elements at the canvas scaling.
And after the container is re-rendered, further acquiring the components directly or indirectly related to the container to obtain the target components. For example, when the canvas scaling of the canvas is changed, the display scale of the target component directly or indirectly related to the container also needs to be adjusted, so that the canvas scaling needs to be broadcast to each target component, so that each target component adjusts the scaling and other parameters according to the canvas scaling, and re-renders the target component.
When the container and each target component are re-rendered, large-screen data of visual graphic data are obtained, the visual graphic data are led into the rendered container and each target component to generate visual graphics, the generated visual graphics are displayed on an interface of display equipment, the visual graphics are graphics adapting to the change of a viewport of a browser, so that the change condition of the viewport of the browser is automatically adapted, the display proportion and parameters of the container and each target component are automatically adjusted, the displayed content is ensured not to deform, and the technical problem that the traditional response type displayed content is compressed and deformed is solved. The large-screen data is visual graphic data corresponding to the condition that the screen size is larger than a preset value or the resolution of the display equipment is larger than a preset resolution.
As described above, it can be understood that each component of the large-screen data visualization display apparatus provided in the present application may implement the function of any one of the large-screen data visualization display methods described above, and the specific structure is not described in detail.
Referring to fig. 3, a computer device, which may be a server and whose internal structure may be as shown in fig. 3, is also provided in the embodiment of the present application. The computer device includes a processor, a memory, a network interface, and a database connected by a system bus. Wherein the computer designed processor is used to provide computational 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, a computer program, and a database. The memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the computer device is used for communicating with an external terminal through a network connection. The computer program is executed by a processor to implement a large-screen data visualization display method.
The processor executes the large-screen data visualization display method, which comprises the following steps:
when monitoring that a browser viewport changes, acquiring change data of the browser viewport, and reading container parameters preset by a container of the browser; wherein the container parameters include canvas size, zoom mode;
calculating the scaling of the canvas according to the change data of the browser viewport and the container parameters to obtain the scaling of the canvas;
re-rendering the browser container according to the canvas scaling;
acquiring components related to the container to obtain target components, broadcasting the canvas to each target component in a scaling manner, and finishing re-rendering of each target component;
and acquiring large-screen data, importing the large-screen data into the container and each target assembly which are re-rendered, generating a visual graph, and displaying the visual graph on an interface.
An embodiment of the present application further provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the method for implementing a large-screen data visual display method includes the steps of:
when monitoring that a browser viewport changes, acquiring change data of the browser viewport, and reading container parameters preset by a container of the browser; wherein the container parameters include canvas size, zoom mode;
calculating the scaling of the canvas according to the change data of the browser viewport and the container parameters to obtain the scaling of the canvas;
re-rendering the browser container according to the canvas scaling;
acquiring components related to the container to obtain target components, broadcasting the canvas to each target component in a scaling manner, and finishing re-rendering of each target component;
and acquiring large-screen data, importing the large-screen data into the container and each target assembly which are re-rendered, generating a visual graph, and displaying the visual graph on an interface.
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 provided herein and used in the examples may include non-volatile and/or volatile memory. Non-volatile memory can include read-only memory (ROM), Programmable ROM (PROM), Electrically Programmable ROM (EPROM), Electrically Erasable Programmable ROM (EEPROM), or flash memory. Volatile memory can include Random Access Memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in a variety of forms such as Static RAM (SRAM), Dynamic RAM (DRAM), Synchronous DRAM (SDRAM), double-rate SDRAM (SSRSDRAM), Enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), Rambus Direct RAM (RDRAM), direct bus dynamic RAM (DRDRAM), and bus dynamic RAM (RDRAM).
To sum up, the most beneficial effect of this application lies in:
according to the large-screen data visual display method, when the change of the view port of the browser is monitored, the change data of the view port of the browser is obtained, and container parameters preset by a container of the browser are read; calculating the scaling of the canvas according to the change data of the viewport of the browser and the container parameters to obtain the scaling of the canvas; re-rendering the browser container according to the canvas scaling; acquiring components related to the container to obtain target components, broadcasting the canvas to each target component in a scaling manner, and finishing re-rendering of each target component; acquiring large-screen data, importing the large-screen data into the re-rendered container and each target assembly to generate a visual graph, and displaying the visual graph on an interface, so that the container and each target assembly are automatically re-rendered according to the change condition of a viewport of the browser, such as the change of terminal resolution, so as to adjust display proportion and parameters, ensure that display content is not deformed, and improve display effect; in addition, for a UI designer, the UI designer can adapt to various displays by only using the size of the universal canvas and outputting a set of design scheme, and the displayed content is ensured not to deform; for developers, only visual restoration is needed according to the design scheme of a UI designer, and development efficiency is improved. In practical application, a developer does not need to care about what display a program is displayed on, and only needs to configure relevant parameters during development, so that the program can be normally displayed on various resolutions, and the problem of browser viewport adaptation is solved.
It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, apparatus, article, or method that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, apparatus, article, or method. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, apparatus, article, or method that includes the element.
The above description is only a preferred embodiment of the present application, and not intended to limit the scope of the present application, and all modifications of equivalent structures and equivalent processes, which are made by the contents of the specification and the drawings of the present application, or which are directly or indirectly applied to other related technical fields, are also included in the scope of the present application.

Claims (10)

1. A large-screen data visual display method is characterized by comprising the following steps:
when monitoring that a browser viewport changes, acquiring change data of the browser viewport, and reading container parameters preset by a container of the browser; wherein the container parameters include canvas size, zoom mode;
calculating the scaling of the canvas according to the change data of the browser viewport and the container parameters to obtain the scaling of the canvas;
re-rendering the browser container according to the canvas scaling;
acquiring components related to the container to obtain target components, broadcasting the canvas to each target component in a scaling manner, and finishing re-rendering of each target component;
and acquiring large-screen data, importing the large-screen data into the container and each target assembly which are re-rendered, generating a visual graph, and displaying the visual graph on an interface.
2. The method of claim 1, wherein the target components comprise graph components, and wherein the steps of obtaining components associated with the container, obtaining target components, and broadcasting the canvas scale to each target component further comprise:
acquiring chart component parameters preset by the chart component;
re-determining the chart component parameters of the chart component according to the canvas scaling and the chart component parameters to obtain target chart component parameters; the target diagram component parameters comprise an approach animation, a diagram component scaling ratio, a relative relation between components and position information;
and finishing the re-rendering of the chart component according to the target chart component parameter of the chart component, acquiring the component related to the chart component, and broadcasting the target chart component parameter of the chart component to the component related to the chart component to finish the re-rendering.
3. The method of claim 2, wherein the step of re-determining chart component parameters for the chart component based on the canvas scaling and the chart component parameters comprises:
adjusting the width and height of the chart component and the chart component scaling according to the canvas scaling;
taking the adjusted width, height and scale of the chart component as the parameters of the chart component;
the step of completing the re-rendering of the chart assembly according to the target chart assembly parameters of the chart assembly comprises the following steps:
and reducing or enlarging the width and the height of the chart component according to the chart component scaling, and cutting the content exceeding the width and the height of the chart component to finish the re-rendering of the chart component.
4. The method of claim 2, wherein the step of re-determining chart component parameters for the chart component based on the canvas scaling and the chart component parameters comprises:
adjusting the width, height and width scaling of the chart component according to the canvas scaling;
taking the adjusted width, height and width scaling of the chart component as the chart component parameters;
the step of completing the re-rendering of the chart assembly according to the target chart assembly parameters of the chart assembly comprises the following steps:
and reducing or enlarging the width of the chart component according to the width scaling, and keeping the height of the chart component unchanged, thereby finishing the re-rendering of the chart component.
5. The method of claim 1, wherein the step of broadcasting the canvas scaling to the respective target components is followed by:
monitoring the broadcast message of each target component; wherein the broadcast message carries target component parameters of the target component;
when a broadcast message of at least one target component is monitored, extracting target component parameters of the target component from the broadcast message;
re-rendering the container according to the target component parameters of the target component.
6. The method of claim 1, wherein the step of broadcasting the canvas scaling to the respective target components is preceded by:
judging whether the canvas scaling is a preset target scaling or not;
if not, the step of broadcasting the canvas scaling to each target component is executed;
and if so, re-rendering each target component according to the canvas scaling.
7. The method according to claim 1, wherein the step of importing the large screen data into the re-rendered container and each target component to generate a visual graph, and displaying the visual graph on an interface comprises:
carrying out planarization treatment on the large-screen data;
importing the large-screen data subjected to planarization treatment into the container and each target assembly subjected to re-rendering to obtain a visual graph;
and displaying the visual graph on an interface according to a preset style.
8. A large screen data visualization display device, comprising:
the monitoring module is used for acquiring change data of a browser viewport when monitoring that the browser viewport changes and reading container parameters preset by a container of the browser; wherein the container parameters include canvas size, zoom mode;
the computing module is used for computing the zoom ratio of the canvas according to the change data of the browser viewport and the container parameters to obtain the zoom ratio of the canvas;
a re-rendering module to re-render the browser container according to the canvas scaling;
the broadcasting module is used for acquiring components related to the container to obtain target components, broadcasting the canvas to each target component in a scaling manner and finishing the re-rendering of each target component;
and the display module is used for acquiring large-screen data, importing the large-screen data into the re-rendered container and each target assembly, generating a visual graph, and displaying the visual graph on an interface.
9. A computer device comprising a memory and a processor, wherein the memory stores a computer program, and wherein the processor implements the steps of the large screen data visualization display method according to any one of claims 1 to 7 when executing the computer program.
10. A computer-readable storage medium, on which a computer program is stored, wherein the computer program, when being executed by a processor, implements the steps of the large-screen data visualization display method according to any one of claims 1 to 7.
CN202110476925.3A 2021-04-29 2021-04-29 Large-screen data visual display method and device, storage medium and computer equipment Pending CN113127784A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110476925.3A CN113127784A (en) 2021-04-29 2021-04-29 Large-screen data visual display method and device, storage medium and computer equipment

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110476925.3A CN113127784A (en) 2021-04-29 2021-04-29 Large-screen data visual display method and device, storage medium and computer equipment

Publications (1)

Publication Number Publication Date
CN113127784A true CN113127784A (en) 2021-07-16

Family

ID=76780637

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110476925.3A Pending CN113127784A (en) 2021-04-29 2021-04-29 Large-screen data visual display method and device, storage medium and computer equipment

Country Status (1)

Country Link
CN (1) CN113127784A (en)

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113253965A (en) * 2021-06-25 2021-08-13 中国空气动力研究与发展中心计算空气动力研究所 Mass data multi-view-port visual interaction method, system, equipment and storage medium
CN113434590A (en) * 2021-07-21 2021-09-24 中国工商银行股份有限公司 Lightweight data visualization method and device
CN114138222A (en) * 2021-12-10 2022-03-04 中国人寿保险股份有限公司上海数据中心 Automatic construction method and system for data visualization large screen
CN114281445A (en) * 2021-11-26 2022-04-05 华能酒泉风电有限责任公司 Page display method and device, electronic equipment and storage medium
CN114489397A (en) * 2021-12-29 2022-05-13 深圳市创易联合科技有限公司 Electronic canvas processing method, equipment and storage medium
CN114706508A (en) * 2022-04-28 2022-07-05 山东亿云信息技术有限公司 Canvas amplification and reduction offset control method and canvas redrawing method for WEB side
CN116501435A (en) * 2023-06-28 2023-07-28 北京尽微致广信息技术有限公司 Layout processing method and device and computer storage medium

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20160042021A1 (en) * 2014-08-08 2016-02-11 Halogen Software Inc. System and method for rendering of hierarchical data structures
CN105893602A (en) * 2016-04-21 2016-08-24 北京京东尚科信息技术有限公司 Full screen displaying method and full screen displaying system for diagram in webpage applied to terminal browser
CN107480192A (en) * 2017-07-12 2017-12-15 长城计算机软件与系统有限公司 A kind of method and system of browser interface adjust automatically
CN109408165A (en) * 2018-09-19 2019-03-01 浙江省测绘科学技术研究院 The multiple terminal self-adapting method and system of data visualisation system
CN111338628A (en) * 2020-03-10 2020-06-26 中国联合网络通信集团有限公司 Component rendering method and device

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20160042021A1 (en) * 2014-08-08 2016-02-11 Halogen Software Inc. System and method for rendering of hierarchical data structures
CN105893602A (en) * 2016-04-21 2016-08-24 北京京东尚科信息技术有限公司 Full screen displaying method and full screen displaying system for diagram in webpage applied to terminal browser
CN107480192A (en) * 2017-07-12 2017-12-15 长城计算机软件与系统有限公司 A kind of method and system of browser interface adjust automatically
CN109408165A (en) * 2018-09-19 2019-03-01 浙江省测绘科学技术研究院 The multiple terminal self-adapting method and system of data visualisation system
CN111338628A (en) * 2020-03-10 2020-06-26 中国联合网络通信集团有限公司 Component rendering method and device

Cited By (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113253965A (en) * 2021-06-25 2021-08-13 中国空气动力研究与发展中心计算空气动力研究所 Mass data multi-view-port visual interaction method, system, equipment and storage medium
CN113253965B (en) * 2021-06-25 2021-10-29 中国空气动力研究与发展中心计算空气动力研究所 Mass data multi-view-port visual interaction method, system, equipment and storage medium
CN113434590A (en) * 2021-07-21 2021-09-24 中国工商银行股份有限公司 Lightweight data visualization method and device
CN114281445A (en) * 2021-11-26 2022-04-05 华能酒泉风电有限责任公司 Page display method and device, electronic equipment and storage medium
CN114281445B (en) * 2021-11-26 2024-06-21 华能酒泉风电有限责任公司 Page display method, page display device, electronic equipment and storage medium
CN114138222A (en) * 2021-12-10 2022-03-04 中国人寿保险股份有限公司上海数据中心 Automatic construction method and system for data visualization large screen
CN114138222B (en) * 2021-12-10 2023-11-14 中国人寿保险股份有限公司上海数据中心 Automatic construction method and system for large data visualization screen
CN114489397A (en) * 2021-12-29 2022-05-13 深圳市创易联合科技有限公司 Electronic canvas processing method, equipment and storage medium
CN114706508A (en) * 2022-04-28 2022-07-05 山东亿云信息技术有限公司 Canvas amplification and reduction offset control method and canvas redrawing method for WEB side
CN116501435A (en) * 2023-06-28 2023-07-28 北京尽微致广信息技术有限公司 Layout processing method and device and computer storage medium
CN116501435B (en) * 2023-06-28 2023-09-12 北京尽微致广信息技术有限公司 Layout processing method and device and computer storage medium

Similar Documents

Publication Publication Date Title
CN113127784A (en) Large-screen data visual display method and device, storage medium and computer equipment
US10339209B2 (en) Webpage display method and device
CN110837617A (en) Webpage self-adaptive layout method, server and computer readable storage medium
US11551392B2 (en) Graphic drawing method and apparatus, device, and storage medium
CN103631958B (en) A kind of page automatic adaptation realizes the method that content multi-screen is shown
CN108920048B (en) Large drawing browsing method, system, server and computer readable storage medium
CN107256259B (en) Page display method and device, electronic equipment and storage medium
CN111667487A (en) Picture clipping method and device and computer equipment
CN113687753A (en) Split screen style configuration method and device, intelligent terminal and storage medium
CN113486280A (en) Page rendering display method, device, equipment, storage medium and program product
CN107861711B (en) Page adaptation method and device
CN112114919B (en) Screen rotation display optimization method and device
CN105389308B (en) Webpage display processing method and device
CN114281445B (en) Page display method, page display device, electronic equipment and storage medium
CN116663496A (en) SVG technology-based browser small font display component, display method and creation method
CN112799745B (en) Page display control method and device
CN117009686A (en) Page content processing method and device and electronic equipment
CN106155455B (en) Method and device for controlling objects in interface
CN112261227A (en) Method for multi-screen equal-proportion adaptation of mobile terminal
CN112328940A (en) Method and device for embedding transition page into webpage, computer equipment and storage medium
CN113934339A (en) Method and device for page self-adaptive layout based on rem
CN113032696A (en) Display method and display device of page picture
CN114416209B (en) Page loading method, device and readable storage medium
CN112965650B (en) Thermodynamic diagram visualization method, thermodynamic diagram visualization system and thermodynamic diagram visualization computer equipment
CN113625979A (en) Picture self-adaptive display method, device, system and medium

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