CN113127784B - 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 PDFInfo
- Publication number
- CN113127784B CN113127784B CN202110476925.3A CN202110476925A CN113127784B CN 113127784 B CN113127784 B CN 113127784B CN 202110476925 A CN202110476925 A CN 202110476925A CN 113127784 B CN113127784 B CN 113127784B
- Authority
- CN
- China
- Prior art keywords
- component
- target
- scaling
- container
- canvas
- 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.)
- Active
Links
- 230000000007 visual effect Effects 0.000 title claims abstract description 74
- 238000000034 method Methods 0.000 title claims abstract description 47
- 230000008859 change Effects 0.000 claims abstract description 66
- 238000009877 rendering Methods 0.000 claims abstract description 60
- 238000013079 data visualisation Methods 0.000 claims abstract description 17
- 238000010586 diagram Methods 0.000 claims description 20
- 238000004590 computer program Methods 0.000 claims description 12
- 238000012544 monitoring process Methods 0.000 claims description 8
- 238000004364 calculation method Methods 0.000 claims description 2
- 230000000694 effects Effects 0.000 abstract description 10
- 230000006835 compression Effects 0.000 description 11
- 238000007906 compression Methods 0.000 description 11
- 238000011161 development Methods 0.000 description 10
- 230000009467 reduction Effects 0.000 description 7
- 238000013461 design Methods 0.000 description 6
- 230000008569 process Effects 0.000 description 6
- 230000004044 response Effects 0.000 description 4
- 230000006978 adaptation Effects 0.000 description 2
- 239000002131 composite material Substances 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000001419 dependent effect Effects 0.000 description 1
- 230000009977 dual effect Effects 0.000 description 1
- 230000007613 environmental effect Effects 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 238000012858 packaging process Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
- XLYOFNOQVPJJNP-UHFFFAOYSA-N water Substances O XLYOFNOQVPJJNP-UHFFFAOYSA-N 0.000 description 1
Abstract
The application relates to the technical field of data visualization, and discloses a large-screen data visualization display method, a device, a storage medium and computer equipment, wherein the method comprises the following steps: when the change of the browser viewport is monitored, obtaining the 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 canvas scaling to each target component, and completing re-rendering of each target component; and acquiring large screen data, importing the large screen data into the re-rendered container and each target component, generating a visual graph, and displaying the visual graph on an interface. According to the application, the container and each target component are automatically re-rendered according to the change condition of the view port of the browser, so that the display proportion and parameters are adjusted, the display content is ensured not to be deformed, and the display effect is improved.
Description
Technical Field
The present application relates to the field of data visualization technology, and in particular, to a method and apparatus for displaying large-screen data in a visual manner, a storage medium, and a computer device.
Background
Large screen data visualization is a relatively wide field of end applications. Data visualization is mainly aimed at clearly and effectively conveying and communicating information by means of a graphical means. Whether in retail, logistics, electric power, water conservancy, environmental protection, or traffic fields, the interactive real-time data visualization screen wall is used for helping users find and diagnose problems, and the interactive real-time data visualization screen wall becomes an indispensable part of big data solutions.
Unlike HTML5 responsive development that is currently popular, HTML5 responsive development is an adaptation where the device viewport allows scrolling, allowing components to be presented in different forms and positions when landscape or portrait content cannot be accommodated, or scroll bars to accommodate the complete content.
The largest difference in large screen data visualization is that the integrity of the content needs to be ensured, the form and position of the components are not allowed to change, the overflow of the content is not allowed, and all data is required to be displayed under a single screen.
However, for the display on a large screen, the support of a visualization technology is needed, and for a single screen, as much content as possible needs to be accommodated, but the whole layout of the page is not affected, and the problem of adapting the view port of the browser is always encountered, so that the display 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 storage medium and computer equipment, so as to automatically adapt to a browser view port of a terminal, ensure that display contents are not deformed and improve display effects.
In order to achieve the above object, the present application provides a method for displaying large-screen data in a visual manner, comprising:
When the change of the browser view port is monitored, obtaining the change data of the browser view port, and reading preset container parameters of 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, obtaining target components, broadcasting the canvas scaling to each target component, and completing re-rendering of each target component;
and acquiring large screen data, importing the large screen data into the re-rendered container and each target component, generating a visual graph, and displaying the visual graph on an interface.
Further, the target component includes a chart component, the step of obtaining components related to the container, obtaining target components, and broadcasting the canvas scaling to each target component further includes:
Acquiring chart component parameters preset by the chart component;
Determining the chart component parameters of the chart component again according to the canvas scaling and the chart component parameters to obtain target chart component parameters; the target chart component parameters comprise a field animation, a chart component scaling ratio, a relative relation among components and position information;
And completing re-rendering of the chart component according to the target chart component parameters of the chart component, acquiring components related to the chart component, and broadcasting the target chart component parameters of the chart component to the components related to the chart component to complete re-rendering.
Preferably, the step of redefining the diagram component parameters of the diagram component according to the canvas scaling and diagram component parameters comprises:
Adjusting the width and height of the chart component and the chart component scaling according to the canvas scaling;
Taking the width, the height and the scale of the graph component as the parameters of the graph component;
the step of completing the re-rendering of the graph component according to the target graph component parameters of the graph component comprises the following steps:
And reducing or enlarging the width and the height of the chart component according to the scaling of the chart component, and cutting out 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 redefining the diagram component parameters of the diagram component according to the canvas scaling and diagram component parameters comprises:
adjusting the width, height and width scaling of the chart component according to the canvas scaling;
Taking the width, height and width scaling of the graph component after adjustment as the graph component parameters;
the step of completing the re-rendering of the graph component according to the target graph component parameters of the graph component comprises the following steps:
And reducing or amplifying the width of the chart component according to the width scaling ratio, and keeping the height of the chart component unchanged to finish re-rendering of the chart component.
Further, after the step of broadcasting the canvas scaling to the respective target components, the method further comprises:
monitoring broadcast messages of all target components; wherein the broadcast message carries target component parameters of the target component;
Extracting target component parameters of the target components from the broadcast messages when the broadcast messages of at least one target component are monitored;
and 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;
If not, the step of broadcasting the canvas scaling to each target component is executed;
and if yes, 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 graphic, and displaying the visual graphic on an interface includes:
Carrying out planarization treatment on the large screen data;
importing the large screen data subjected to planarization treatment into the re-rendered container and each target component to obtain a visual graph;
and displaying the visualized graph on an interface according to a preset style.
The application also provides a large-screen data visual display device, which comprises:
the monitoring module is used for acquiring the change data of the browser viewport and reading container parameters preset in a container of the browser when the change of the browser viewport is monitored; wherein the container parameters include canvas size, zoom mode;
the calculation module 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 scaling of the canvas;
The re-rendering module is used for re-rendering the browser container according to the canvas scaling;
the broadcasting module is used for acquiring the components related to the container, obtaining target components, broadcasting the canvas scaling to each target component and finishing re-rendering of each target component;
The display module is used for acquiring large screen data, importing the large screen data into the re-rendered container and each target component, generating a visual graph, and displaying the visual graph on an interface.
The application also provides a computer device comprising a memory storing a computer program and a processor implementing the steps of any of the methods described above when the processor executes the computer program.
The application also provides a computer readable storage medium having stored thereon a computer program which when executed by a processor performs the steps of the method of any of the preceding claims.
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 preset container parameters of the container of the browser are read; 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, obtaining target components, broadcasting canvas scaling to each target component, and completing re-rendering of each target component; the method comprises the steps of obtaining large screen data, importing the large screen data into a re-rendered container and each target assembly, generating 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 visual port of a browser, such as the change of terminal resolution, and the display proportion and parameters are adjusted, the display content is ensured not to be deformed, and the display effect is improved; in addition, for a UI designer, the UI designer can adapt to various displays only by using the size of a universal canvas and outputting a set of design scheme, and the display content is ensured not to be deformed; and for a developer, the development efficiency is improved only by performing visual reduction according to the design scheme of the UI designer. In practical application, a developer does not need to care about what display the program is displayed on, and only needs to configure relevant parameters during development, so that the normal display of one program on multiple resolutions can be realized, and the difficulty of adapting the view port of the browser is solved.
Drawings
FIG. 1 is a flow chart of a method for visualizing large screen data 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 schematic block diagram of a computer device according to an embodiment of the present application.
The achievement of the objects, functional features and advantages of the present application will be further described with reference to the accompanying drawings, in conjunction with the embodiments.
Detailed Description
The present application will be described in further detail with reference to the drawings and examples, in order to make the objects, technical solutions and advantages of the present application more apparent. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the application.
The application provides a large-screen data visual display method, which is used for solving the problems of display content deformation and poor display effect when a browser viewport is matched, and in one embodiment, as shown in fig. 1, the large-screen data visual display method comprises the following steps:
S1, when the change of a browser viewport is monitored, acquiring change data of the browser viewport, and reading preset container parameters of a container of the browser; wherein the container parameters include canvas size, zoom mode;
S2, 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;
s3, re-rendering the browser container according to the canvas scaling;
s4, acquiring components related to the container, obtaining target components, broadcasting the canvas scaling to each target component, and completing re-rendering of each target component;
s5, acquiring large screen data, importing the large screen data into the re-rendered container and each target component, 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 television. With the update of hardware devices, the browser is increasingly operated on a high-definition large-area display, so that the development trend of a large screen is realized. The browser viewport is a display area for displaying web page content, and the browser viewport can be set, so that the original resolution size of the web page can be reduced and displayed on the browser no matter how large, and the web page can be seen more like a desktop browser on a mobile phone. The basic component unit of the browser interface is a UI element, the container is a component for accommodating a plurality of sub-elements, and other components can be added to the container to form a composite component, for example, a button can be added in a panel, which is also a component.
The terminal in the step monitors the change condition of the browser viewport in real time, acquires the change data of the browser viewport, and acquires the preset container parameters of the container from the database. The changing condition may include enlargement, reduction of the view port, or change of the resolution of the terminal, among others. The change data may include enlargement scale, reduction scale, terminal resolution, etc. of the viewport. The container parameters include the number of elements, height, width, location information, and the like.
As described above in step S2, each project is developed by determining the canvas size, e.g., 1920 x 1080px, to determine that in a limited canvas, the content of the response is presented according to the browser layout. And calculating the scaling of the response according to the size of the container and the size of the browser, so that the browser can completely display canvas contents under different canvas sizes. Such as: if it is desired to present 3840 x 2160px canvas content, the content will be presented in its entirety under a 2k display; at 1080p display, then the compression factor would need to be multiplied: the transverse compression coefficient scalex=0.5, and the longitudinal compression coefficient caleY =0.5, i.e. the canvas content is reduced by 0.5 times; under a 4k display, then the landscape compression factor scalex=2, the portrait compression factor scaley=2, and the canvas content is enlarged twice; the above is limited only when the canvas size and display size are both 16:9, the scaling of the canvas does not result in distortion of the content. When the canvas size is seriously unmatched with the actual demonstration display size in the project, the display effect of the current scheme seriously influences the experience. For example, developing under 1080p canvas, display resolution may be 12000 x 6000 on projection onto an oversized screen such as the public security bureau, and canvas content must appear severely distorted.
Therefore, after the change of the view port of the browser is monitored, for example, when the display device with different resolutions is enlarged, reduced or switched, the container is initialized, the preset container parameters are obtained, 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 view port of the browser and the container parameters, so that the scaling of the canvas is determined again, and the display content on the display device with different resolutions is prevented from being deformed. For example, when the resolution of the display device is defined by 16:9 to 2:1, the height of the view port of the browser is increased, and the height of the container, the position or the number of elements are required to be adjusted to avoid that the display content on the display device with the resolution is longitudinally stretched, and the watching experience is influenced.
As described above in step S3, this step re-renders the container according to the canvas scale, such as re-layout the height of the container, the location or number of internal elements according to the canvas scale.
After the container is re-rendered, the components directly or indirectly related to the container are further acquired, as described in step S4 above, to obtain the target components. Where a component directly or indirectly related to a container refers to a component of the container that, after a change in a container parameter of the container, directly or indirectly affects other component parameters, such as when changing the canvas scaling of a canvas, the display scale of a 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 for re-rendering.
And step S5, after the container and each target component are re-rendered, large screen data of the visual graphic data are obtained, the visual graphic data are imported into the rendered container and each target component to generate visual graphics, the generated visual graphics are displayed on an interface of the display device, and the visual graphics are graphics adapting to the change of the view port of the browser, so that the change condition of the view port of the browser is automatically adapted, the display proportion and parameters of the container and each target component are automatically adjusted, the display content is ensured not to be deformed, and the technical problem that the traditional responsive display content is compressed and deformed is solved. The large-screen data are visual graphic data corresponding to the screen size being larger than a preset value or the resolution of the display equipment being larger than the preset resolution.
According to the large-screen data visualization 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 the preset container parameters of the container of the browser are read; 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, obtaining target components, broadcasting canvas scaling to each target component, and completing re-rendering of each target component; the method comprises the steps of obtaining large screen data, importing the large screen data into a re-rendered container and each target assembly, generating 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 visual port of a browser, such as the change of terminal resolution, and the display proportion and parameters are adjusted, the display content is ensured not to be deformed, and the display effect is improved; in addition, for a UI designer, the UI designer can adapt to various displays only by using the size of a universal canvas and outputting a set of design scheme, and the display content is ensured not to be deformed; and for a developer, the development efficiency is improved only by performing visual reduction according to the design scheme of the UI designer. In practical application, a developer does not need to care about what display the program is displayed on, and only needs to configure relevant parameters during development, so that the normal display of one program on multiple resolutions can be realized, and the difficulty of adapting the view port of the browser is solved.
In one embodiment, the target component includes a chart component, and in step S4, the step of obtaining the component related to the container, obtaining the target component, and broadcasting the canvas scaling to each target component may further include:
d5, acquiring chart component parameters preset by the chart component;
D6, redefining 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 chart component parameters comprise a field animation, a chart component scaling ratio, a relative relation among components and position information;
And D7, completing re-rendering of the chart component according to the target chart component parameters of the chart component, acquiring components related to the chart component, and broadcasting the target chart component parameters of the chart component to the components related to the chart component to complete re-rendering.
The chart component related to 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, as described in step D5 above. The chart component parameters may include, among other things, chart type, chart size, chart position, approach, chart scaling, and so forth.
When a change in the container or related component is detected, 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 D6 above.
As described in step D7, the step re-renders the chart component according to the target chart component parameters to adjust the position, size, scaling, etc. of the chart component, and obtain other components related to the target chart component parameters, and broadcast the target chart component parameters to the other components, so that the other components re-render according to the target chart component parameters, and cycle back and forth until each component completes re-rendering.
The attribute of the container and the components is transmitted in a broadcast mode, and when the parameter of any component is changed, the parameters of other components related to the container and the components 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 ensured not to be deformed, and the display effect is improved.
In one embodiment, in step D6, the step of redefining the diagram component parameters of the diagram component according to the canvas scaling and diagram component parameters may specifically include:
d61, adjusting the width and the 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 parameters of the chart component;
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:
and D71, reducing or enlarging the width and the height of the chart component according to the scaling ratio of the chart component, and cutting out the content exceeding the width and the height of the chart component to finish the re-rendering of the chart component.
Because of the different positions and roles of the chart components on different display devices, separate scaling adaptations are required for the chart components to ensure that the graphical content of the chart components is not distorted.
Specifically, when the method is applied to the map, as described in the above step D61, the scaling of the chart component follows the canvas scaling of the canvas, and the width, the height and the scaling of the chart component are automatically changed, i.e. the width, the height and the scaling of the chart component are correspondingly adjusted according to the canvas scaling, so that after the canvas size is changed, the parameters of the chart component are automatically adjusted.
After adjusting the width, height, and scale of the chart component, as described in step D62 above, this step may take the adjusted width, height, and scale of the chart component directly as parameters of the chart component.
As described in step D71 above, the present step clips the graphic content beyond the width and height, but the graphic content is not deformed, so that the size of the display is not dependent on the scale of the graph component, but is adapted by changing the width and height to highlight the key region in the map.
In another embodiment, in step D6, the step of redefining the diagram component parameters of the diagram component according to the canvas scaling and diagram component parameters may specifically include:
C61, adjusting the width, the height and the width scaling of the chart component according to the canvas scaling;
c62, taking the width, height and width scaling of the graph component after adjustment as the graph 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:
and C71, reducing or amplifying the width of the chart component according to the width scaling ratio, and keeping the height of the chart component unchanged to finish re-rendering of the chart component.
As described in step C61 above, the width scale of the chart component follows the canvas scale of the canvas, and the width, height and width scale of the chart component are automatically changed, i.e. the width, height and width scale of the chart component are correspondingly adjusted according to the canvas scale, but the height scale of the chart component is kept unchanged, so that the parameters of the chart component are automatically adjusted after the canvas size is changed.
After adjusting the width, height, and width scales of the chart component, as described in step C62 above, this step may take the adjusted width, height, and width scales of the chart component directly as chart component parameters.
As described in step C71, the width of the chart component is reduced or enlarged according to the width scaling ratio, and the height of the chart component is kept unchanged, so as to complete re-rendering of the chart component, thereby adapting to the change of the view port of the browser by only changing the width, and avoiding that the content of the chart component in the longitudinal direction cannot be displayed completely.
In other embodiments, the manner of rendering may also include the following:
The scaling of the chart component can follow the container 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, so that the content is ensured not to be deformed, and the content is kept unchanged by keeping the longitudinal scaling unchanged and adjusting the transverse scaling;
The scaling of the chart component can follow the container 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, so that the content is ensured not to be deformed, and the content can be kept unchanged by keeping the transverse scaling unchanged and by adjusting the longitudinal scaling;
The scale of the chart component can be followed by the container scale of the container, the width is relatively fixed, and the height is automatically scaled. When the horizontal scaling of the canvas or the vertical scaling of the canvas is larger than 1, automatically changing the width and the horizontal scaling; when the horizontal scaling of the canvas or the vertical scaling of the canvas is smaller than 1, the vertical scaling is automatically changed, so that the content is ensured not to be deformed;
the scale of the chart assembly may be followed by the container scale of the container, with the height being relatively fixed and the width being automatically scaled. When the horizontal scaling of the canvas or the vertical scaling of the canvas is larger than 1, automatically changing the horizontal scaling; when the horizontal scaling of the canvas or the vertical scaling of the canvas is smaller than 1, the height and the vertical scaling are automatically changed, so that the content is ensured not to be deformed.
In one 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 graphic, and displaying the visual graphic on an interface may specifically include:
s51, carrying out planarization treatment on the large screen data;
S52, importing the large screen data subjected to the planarization treatment into the re-rendered container and each target component to obtain a visual graph;
And S53, displaying the visual graph on an 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, and when in use, the name and the usage of the visual graphic data need to be unified and standardized, and through unifying the definition parameters of the visual graphic data, the standardization of the parameters can be realized, so as to facilitate the subsequent unified packaging process.
Therefore, as described in the above step S51, the planarization process can be uniformly performed on multiple large-screen data formats such as arrays, matrixes, etc. required by various visual images to form large-screen data with uniform data formats or the same dimension.
As described in step S52, the visualized data after the planarization process is imported into the rendered container and each target component to obtain the visualized graphic, for example, the color of the visualized graphic may be dynamically displayed, and after all parameters are defined, the style of all the visualized graphic may 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 uniform style such as a uniform color, a word pattern, etc., so that the user experience is improved.
In an embodiment, before the step of broadcasting the canvas scaling to each target component in step S4, the method may further include:
Judging whether the canvas scaling is a preset target scaling;
If not, the step of broadcasting the canvas scaling to each target component is executed;
and if yes, re-rendering each target component according to the canvas scaling.
In this embodiment, after the canvas scaling is calculated, it is further determined whether the canvas scaling is a target scaling, which is generally 16: and 9, of course, the user can also customize according to the actual situation.
When the canvas scaling is a preset target scaling, it indicates that after the container and each target component are directly scaled down according to the target scaling, the content of the generated visual graph will not be deformed, so that the container and each target component can be directly rendered according to the target scaling, for example, in a 2k display, the content is completely displayed, in a 1080p display, the compression coefficient needs to be multiplied: landscape orientation scalex=0.5 and portrait orientation caleY =0.5, i.e. the canvas content is scaled down by a factor of 0.5.
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, and the canvas scaling needs to be broadcasted to each target component, so that component parameters of each target component are adjusted according to the canvas scaling, the property of the container and the component is transmitted in a broadcasting mode, the change condition of a view port of a browser is automatically adapted, the display proportion and the parameters of the container and each target component are automatically adjusted, and the display content is ensured not to be deformed.
In an embodiment, after the step of broadcasting the canvas scaling to the respective target components in step S4, the method may further include:
monitoring broadcast messages of all target components; wherein the broadcast message carries target component parameters of the target component;
Extracting target component parameters of the target components from the broadcast messages when the broadcast messages of at least one target component are monitored;
and re-rendering the container according to the target component parameters of the target component.
In this embodiment, when the graph component with the relationship is set, the current container is re-rendered each time a broadcast message of at least one related component is monitored, so as to ensure that the relative relationship between the two components remains unchanged, and therefore, the attribute of the graph component is transferred in a broadcast manner, and automatic re-rendering is performed.
Wherein the relative relationship between the two components may include: the current graphic component is located above, below, to the left of, or to the right of the target component, and it is also possible that the left boundary of the current graphic component is aligned with the left boundary, the right boundary, the upper boundary, or the lower boundary of the target component.
Referring to fig. 2, the embodiment of the present application further provides a large-screen data visualization display device, including:
The monitoring module 1 is used for acquiring the change data of the browser viewport and reading container parameters preset in a container of the browser when the change of the browser viewport is monitored; wherein the container parameters include canvas size, zoom mode;
The calculating 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 scaling of the canvas;
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 the components related to the container, obtaining target components, broadcasting the canvas scaling to each target component, and completing 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 component, 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 on a computer, a mobile phone and an intelligent television. With the update of hardware devices, the browser is increasingly operated on a high-definition large-area display, so that the development trend of a large screen is realized. The browser viewport is a display area for displaying web page content, and the browser viewport can be set, so that the original resolution size of the web page can be reduced and displayed on the browser no matter how large, and the web page can be seen more like a desktop browser on a mobile phone. The basic component unit of the browser interface is a UI element, the container is a component for accommodating a plurality of sub-elements, and other components can be added to the container 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 viewport in real time, acquire the change data of the browser viewport, and acquire the preset container parameters of the container from the database. The changing condition may include enlargement, reduction of the view port, or change of the resolution of the terminal, among others. The change data may include enlargement scale, reduction scale, terminal resolution, etc. of the viewport. The container parameters include the number of elements, height, width, location information, and the like.
The canvas size is determined before each project is developed, for example 1920 x 1080px, so as to determine that in a limited canvas, the content of the response is displayed according to the browser layout. And calculating the scaling of the response according to the size of the container and the size of the browser, so that the browser can completely display canvas contents under different canvas sizes. Such as: if it is desired to present 3840 x 2160px canvas content, the content will be presented in its entirety under a 2k display; at 1080p display, then the compression factor would need to be multiplied: the transverse compression coefficient scalex=0.5, and the longitudinal compression coefficient caleY =0.5, i.e. the canvas content is reduced by 0.5 times; under a 4k display, then the landscape compression factor scalex=2, the portrait compression factor scaley=2, and the canvas content is enlarged twice; the above is limited only when the canvas size and display size are both 16:9, the scaling of the canvas does not result in distortion of the content. When the canvas size is seriously unmatched with the actual demonstration display size in the project, the display effect of the current scheme seriously influences the experience. For example, developing under 1080p canvas, display resolution may be 12000 x 6000 on projection onto an oversized screen such as the public security bureau, and canvas content must appear severely distorted.
Therefore, after the change of the view port of the browser is monitored, for example, when the display device with different resolutions is enlarged, reduced or switched, the container is initialized, the preset container parameters are obtained, 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 view port of the browser and the container parameters, so that the scaling of the canvas is determined again, and the display content on the display device with different resolutions is prevented from being deformed. For example, when the resolution of the display device is defined by 16:9 to 2:1, the height of the view port of the browser is increased, and the height of the container, the position or the number of elements are required to be adjusted to avoid that the display content on the display device with the resolution is longitudinally stretched, and the watching experience is influenced.
When rendering the container, the container may be re-rendered according to the canvas scale, such as by re-laying out the height of the container, the location or number of internal elements according to the canvas scale.
After the container is re-rendered, components directly or indirectly related to the container are further acquired to obtain target components. Where a component directly or indirectly related to a container refers to a component of the container that, after a change in a container parameter of the container, directly or indirectly affects other component parameters, such as when changing the canvas scaling of a canvas, the display scale of a 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 for re-rendering.
And after the container and each target component are rendered again, acquiring large-screen data of the visual graphic data, importing the visual graphic data into the rendered container and each target component to generate visual graphics, and displaying the generated visual graphics on an interface of display equipment, wherein the visual graphics are graphics adapting to the change of the visual port of the browser, so that the visual port of the browser is automatically adapted to the change condition of the visual port of the browser, the display proportion and parameters of the container and each target component are automatically adjusted, the display content is ensured not to be deformed, and the technical problem that the traditional responsive display content is compressed and deformed is solved. The large-screen data are visual graphic data corresponding to the screen size being larger than a preset value or the resolution of the display equipment being larger than the preset resolution.
As described above, it may be understood that each component of the large-screen data visualization display device provided in the present application may implement a function of any one of the large-screen data visualization display methods described above, and a specific structure is not described herein.
Referring to fig. 3, in an embodiment of the present application, there is further provided a computer device, which may be a server, and an internal structure thereof may be as shown in fig. 3. The computer device includes a processor, a memory, a network interface, and a database connected by a system bus. Wherein the computer is configured to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, computer programs, and a database. The memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage media. The network interface of the computer device is used for communicating with an external terminal through a network connection. The computer program, when executed by a processor, implements a method for visualizing a large screen of data.
The processor executes the large-screen data visual display method, which comprises the following steps:
When the change of the browser view port is monitored, obtaining the change data of the browser view port, and reading preset container parameters of 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, obtaining target components, broadcasting the canvas scaling to each target component, and completing re-rendering of each target component;
and acquiring large screen data, importing the large screen data into the re-rendered container and each target component, generating a visual graph, and displaying the visual graph on an interface.
An embodiment of the present application also provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements a method for visualizing large-screen data, including the steps of:
When the change of the browser view port is monitored, obtaining the change data of the browser view port, and reading preset container parameters of 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, obtaining target components, broadcasting the canvas scaling to each target component, and completing re-rendering of each target component;
and acquiring large screen data, importing the large screen data into the re-rendered container and each target component, generating a visual graph, and displaying the visual graph on an interface.
Those skilled in the art will appreciate that implementing all or part of the above described methods may be accomplished by way of a computer program stored on a non-transitory computer readable storage medium, which when executed, may comprise the steps of the embodiments of the methods described above. Any reference to memory, storage, database, or other medium provided by the present application and used in embodiments may include non-volatile and/or volatile memory. The nonvolatile 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), dual speed data rate SDRAM (SSRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (SYNCHLINK) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), among others.
In summary, the application has the following maximum beneficial effects:
According to the large-screen data visualization 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 the preset container parameters of the container of the browser are read; 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, obtaining target components, broadcasting canvas scaling to each target component, and completing re-rendering of each target component; the method comprises the steps of obtaining large screen data, importing the large screen data into a re-rendered container and each target assembly, generating 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 visual port of a browser, such as the change of terminal resolution, and the display proportion and parameters are adjusted, the display content is ensured not to be deformed, and the display effect is improved; in addition, for a UI designer, the UI designer can adapt to various displays only by using the size of a universal canvas and outputting a set of design scheme, and the display content is ensured not to be deformed; and for a developer, the development efficiency is improved only by performing visual reduction according to the design scheme of the UI designer. In practical application, a developer does not need to care about what display the program is displayed on, and only needs to configure relevant parameters during development, so that the normal display of one program on multiple resolutions can be realized, and the difficulty of adapting the view port of the browser 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 one … …" does not exclude the presence of other like elements in a process, apparatus, article, or method that comprises the element.
The foregoing description is only of the preferred embodiments of the present application and is not intended to limit the scope of the application, and all equivalent structures or equivalent processes using the descriptions and drawings of the present application or directly or indirectly applied to other related technical fields are included in the scope of the application.
Claims (8)
1. A method for visualizing large-screen data, comprising:
When the change of the browser view port is monitored, obtaining the change data of the browser view port, and reading preset container parameters of 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, obtaining target components, broadcasting the canvas scaling to each target component, and completing re-rendering of each target component;
acquiring large screen data, importing the large screen data into the re-rendered container and each target component, generating a visual graph, and displaying the visual graph on an interface;
the target component comprises a chart component, the step of obtaining components related to the container, obtaining target components, and broadcasting the canvas scaling to each target component further comprises:
Acquiring chart component parameters preset by the chart component;
Determining the chart component parameters of the chart component again according to the canvas scaling and the chart component parameters to obtain target chart component parameters; the target chart component parameters comprise a field animation, a chart component scaling ratio, a relative relation among components and position information;
Completing re-rendering of the chart component according to the target chart component parameters of the chart component, acquiring components related to the chart component, and broadcasting the target chart component parameters of the chart component to the components related to the chart component to complete re-rendering;
After the step of broadcasting the canvas scaling to the respective target components, further comprising:
monitoring broadcast messages of all target components; wherein the broadcast message carries target component parameters of the target component;
Extracting target component parameters of the target components from the broadcast messages when the broadcast messages of at least one target component are monitored;
and re-rendering the container according to the target component parameters of the target component.
2. The method of claim 1, wherein the step of redefining the diagram component parameters of the diagram component according to the canvas scaling and diagram component parameters comprises:
Adjusting the width and height of the chart component and the chart component scaling according to the canvas scaling;
Taking the width, the height and the scale of the graph component as the parameters of the graph component;
the step of completing the re-rendering of the graph component according to the target graph component parameters of the graph component comprises the following steps:
And reducing or enlarging the width and the height of the chart component according to the scaling of the chart component, and cutting out the content exceeding the width and the height of the chart component to finish the re-rendering of the chart component.
3. The method of claim 1, wherein the step of redefining the diagram component parameters of the diagram component according to the canvas scaling and diagram component parameters comprises:
adjusting the width, height and width scaling of the chart component according to the canvas scaling;
Taking the width, height and width scaling of the graph component after adjustment as the graph component parameters;
the step of completing the re-rendering of the graph component according to the target graph component parameters of the graph component comprises the following steps:
And reducing or amplifying the width of the chart component according to the width scaling ratio, and keeping the height of the chart component unchanged to finish re-rendering of the chart component.
4. The method of claim 1, wherein prior to the step of broadcasting the canvas scaling to the respective target components, further comprising:
Judging whether the canvas scaling is a preset target scaling;
If not, the step of broadcasting the canvas scaling to each target component is executed;
and if yes, re-rendering each target component according to the canvas scaling.
5. The method of claim 1, wherein the step of importing the large screen data into the re-rendered container and each target component to generate a visual graphic, and displaying the visual graphic on an interface comprises:
Carrying out planarization treatment on the large screen data;
importing the large screen data subjected to planarization treatment into the re-rendered container and each target component to obtain a visual graph;
and displaying the visualized graph on an interface according to a preset style.
6. A large screen data visualization display device, comprising:
the monitoring module is used for acquiring the change data of the browser viewport and reading container parameters preset in a container of the browser when the change of the browser viewport is monitored; wherein the container parameters include canvas size, zoom mode;
the calculation module 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 scaling of the canvas;
The re-rendering module is used for re-rendering the browser container according to the canvas scaling;
the broadcasting module is used for acquiring the components related to the container, obtaining target components, broadcasting the canvas scaling to each target component and finishing re-rendering of each target component;
the display module is used for acquiring large screen data, importing the large screen data into the re-rendered container and each target component, generating a visual graph, and displaying the visual graph on an interface;
The target components comprise chart components, the components related to the container are acquired, the target components are obtained, and after the canvas scaling is broadcasted to each target component, the method further comprises:
Acquiring chart component parameters preset by the chart component;
Determining the chart component parameters of the chart component again according to the canvas scaling and the chart component parameters to obtain target chart component parameters; the target chart component parameters comprise a field animation, a chart component scaling ratio, a relative relation among components and position information;
Completing re-rendering of the chart component according to the target chart component parameters of the chart component, acquiring components related to the chart component, and broadcasting the target chart component parameters of the chart component to the components related to the chart component to complete re-rendering;
After broadcasting the canvas scaling to each target component, the method further comprises:
monitoring broadcast messages of all target components; wherein the broadcast message carries target component parameters of the target component;
Extracting target component parameters of the target components from the broadcast messages when the broadcast messages of at least one target component are monitored;
and re-rendering the container according to the target component parameters of the target component.
7. A computer device comprising a memory and a processor, the memory storing a computer program, characterized in that the processor implements the steps of the large screen data visualization method of any of claims 1 to 5 when the computer program is executed.
8. A computer-readable storage medium, on which a computer program is stored, characterized in that the computer program, when being executed by a processor, implements the steps of the large screen data visualization method of any one of claims 1 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110476925.3A CN113127784B (en) | 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 CN113127784B (en) | 2021-04-29 | Large screen data visual display method and device, storage medium and computer equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113127784A CN113127784A (en) | 2021-07-16 |
| CN113127784B true CN113127784B (en) | 2024-07-16 |
Family
ID=
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| 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 |
| CN111338628A (en) * | 2020-03-10 | 2020-06-26 | 中国联合网络通信集团有限公司 | Component rendering method and device |
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| 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 |
| CN111338628A (en) * | 2020-03-10 | 2020-06-26 | 中国联合网络通信集团有限公司 | Component rendering method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10339209B2 (en) | Webpage display method and device | |
| US20220137796A1 (en) | Screen adaptation and displaying method, electronic device and computer 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 | |
| WO2015131787A1 (en) | Screen adaptation method and apparatus | |
| CN107273007B (en) | System and non-transitory computer readable medium for scaling a visualization image | |
| CN107256259B (en) | Page display method and device, electronic equipment and storage medium | |
| CN112965650B (en) | Thermodynamic diagram visualization method, thermodynamic diagram visualization system and thermodynamic diagram visualization computer equipment | |
| CN111667487A (en) | Picture clipping method and device and computer equipment | |
| CN107861711B (en) | Page adaptation method and device | |
| CN113486280A (en) | Page rendering display method, device, equipment, storage medium and program product | |
| CN105590241B (en) | Self-adaptive electronic bill implementation method and system | |
| CN105389308B (en) | Webpage display processing method and device | |
| CN112114919B (en) | Screen rotation display optimization method and device | |
| CN113127784B (en) | Large screen data visual display method and device, storage medium and computer equipment | |
| CN114281445B (en) | Page display method, page display device, electronic equipment and storage medium | |
| CN113127784A (en) | Large-screen data visual display method and device, storage medium and computer equipment | |
| CN117009686A (en) | Page content processing method and device and electronic equipment | |
| CN114398576A (en) | Page rendering method and device, electronic equipment and storage medium | |
| CN112261227A (en) | Method for multi-screen equal-proportion adaptation of mobile terminal | |
| CN113934339A (en) | Method and device for page self-adaptive layout based on rem | |
| CN112328940A (en) | Method and device for embedding transition page into webpage, computer equipment and storage medium | |
| CN116841439B (en) | Display method and device for image pixel grid, computer equipment and storage medium | |
| US20230094641A1 (en) | Data processing method and device and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant |