Cross-terminal self-adaptive data chart dynamic rendering method and system

Abstract

The invention discloses a cross-terminal self-adaptive data chart dynamic rendering method and system, belongs to the technical field of data visualization, and aims to solve the technical problems of how to realize cross-terminal self-adaptive data chart dynamic rendering, guarantee visual coordination among different devices and improve the rendering efficiency. According to the technical scheme, an equipment parameter set of terminal equipment is obtained; wherein the device parameter set at least comprises a screen size, a pixel density DPI, an input mode type and a screen aspect ratio; according to the proportional relation between the screen size and the watching distance, dynamically calculating a device feature weight value; through a pre-constructed adaptive decision tree, mapping the device feature weight value into a layout parameter set, realizing automatic derivation of layout parameters, and previewing a device adaptation effect in real time; and dynamically recombining the atomized chart component according to the layout parameter set, and outputting a data visualization chart adaptive to the current terminal.

Description

Technical Field

[0001] The present invention relates to the technical field of data visualization, and in particular to a cross-terminal adaptive data chart dynamic rendering method and system. Background Art

[0002] As digital transformation accelerates, data visualization has become a core tool for enterprise decision-making and user insights. However, with the explosive growth of terminal device forms, traditional chart design methods face severe challenges. Designers face the following pain points in visual chart design:

[0003] ① High repetitive development costs: Designers need to design chart layouts separately for PCs, tablets, mobile phones and other terminals, and developers need to repeatedly write adaptation codes, accounting for more than 60% of manpower consumption.

[0004] ②Poor visual coordination: Traditional media technology can only achieve simple scaling, resulting in small font size on mobile devices, overlapping and deformed elements, inconsistent interactions, etc.

[0005] ③ Collaboration in the maintenance cost black hole: Each change in requirements requires the simultaneous modification of multiple design plans, and an average of 3-5 cross-departmental inspections are required to complete version iteration.

[0006] ④ Dimension explosion of emerging scenarios: The popular folding screens have different aspect ratios when unfolded, and the outer frame of the circular progress chart has a high deformation rate.

[0007] ⑤ There is a deviation between the design draft and the development implementation: There is a non-linear mapping gap between the designer's grid system (8px benchmark) and the actual rendering (rem / vw units) of the developer, which leads to distortion in the implementation.

[0008] In summary, industry research shows that 83% of data teams experience project delivery delays due to multi-terminal adaptation issues, and 67% of users abandon their mobile devices due to poor visualization experience.

[0009] Therefore, how to achieve cross-terminal adaptive dynamic rendering of data charts and ensure visual coordination between different devices is a technical problem that needs to be solved urgently. Summary of the Invention

[0010] The technical task of the present invention is to provide a cross-terminal adaptive data chart dynamic rendering method and system to solve the problem of how to achieve cross-terminal adaptive data chart dynamic rendering and ensure visual coordination between different devices.

[0011] The technical task of the present invention is achieved in the following manner: a cross-terminal adaptive data chart dynamic rendering method, the method is as follows:

[0012] Obtain the device parameter set of the terminal device; wherein, the device parameter set at least includes the screen size, pixel density DPI, input method type, and screen aspect ratio;

[0013] Dynamically calculate the device feature weight value according to the proportional relationship between the screen size and the viewing distance. The formula is as follows: W = α * S + β * D + γ * V; where S is the screen area, D is the pixel density, V is the viewing distance, and α, β, and γ are dynamic adjustment coefficients;

[0014] Map the device feature weight value to the layout parameter set through a pre-built adaptive decision tree to realize automatic derivation of layout parameters and real-time preview of the device adaptation effect; wherein, the layout parameter set includes the number of grid columns, chart size level, and interaction trigger method;

[0015] Dynamically reorganize the atomic chart components according to the layout parameter set, and output the data visualization chart adapted to the current terminal.

[0016] Preferably, the device feature weight value comprehensively calculates the screen physical area, input method accuracy, and typical viewing distance; among them, the interaction accuracy weight of touch devices is higher than that of keyboard and mouse devices.

[0017] Preferably, the adaptive decision tree performs at least one of the following operations:

[0018] When the device feature weight value W > 0.7, enable the desktop mode layout strategy and set the number of grid columns N ≥ 4;

[0019] When the device feature weight value 0.4 < W ≤ 0.7, enable the tablet mode layout strategy and automatically activate the axis label rotation function;

[0020] When the device feature weight value W ≤ 0.4, forcibly enable the mobile streaming layout and switch the interaction method to the touch priority mode.

[0021] Preferably, the atomic chart components include 9 core modules: title area, legend area, coordinate system, data layer, grid lines, tooltip, annotation layer, control panel, and container frame. Each core module has at least three predefined responsive forms, specifically as follows:

[0022] Compressed form: Hide decorative elements and enable the text ellipsis mechanism. Specifically: the title is converted to a single-line ellipsis, and the legend is folded into a drop-down menu;

[0023] Standard form: Display the complete coordinate axis and legend. Specifically: the legend is placed on the right, and the axis labels are rotated 45 degrees;

[0024] Expanded form: Add auxiliary reference lines and data annotation layers. Specifically: display the complete auxiliary lines, and the control panel is always resident;

[0025] The dynamic spacing calculation formula between modules is: D = K1 * screen width + K2 * number of elements;

[0026] Vertical spacing: Dynamically increase the breathing feeling according to the screen height;

[0027] Horizontal spacing: The element spacing automatically shrinks / expands according to the content density to avoid squeezing or looseness;

[0028] Exception handling: When the spacing between adjacent elements is <4px, an overlap warning is triggered, and it is recommended to hide secondary information;

[0029] Self-healing layout engine: Based on the element priority, preemptive layout is performed. When there is insufficient space, it automatically degrades, and cross-component dependency relationships are managed.

[0030] Preferably, the method also dynamically adjusts the font size of data labels according to the real-time ratio of the screen physical size to the content density. When the content is overloaded, the data aggregation display mode is automatically enabled; specifically as follows:

[0031] Configure the main font size benchmark, and record the current screen canvas size as a reference standard; among them, the calculation formula for the basic font size is: Among them, F s is the actual font size; F b is the benchmark font size; S is the screen area; Sb is the benchmark screen area;

[0032] Dynamically adjust the scenario to ensure the integrity of information. Specifically: ① When the screen shrinks: Shrink the font size moderately according to the non-current curve to ensure that the minimum readable font size ≥ 12px; ② When the data is too dense: Automatically switch to the aggregation mode, replace the scatter points with trend lines, and magnify the key data bubbles; ③ Extreme scenario processing: Use the color block height to replace the digital label on the ultra-small screen; ④ Start multi-level font size layering on the extra-large screen, divided into three levels of main / secondary / auxiliary font sizes;

[0033] Visual consistency verification to ensure compliance with the WCAG AA standard: Automatically mark whether the text contrast meets the accessibility standard, generate a font size adaptation report, and prompt special cases that require manual intervention.

[0034] A cross-terminal adaptive data chart dynamic rendering system, which is used to implement the cross-terminal adaptive data chart dynamic rendering method as described above; the system includes:

[0035] Device perception unit, used to detect the screen size, pixel density, and input method in real time;

[0036] Intelligent layout engine unit, used to automatically select the best layout strategy based on device characteristics;

[0037] Component warehouse unit, used to store chart element modules that support morphological changes;

[0038] A calibration interface unit for synchronously displaying the adaptation effects of different terminal sizes.

[0039] Preferably, the intelligent layout engine unit is also used to calculate dynamic spacing, specifically: automatically adjust the component spacing according to the screen width and the number of elements to ensure that the minimum operable area on the mobile device is not less than 7mm×7mm.

[0040] Preferably, the calibration interface unit supports parallel display of the rendering effects of at least three terminal sizes in a single window and real-time feedback of the visual consistency evaluation results;

[0041] For a folding screen, when a sudden change in the screen width-to-height ratio is detected, keep the core data layer stable and dynamically adjust the layout of auxiliary elements.

[0042] An electronic device, comprising: a memory and at least one processor;

[0043] Wherein, a computer program is stored on the memory;

[0044] The at least one processor executes the computer program stored in the memory, so that the at least one processor executes the cross-terminal adaptive data chart dynamic rendering method as described above.

[0045] A computer-readable storage medium, in which a computer program is stored, and the computer program can be executed by a processor to implement the cross-terminal adaptive data chart dynamic rendering method as described above.

[0046] The cross-terminal adaptive data chart dynamic rendering method and system of the present invention have the following advantages:

[0047] (1) The present invention realizes the adaptive display of charts on multiple terminal devices through a dynamic rule engine. It intelligently adjusts the font size, layout and element ratio to ensure visual coordination between different devices, solves the technical problems existing in the adaptation of data visualization charts, improves the user operation efficiency, and optimizes the user experience;

[0048] (2) The present invention realizes one-key generation of multi-terminal solutions, completes the benchmark design in the software, and automatically outputs multi-terminal device configuration rules and annotations; when the layout parameters are modified at the development end, the design draft is updated synchronously to ensure that the visual reduction rate reaches more than 95%;

[0049] (3) The present invention liberates designers from repetitive labor, enabling them to focus more on data narration and user experience optimization, without manually adapting to multiple terminals, and generating multi-terminal solutions with one key;

[0050] (4) The present invention protects the intelligent font size and contrast to ensure the readability of text and the integrity of information.

[0051] (5) The present invention improves the development efficiency: a multi-terminal solution is automatically generated in a single design, code is directly generated from the component library, and the visual restoration degree reaches 95%+;

[0052] (6) The present invention ensures display consistency: with a dynamic recombination algorithm, the layout deformation rate across devices is reduced. BRIEF DESCRIPTION OF THE DRAWINGS

[0053] The present invention will be further described below in conjunction with the accompanying drawings.

[0054] Attached Figure 1 is a flowchart of a method for dynamically rendering data charts adaptable to multiple terminals. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0055] The method and system for dynamically rendering data charts adaptable to multiple terminals of the present invention will be described in detail below with reference to the accompanying drawings of the specification and specific embodiments.

[0056] Embodiment 1:

[0057] As shown in the attached Figure 1 This embodiment provides a method for dynamically rendering data charts adaptable to multiple terminals, and the method is as follows:

[0058] S1. Obtain the device parameter set of the terminal device; wherein, the device parameter set includes at least the screen size, pixel density DPI, input method type, and screen aspect ratio;

[0059] S2. Dynamically calculate the device feature weight value according to the proportional relationship between the screen size and the viewing distance. The formula is as follows: W = α * S + β * D + γ * V; wherein, S is the screen area; D is the pixel density; V is the viewing distance; α, β, and γ are dynamic adjustment coefficients;

[0060] S3. Through a pre-constructed adaptive decision tree, map the device feature weight value to a set of layout parameters to realize automatic derivation of layout parameters and real-time preview of the device adaptation effect; wherein, the set of layout parameters includes the number of grid columns, chart size level, and interaction trigger method;

[0061] S4. Dynamically recombine the atomic chart components according to the set of layout parameters, and output a data visualization chart adapted to the current terminal.

[0062] In step S2 of this embodiment, the device feature weight value comprehensively calculates the screen physical area, input method accuracy, and typical viewing distance; among them, the interaction accuracy weight of touch devices is higher than that of keyboard and mouse devices.

[0063] The adaptive decision tree in step S3 of this embodiment performs at least one of the following operations:

[0064] When the device feature weight value W>0.7, the desktop mode layout strategy is enabled, the number of grid columns N is set to ≥4, that is, multi-column layout (6 columns) is enabled, and the chart size is enlarged by 15%;

[0065] When the device feature weight value is 0.4 <W≤0.7时,启用平板模式布局策略,自动激活坐标轴标签旋转功能;

[0066] When the device feature weight value W is less than or equal to 0.4, the mobile end flow layout is forcibly enabled, and the interaction mode is switched to touch priority mode. That is, a single-column flow layout is forced, and the interaction mode is automatically switched to long press triggering.

[0067] Special handling for foldable screens: Dynamically rebuild the rendering pipeline when detecting sudden changes in aspect ratio, automatically split the two columns when unfolded, and switch to information flow mode when folded.

[0068] The atomic chart component in step S4 of this embodiment includes nine core modules: title area, legend area, coordinate system, data layer, grid lines, prompt box, annotation layer, control panel, and container frame. Each core module has at least three predefined responsive forms, as follows:

[0069] Compact form (mobile): Hides decorative elements and enables text ellipsis. Specifically, the title becomes a single-line ellipsis, and the legend collapses into a drop-down menu.

[0070] Standard form (flat): displays the complete coordinate axes and legend, specifically: the legend is right-placed, and the coordinate axis labels are rotated 45 degrees;

[0071] Extended form (PC): Add auxiliary reference lines and data annotation layers, specifically: display complete auxiliary lines and the control panel is always resident;

[0072] The dynamic spacing between modules is calculated as follows: D = K1 * screen width + K2 * number of elements;

[0073] Vertical spacing: Dynamically increase the sense of breathing according to the height of the screen (the higher the screen, the more white space);

[0074] Horizontal spacing: The spacing between elements automatically shrinks / expands with the content density to avoid squeezing or looseness;

[0075] Exception handling: When the distance between adjacent elements is less than 4px, an overlap warning is triggered and it is recommended to hide secondary information;

[0076] Self-healing layout engine: preemptive layout based on element priority, automatic degradation when space is insufficient (such as hiding decorative elements), and cross-component dependency management (coordinate axis and grid line linkage adjustment).

[0077] This embodiment also dynamically adjusts the font size of data labels according to the real-time ratio of the screen physical size to the content density. When the content is overloaded, it automatically enables the data aggregation display mode. Specifically as follows:

[0078] (1) Configure the main font size benchmark (such as 20px for the PC side), and record the current screen canvas size as a reference standard. Among them, the calculation formula for the basic font size is: Where F s is the actual font size; F b is the benchmark font size; S is the screen area; Sb is the benchmark screen area (reference 13-inch comparison book = 83 square inches);

[0079] (2) Dynamically adjust the scene to ensure the integrity of information. Specifically: ① Screen reduction: Appropriately reduce the font size according to a non-linear curve (non-equally proportionally), ensuring that the minimum readable font size ≥ 12px (for example, the title on the tablet side changes from 20px → 18px, and the body text changes from 14px → 13px); ② Over-dense data: Automatically switch to the aggregation mode, replace scatter points with trend lines, and magnify the key data bubbles; ③ Extreme scene processing: Use the color block height to replace the digital label for ultra-small screens (Apple Watch); ④ Ultra-large screens (8K monitors) start multi-level font size layering, divided into three levels: main / secondary / auxiliary;

[0080] (3) Visual consistency verification to ensure compliance with the WCAG AA standard: Automatically mark whether the text contrast meets the accessibility standard, generate a font size adaptation report, and prompt special cases that require manual intervention.

[0081] Embodiment 2:

[0082] This embodiment provides a cross-terminal adaptive dynamic rendering system for data charts, which is used to implement the cross-terminal adaptive dynamic rendering method of data charts as in Embodiment 1. The system includes:[[ID=2,2]]

[0083] A device perception unit for real-time detection of the screen size, pixel density, and input method;

[0084] An intelligent layout engine unit for automatically selecting the best layout strategy based on device characteristics;

[0085] A component warehouse unit for storing chart element modules that support morphological changes;

[0086] A calibration interface unit for synchronously displaying the adaptation effects of different terminal sizes.

[0087] The intelligent layout engine unit in this embodiment is also used to calculate the dynamic spacing. Specifically: Automatically adjust the component spacing according to the screen width and the number of elements to ensure that the minimum operable area on the mobile side is not less than 7mm × 7mm.

[0088] The calibration interface unit in this embodiment supports parallel display of rendering effects of at least three terminal sizes within a single window and provides real-time feedback on the visual consistency evaluation results;

[0089] For a folding screen, when a sudden change in the screen aspect ratio is detected, the core data layer is kept stable and the layout of auxiliary elements is dynamically adjusted.

[0090] Embodiment 3:

[0091] This embodiment also provides an electronic device, including: a memory and at least one processor;

[0092] Wherein, the memory stores computer-executable instructions;

[0093] The at least one processor executes the computer-executable instructions stored in the memory, so that the at least one processor executes the cross-terminal adaptive dynamic rendering method for data charts in any embodiment of the present invention.

[0094] The processor may be a central processing unit (CPU), or may also be other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), off-the-shelf programmable gate arrays (FPGAs) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The processor may be a microprocessor or the processor may also be any conventional processor, etc.

[0095] The memory can be used to store computer programs and / or modules. The processor realizes various functions of the electronic device by running or executing the computer programs and / or modules stored in the memory and calling the data stored in the memory. The memory mainly includes a program storage area and a data storage area. Among them, the program storage area can store an operating system, application programs required for at least one function, etc.; the data storage area can store data created according to the use of the terminal, etc. In addition, the memory may also include high-speed random access memory, and may also include non-volatile memory, such as a hard disk, memory, plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, at least one magnetic disk storage period, flash device, or other volatile solid-state storage devices.

[0096] Embodiment 4:

[0097] This embodiment also provides a computer-readable storage medium storing multiple instructions that are loaded by a processor to cause the processor to execute the cross-terminal adaptive data chart dynamic rendering method according to any embodiment of the present invention. Specifically, a system or device equipped with a storage medium can be provided, on which software program codes for implementing the functions of any one of the above embodiments are stored, and the computer (or CPU or MPU) of the system or device is caused to read and execute the program codes stored in the storage medium.

[0098] In this case, the program code read from the storage medium itself can implement the functions of any one of the above embodiments, so the program code and the storage medium storing the program code constitute a part of the present invention.

[0099] Examples of storage media for providing program codes include floppy disks, hard disks, magneto-optical disks, optical disks (such as CD-ROM, CD-R, CD-RW, DVD-ROM, DVD-RYM, DVD-RW, DVD+RW), magnetic tapes, non-volatile memory cards, and ROMs. Optionally, the program code can be downloaded from a server computer via a communication network.

[0100] In addition, it should be clear that not only can the functions of any one of the above embodiments be implemented by executing the program code read by the computer, but also by causing an operating system or the like operating on the computer based on the instructions of the program code to complete part or all of the actual operations.

[0101] Furthermore, it can be understood that the program code read from the storage medium is written into the memory provided in an expansion board inserted into the computer or into the memory provided in an expansion unit connected to the computer, and then based on the instructions of the program code, the CPU or the like installed on the expansion board or the expansion unit is caused to execute part and all of the actual operations, thereby implementing the functions of any one of the above embodiments.

[0102] Finally, it should be noted that: the above embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that: they can still modify the technical solutions described in the foregoing embodiments, or perform equivalent replacements on some or all of the technical features; and these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.

Claims

1. A cross-terminal adaptive data chart dynamic rendering method, characterized in that The method is as follows: Obtain the device parameter set of the terminal device; wherein, the device parameter set includes at least screen size, pixel density DPI, input method type, and screen aspect ratio; Dynamically calculate the device feature weight value according to the proportional relationship between the screen size and the viewing distance. The formula is as follows: W = α * S + β * D + γ * V; where S is the screen area, D is the pixel density, V is the viewing distance, and α, β, and γ are dynamic adjustment coefficients; Map the device feature weight value to a layout parameter set through a pre-constructed adaptive decision tree to realize automatic derivation of layout parameters and real-time preview of device adaptation effects; wherein, the layout parameter set includes the number of grid columns, chart size level, and interaction trigger method; Dynamically reorganize the atomic chart components according to the layout parameter set and output a data visualization chart adapted to the current terminal.

2. The cross-terminal adaptive data chart dynamic rendering method according to claim 1, wherein The device feature weight value comprehensively calculates the physical screen area, input method accuracy, and typical viewing distance; among them, the interaction accuracy weight of touch devices is higher than that of keyboard and mouse devices.

3. The cross-terminal adaptive data chart dynamic rendering method according to claim 1, wherein The adaptive decision tree performs at least one of the following operations: When the device feature weight value W > 0.7, enable the desktop mode layout strategy and set the number of grid columns N ≥ 4; When the device feature weight value 0.4 < W ≤ 0.7, enable the tablet mode layout strategy and automatically activate the axis label rotation function; When the device feature weight value W ≤ 0.4, force the use of the mobile streaming layout and switch the interaction method to the touch priority mode.

4. The cross-terminal adaptive data chart dynamic rendering method according to claim 1, wherein The atomic chart components include 9 core modules: title area, legend area, coordinate system, data layer, grid line, tooltip, annotation layer, control panel, and container frame. Each core module has at least three predefined responsive forms, which are as follows: Compressed form: Hide decorative elements and enable the text ellipsis mechanism, specifically: the title is changed to a single-line ellipsis, and the legend is folded into a drop-down menu; Standard form: Display the complete coordinate axis and legend, specifically: the legend is placed on the right, and the axis labels are rotated 45 degrees; Expanded form: Add auxiliary reference lines and data annotation layers, specifically: display the complete auxiliary lines, and the control panel is always present; The dynamic spacing calculation formula between each module is: D = K1 * screen width + K2 * number of elements; Vertical spacing: Dynamically increase the breathing feeling according to the screen height; Horizontal spacing: The element spacing automatically shrinks / expands according to the content density; Exception handling: When the adjacent element spacing < 4px, trigger an overlap warning, and it is recommended to hide secondary information; Self-healing layout engine: Based on the element priority, perform preemptive layout, automatically degrade when there is insufficient space, and manage cross-component dependency relationships.

5. The cross-terminal adaptive data chart dynamic rendering method according to any one of claims 1-4, characterized in that The method also dynamically adjusts the font size of data labels according to the real-time ratio of the physical screen size to the content density. When the content is overloaded, automatically enable the data aggregation display mode; specifically as follows: Configure the main font size benchmark and record the current screen canvas size as the reference standard; among them, the calculation formula for the basic font size is: Among them, Fs is the actual font size; Fb is the benchmark font size; S is the screen area; Sb is the benchmark screen area; Dynamically adjust the scene to ensure the integrity of information, specifically as follows: ① Screen shrinking: Appropriately shrink the font size according to a non-current curve to ensure that the minimum readable font size ≥ 12px; ② Dense data: Automatically switch to the aggregation mode, replace scatter points with trend lines, and magnify the bubbles of key data; ③ Extreme scene processing: Use the height of color blocks to replace digital labels on ultra-small screens; ④ Ultra-large screen: Start multi-level font size layering, divided into three levels: main / secondary / auxiliary font sizes; Verify visual consistency to ensure compliance with the WCAG AA standard: Automatically mark whether the text contrast meets the accessibility standard and generate a font size adaptation report.

6. A cross-terminal adaptive dynamic rendering system for data charts, characterized in that, This system is used to implement the cross-terminal adaptive data chart dynamic rendering method described in any one of claims 1 to 5; this system includes: A device perception unit for real-time detection of screen size, pixel density, and input method; An intelligent layout engine unit for automatically selecting the best layout strategy based on device characteristics; A component warehouse unit for storing chart element modules that support morphological changes; A calibration interface unit for synchronously displaying the adaptation effects of different terminal sizes.

7. The cross-terminal adaptive data chart dynamic rendering system according to claim 6, characterized in that, The intelligent layout engine unit is also used to calculate dynamic spacing, specifically: Automatically adjust the component spacing according to the screen width and the number of elements to ensure that the minimum operable area on the mobile device is not less than 7mm × 7mm.

8. The cross-terminal adaptive data chart dynamic rendering system according to claim 6, wherein The calibration interface unit supports parallel display of the rendering effects of at least three terminal sizes in a single window and provides real-time feedback on the visual consistency evaluation results; For foldable screens, when a sudden change in the screen aspect ratio is detected, keep the core data layer stable and dynamically adjust the layout of auxiliary elements.

9. An electronic device, characterized in that, Including: A memory and at least one processor; Wherein, a computer program is stored on the memory; The at least one processor executes the computer program stored in the memory, so that the at least one processor executes the cross-terminal adaptive data chart dynamic rendering method described in any one of claims 1 to 5.

10. A computer-readable storage medium, characterized in that, A computer program is stored in the computer-readable storage medium, and the computer program can be executed by a processor to implement the cross-terminal adaptive data chart dynamic rendering method described in any one of claims 1 to 5.

Images