Data visualization method and device, equipment and storage medium

Abstract

The invention provides a data visualization method and device, equipment and a storage medium, and relates to the technical field of computers. The method comprises the following steps: displaying a grid canvas; receiving a component layout operation for a target component in the grid canvas; in response to a component monitoring event triggered by the component layout operation, acquiring first data of the target component under the component layout operation; generating visual effect data of the target component according to the first data; and updating layout information of the grid canvas according to the visualization effect data, wherein the layout information is used for grid canvas rendering. According to the method, the grid canvas layout can be updated in real time by capturing the user operation event and generating the visualization effect data in real time, it is ensured that user operation is fed back in real time, data visualization work is more intuitive and efficient, and the interactivity and the dynamism of a user interface are improved.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and in particular to a data visualization method, apparatus, device, and storage medium. Background Technology

[0002] With the continuous growth of business data and the increasing demand for analysis, more and more business data is being presented using large-screen views. However, the development and construction of large-screen views typically requires separate development for different analytical needs, which is not only costly but also lacks reusability.

[0003] It should be noted that the information disclosed in the background section above is only used to enhance the understanding of the background of this disclosure, and therefore may include information that does not constitute prior art known to those skilled in the art. Summary of the Invention

[0004] The purpose of this disclosure is to provide a data visualization method, apparatus, device, and storage medium.

[0005] According to a first aspect of the present disclosure, a data visualization method is provided, comprising: displaying a grid canvas; receiving a component layout operation on a target component in the grid canvas; in response to a component monitoring event triggered by the component layout operation, acquiring first data of the target component under the component layout operation; generating visualization effect data of the target component based on the first data; and updating layout information of the grid canvas based on the visualization effect data, wherein the layout information is used for grid canvas rendering.

[0006] In some implementations, the component layout operation includes a component movement operation; wherein, in response to a component monitoring event triggered by the component layout operation, obtaining first data of the target component under the component layout operation includes: in response to a displacement monitoring event bound to the target component triggered by the component movement operation, obtaining the displacement coordinates of the target component under the component movement operation; and determining the first data based on the displacement coordinates.

[0007] In some implementations, generating visualization effect data of the target component based on the first data includes: obtaining grid configuration information of the grid canvas; converting the displacement coordinates into grid coordinates using the grid configuration information; obtaining a movement effect style corresponding to the target component; associating the movement effect style with the grid coordinates; and generating visualization effect data of the target component.

[0008] In some implementations, the component layout operation is a component size adjustment operation; wherein, in response to a component monitoring event triggered by the component layout operation, obtaining first data of the target component under the component layout operation includes: in response to a component size monitoring event bound to the target component triggered by the size adjustment operation, obtaining the updated component size of the target component under the size adjustment operation; and determining the first data based on the updated component size.

[0009] In some implementations, generating visualization data of the target component based on the first data includes: obtaining canvas ratio information of the grid canvas; using the canvas ratio information to convert the component update size into a grid-fitted size; obtaining a size adjustment effect style corresponding to the target component; associating the size adjustment effect style with the grid-fitted size; and generating visualization data of the target component.

[0010] In some implementations, the grid canvas further includes other components; wherein, after the component layout operation is completed, the data visualization method further includes: obtaining component stacking indication information of the grid canvas; in response to the component stacking indication information indicating that stacking is not allowed, performing collision detection on the target component and the other components; in response to the existence of collision detection, rearranging the other components based on the first data to obtain the updated grid coordinates of the other components; and updating the layout information of the grid canvas according to the updated grid coordinates of the other components.

[0011] In some implementations, in response to the display carrier of the grid canvas being a business smart dashboard, the component stacking indication information of the grid canvas is set to disallow stacking; in response to the display carrier of the grid canvas being a large visualization screen, the component stacking indication information of the grid canvas is set to allow stacking.

[0012] In some embodiments, the data visualization method further includes: receiving a canvas size adjustment operation for the grid canvas; in response to a canvas monitoring event triggered by the canvas size adjustment operation, obtaining the updated canvas size of the grid canvas under the canvas size adjustment operation; rearranging existing components in the grid canvas according to the updated canvas size to obtain the updated grid coordinates of the existing components; and updating the layout information of the grid canvas according to the updated grid coordinates of the existing components.

[0013] In some implementations, the data visualization method further includes: registering a monitoring event to be configured and bound to a configurable operation object; wherein the configurable operation object is a grid canvas object or a component object; determining a data processing function configured for the monitoring event to be configured; and encapsulating the monitoring event to be configured and the corresponding data processing function into the configurable operation object.

[0014] According to a second aspect of the present disclosure, a data visualization apparatus is provided, comprising: a display unit for displaying a grid canvas; a receiving unit for receiving a component layout operation on a target component in the grid canvas; an acquisition unit for acquiring first data of the target component under the component layout operation in response to a component monitoring event triggered by the component layout operation; a generation unit for generating visualization effect data of the target component based on the first data; and an update unit for updating layout information of the grid canvas based on the visualization effect data, wherein the layout information is used for grid canvas rendering.

[0015] In some implementations, the component layout operation includes a component movement operation; wherein, the acquisition unit, in response to a component monitoring event triggered by the component layout operation, acquires first data of the target component under the component layout operation, including: in response to a displacement monitoring event bound to the target component triggered by the component movement operation, acquiring the displacement coordinates of the target component under the component movement operation; and determining the first data based on the displacement coordinates.

[0016] In some implementations, the generation unit generates visualization effect data of the target component based on the first data, including: obtaining grid configuration information of the grid canvas; converting the displacement coordinates into grid coordinates using the grid configuration information; obtaining a movement effect style corresponding to the target component; associating the movement effect style with the grid coordinates; and generating visualization effect data of the target component.

[0017] In some implementations, the component layout operation is a component size adjustment operation; wherein, the acquisition unit, in response to a component monitoring event triggered by the component layout operation, acquires first data of the target component under the component layout operation, including: in response to a component size monitoring event bound to the target component triggered by the size adjustment operation, acquiring the updated component size of the target component under the size adjustment operation; and determining the first data based on the updated component size.

[0018] In some implementations, the generation unit generates visualization effect data of the target component based on the first data, including: obtaining canvas ratio information of the grid canvas; using the canvas ratio information to convert the component update size into a grid-adapted size; obtaining a size adjustment effect style corresponding to the target component; associating the size adjustment effect style with the grid-adapted size; and generating visualization effect data of the target component.

[0019] In some embodiments, the data visualization device further includes a collision detection unit and a rearrangement unit; wherein, the grid canvas also includes other components; after the component layout operation is completed, the acquisition unit is further configured to acquire component stacking indication information of the grid canvas; the collision detection unit is configured to perform collision detection on the target component and the other components in response to the component stacking indication information indicating that stacking is not allowed; the rearrangement unit is configured to rearrange the other components based on the first data in response to the existence of collision detection, and obtain the updated grid coordinates of the other components; the update unit is further configured to update the layout information of the grid canvas according to the updated grid coordinates of the other components.

[0020] In some implementations, in response to the display carrier of the grid canvas being a business smart dashboard, the component stacking indication information of the grid canvas is set to disallow stacking; in response to the display carrier of the grid canvas being a large visualization screen, the component stacking indication information of the grid canvas is set to allow stacking.

[0021] In some embodiments, the receiving unit is further configured to receive a canvas size adjustment operation for the grid canvas; the acquiring unit is further configured to, in response to a canvas monitoring event triggered by the canvas size adjustment operation, acquire the updated canvas size of the grid canvas under the canvas size adjustment operation; the rearrangement unit is further configured to rearrange the existing components in the grid canvas according to the updated canvas size, and obtain the updated grid coordinates of the existing components; the updating unit is further configured to update the layout information of the grid canvas according to the updated grid coordinates of the existing components.

[0022] In some embodiments, the data visualization device further includes an event registration unit and an encapsulation unit; the event registration unit is used to register a monitoring event to be configured and bound to a configurable operation object; wherein, the configurable operation object is a grid canvas object or a component object; the acquisition unit is further used to determine the data processing function configured for the monitoring event to be configured; the encapsulation unit is used to encapsulate the monitoring event to be configured and the corresponding data processing function into the configurable operation object.

[0023] According to a third aspect of the present disclosure, an electronic device is provided, characterized in that it includes: a processor; a memory for storing processor-executable instructions; wherein the processor is configured to implement the above-described data visualization method.

[0024] According to a fourth aspect of the present disclosure, a non-transitory computer-readable storage medium is provided, wherein when instructions in the storage medium are executed by a processor of a mobile terminal, the mobile terminal is enabled to execute a data visualization method, the method comprising: displaying a grid canvas; receiving a component layout operation for a target component in the grid canvas; in response to a component monitoring event triggered by the component layout operation, acquiring first data of the target component under the component layout operation; generating visualization effect data of the target component based on the first data; and updating layout information of the grid canvas based on the visualization effect data, the layout information being used for grid canvas rendering.

[0025] According to a fifth aspect of the present disclosure, a computer program product is provided, including a computer program that, when executed by a processor, implements the data visualization method described above.

[0026] The technical solutions provided by the embodiments of this disclosure may include the following beneficial effects:

[0027] This disclosure captures user interaction events and generates visualization data in real time, enabling real-time updates to the grid canvas layout. This ensures immediate feedback to user actions, making data visualization more intuitive and efficient. Furthermore, this solution simplifies the visualization setup process. Through a structured grid canvas, real-time response, automated effect generation, and consistent layout updates, it significantly improves the flexibility, accuracy, and scalability of visualizations, providing users with an intuitive and engaging visualization experience.

[0028] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and are not intended to limit this disclosure. Attached Figure Description

[0029] The accompanying drawings, which are incorporated in and form a part of this specification, illustrate embodiments consistent with this disclosure and, together with the description, serve to explain the principles of this disclosure.

[0030] Figure 1 This is a flowchart illustrating a data visualization method according to some embodiments of the present disclosure.

[0031] Figure 2 This is a flowchart illustrating a data visualization method according to some embodiments of the present disclosure.

[0032] Figure 3This is a flowchart illustrating the generation of visualization effect data for a target component in a data visualization method according to some embodiments of the present disclosure.

[0033] Figure 4 This is a flowchart illustrating a data visualization method according to some embodiments of the present disclosure.

[0034] Figure 5 This is a flowchart illustrating the generation of visualization effect data for a target component in a data visualization method according to some embodiments of the present disclosure.

[0035] Figure 6 This is a flowchart illustrating collision detection in a data visualization method according to some embodiments of the present disclosure.

[0036] Figure 7 This is a flowchart illustrating a data visualization method in response to a canvas size adjustment operation, according to some embodiments of the present disclosure.

[0037] Figure 8 This is a block diagram illustrating a data visualization apparatus according to some embodiments of the present disclosure.

[0038] Figure 9 This is a block diagram illustrating an apparatus for data visualization according to some embodiments of the present disclosure. Detailed Implementation

[0039] Exemplary embodiments of this disclosure will be described in detail herein, examples of which are illustrated in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings denote the same or similar elements unless otherwise indicated. Various changes, modifications, and equivalents of the methods, apparatus, and / or systems described herein will become apparent upon understanding this disclosure. For example, the order of operations described herein is merely illustrative and is not limited to those orders set forth herein, but can be changed as will become apparent upon understanding this disclosure, except for operations that must be performed in a particular order. Furthermore, for clarity and brevity, descriptions of features known in the art may be omitted.

[0040] The embodiments described below, which are examples of some of the embodiments of this disclosure, do not represent all embodiments consistent with this disclosure. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this disclosure as detailed in the appended claims.

[0041] The specific implementation methods of the embodiments of this disclosure will now be described in detail with reference to the accompanying drawings.

[0042] Figure 1This is a flowchart illustrating a data visualization method according to some embodiments of the present disclosure, such as... Figure 1 As shown, data visualization methods may include the following steps.

[0043] In step S110, a grid canvas is displayed.

[0044] In this embodiment, the grid canvas serves as the foundation for component layout and visualization. The grid canvas can have parameters such as size, row height, margins, and component spacing. It can be a two-dimensional, scrollable grid layout area with a fixed or dynamically sized grid, acting as a layout environment for precisely placing and arranging components. Front-end frameworks (such as React and Vue) and graphics libraries can be used to create and render the grid canvas.

[0045] In an exemplary embodiment, a canvas engine component such as ReactGridLayout can be used to create and display a grid layout area, which serves as the grid canvas for the user to lay out components. The grid canvas provides a flexible layout framework, allowing users to arrange and organize visual components according to grid cells. ReactGridLayout is a React-based grid layout system that provides functionality similar to Packery or Gridster, supporting drag-and-drop and resizing operations. During the display of the grid canvas, ReactGridLayout or a similar grid layout component can be initialized, setting parameters such as the number of rows, columns, and spacing.

[0046] In step S120, a component layout operation for the target component in the grid canvas is received.

[0047] In this embodiment, users can change the layout of a target component on a grid canvas through operations such as dragging, scaling, and rotating. These operations can be direct physical operations (e.g., using a mouse or touchscreen) or indirect command input (e.g., via keyboard shortcuts or menu options). User operation events can be listened to, such as native DOM events like mousedown, mousemove, and mouseup, to capture and process layout changes.

[0048] In this embodiment of the disclosure, the user can manipulate existing components on the canvas, such as dragging them to change their position or using the resizing tool to change the size of the components. The user can also drag new components from outside the canvas and place them on the canvas. These operations can all be captured, received, and recorded.

[0049] In step S130, in response to a component monitoring event triggered by the component layout operation, the first data of the target component under the component layout operation is obtained.

[0050] In this embodiment of the disclosure, when a user performs layout operations on a component, component monitoring events can be triggered. These events can be used to capture the latest state and data of the component (i.e., the first data of the target component), such as new position, size, etc.

[0051] In an exemplary embodiment, event listeners, such as onChange and onDragEnd, can be bound to components to capture data generated by layout operations. Binding event listeners to components can involve attaching specific component-monitored events and corresponding event handlers to the component, so that when an operation matches an event, the event is triggered, thereby triggering the execution of the corresponding event handler. In this step, after the event handler corresponding to the component's monitored event is executed, the first data of the target component under the component layout operation can be obtained.

[0052] In addition, state management tools (such as Redux, Vuex, etc.) can be used to store and update the state of components, i.e., the first data obtained.

[0053] In an exemplary embodiment, if a grid canvas is created based on ReactGridLayout or a similar engine component, the event callback function provided by the engine can be used to capture data during or after the layout operation, and the acquired data can be stored in the component's state array.

[0054] In step S140, visualization effect data of the target component is generated based on the first data.

[0055] In this embodiment of the disclosure, first data can be used to calculate and generate visualization effect data for the target component, which may include steps such as data transformation, calculating layout position, and applying styles. The visualization effect data may be descriptive information about the target component's attributes such as color, size, position, and lighting effects.

[0056] In an exemplary embodiment, visualization data can be calculated using appropriate algorithms or functions based on the type and attributes of the component. For example, shadow or highlight effects can be calculated based on the component's new position and size.

[0057] In step S150, the layout information of the grid canvas is updated according to the visualization effect data, and the layout information is used for grid canvas rendering.

[0058] In this embodiment of the disclosure, the layout information may include the size information of the grid canvas itself, the position, size, style, etc. of all components in the grid canvas, for use in rendering the final grid canvas. Visualization data can be applied to the rendering logic of the grid canvas, for example, by using rendering functions from a graphics library or front-end framework to re-render the grid canvas to reflect the latest layout information.

[0059] In an exemplary embodiment, visualization data can be applied to the layout properties of a ReactGridLayout or similar component, and then the component can be re-rendered to ensure that the layout on the grid canvas is consistent with the user's actions.

[0060] As can be seen from the above steps, the data visualization method provided in this disclosure can trigger component monitoring events bound to the target component during component layout operations. The first data of the target component under the component layout operation can be obtained through these monitoring events. Then, visualization effect data of the target component is generated based on the first data, and the layout information of the grid canvas used for grid canvas rendering is updated based on the visualization effect data. Therefore, this solution provides a dynamic visualization method that allows users to perform a large amount of real-time interaction and instantly display data changes, significantly improving the user experience. On the one hand, this solution can capture user operation events and instantly generate visualization effect data, thereby updating the grid canvas layout in real time, ensuring immediate feedback to user operations, and making data visualization more intuitive and efficient. On the other hand, this solution simplifies the process of setting visualization effects, allowing users to focus more on layout and component configuration. Furthermore, through structured grid canvas, real-time response, automated effect generation, and consistent layout updates, it greatly improves the flexibility, accuracy, and scalability of visualization, providing users with an intuitive and attractive visualization experience.

[0061] Figure 2 This is a flowchart illustrating a data visualization method according to some embodiments of the present disclosure.

[0062] In this embodiment of the disclosure, Figure 2 In the data visualization method shown, steps S210, S250, and S260 are respectively related to... Figure 1 Steps S110, S140, and S150 in the data visualization method shown correspond to each other and will not be repeated here.

[0063] In some embodiments of this disclosure, in Figure 1 Based on the data visualization method shown, Figure 2 The data visualization method shown may also include the following steps.

[0064] In step S220, a component movement operation for the target component in the grid canvas is received.

[0065] In this embodiment of the disclosure, the component movement operation is a type of component layout operation.

[0066] In step S230, in response to a displacement monitoring event bound to the target component triggered by the component movement operation, the displacement coordinates of the target component under the component movement operation are obtained.

[0067] In this embodiment of the disclosure, when a component movement operation occurs, the system can immediately respond to the displacement monitoring event bound to the target component, continuously triggering the execution of the time processing logic corresponding to the displacement monitoring event. This event mechanism ensures the immediate capture and feedback of user operations. Through the displacement monitoring event, the displacement coordinates of the target component during the movement process can be continuously obtained; this coordinate data is a crucial foundation for subsequently generating visualization data.

[0068] In an exemplary embodiment, the displacement coordinates may be the mouse click position.

[0069] In step S240, the first data is determined based on the displacement coordinates.

[0070] In this embodiment of the disclosure, displacement coordinates can be used as the first data to reflect the absolute position information of the component relative to the browser where the grid canvas is located.

[0071] Through the embodiments of this disclosure, real-time response and accurate processing of user operations can be achieved through steps such as component movement operation, displacement monitoring event, obtaining displacement coordinates, and determining first data.

[0072] Figure 3 This is a flowchart illustrating the generation of visualization effect data for a target component in a data visualization method according to some embodiments of the present disclosure.

[0073] like Figure 3 As shown, in some embodiments of this disclosure, generating visualization data of the target component based on the first data may include the following steps.

[0074] Step S310: Obtain the grid configuration information of the grid canvas.

[0075] In this embodiment of the disclosure, the grid canvas serves as the basis for component placement and arrangement in the data visualization method. The grid configuration information may include key parameters such as the number of rows and columns of the grid canvas, the size of each grid cell, and the spacing. Obtaining this grid configuration information allows for convenient conversion of displacement coordinates into grid coordinates in subsequent steps.

[0076] Step S320: Use the grid configuration information to convert the displacement coordinates into grid coordinates.

[0077] In this embodiment of the disclosure, grid configuration information can be used to convert displacement coordinates into grid coordinates, so as to more accurately locate the position of the component in the grid canvas. Among them, the grid coordinates converted based on pixel position information (i.e., displacement coordinates) are more suitable for use in flexible layouts (such as responsive web design).

[0078] Step S330: Obtain the movement effect style corresponding to the target component, associate the movement effect style with the grid coordinates, and generate the visualization effect data of the target component.

[0079] In this embodiment of the disclosure, different components may have different movement effect styles, such as smooth movement, bouncing effect, shadow effect that moves with the component, border highlighting, etc. Components may also have corresponding placeholder images that are easier to render. The movement effect style corresponding to the target component can be obtained so that these styles can be applied when generating visualization effect data.

[0080] Linking motion effect styles to grid coordinates means that when a component moves to a new grid position, the corresponding motion effect style can be applied, making the component's movement look more natural, smooth, and vivid.

[0081] Furthermore, the visualization data can include all visual information about the component during its movement, such as position, size, transparency, and animation effects. This visualization data can then be used to update the layout information of the grid canvas, allowing users to see the final effect after the component has moved.

[0082] In this embodiment of the disclosure, by obtaining grid configuration information, converting displacement coordinates into grid coordinates, obtaining movement effect styles, associating movement effect styles with grid coordinates, and generating visualization effect data, the precise processing of target component movement operations and the generation of visualization effects are achieved, providing users with a more intuitive and smooth visualization experience.

[0083] In an exemplary embodiment, the data visualization method further includes: obtaining a component placeholder image of the target component; associating the component placeholder image with the grid coordinates to generate visualization effect data of the target component.

[0084] In this way, the component placeholder map can be used to replace the original component for display based on continuously updated grid coordinates, resulting in less rendering resources.

[0085] In an exemplary embodiment, for an existing component in a grid canvas, when the existing component is dragged in the canvas, the events that can be triggered may include: onDragStart (drag start event), onDrag (drag event), and onDragStop (drag stop event).

[0086] The onDragStart event can be triggered when an existing component in the grid canvas begins to be dragged. The initial position coordinates of the existing component can be returned through the event callback mechanism.

[0087] The `onDrag` event continuously fires as an existing component in the grid canvas is dragged, returning the component's latest position coordinates (i.e., displacement coordinates) in real time for updating the component's position. This can be achieved by obtaining pixel information about the element's movement in real time via mouse or touch points, then converting it to [x, y] coordinates relative to the canvas (i.e., grid coordinates). Furthermore, in some application scenarios where components must not exceed the canvas's boundaries, a boundary value detection mechanism can be set at the canvas code level to ensure that the component's coordinates remain within the canvas during movement.

[0088] For the onDragStop event, you can determine when the component stops dragging by listening to the mouseup mouse event or touchend touch event. The onDragStop event will be triggered, at which point you can determine whether the component has been placed in the canvas area and perform the corresponding subsequent save operations.

[0089] In an exemplary embodiment, for a new component that is about to be dragged into the grid canvas, when the new component is dragged in the grid canvas, the events that can be triggered may include: onDragEnter (drag-in event), onDragOver (drag-over event), onDragLeave (drag-away event), and onDrop (component placement event).

[0090] The `onDragEnter` event is triggered when a user drags a new component into the canvas area using the mouse pointer. This signals that the canvas is preparing to respond to user actions, laying the foundation for subsequent event handling. When `onDragEnter` is triggered, the engine recognizes the component as the target object "about to be added." Internally, the engine creates a temporary variable to indicate that a new component is about to be added, recording its index, position, size, and other information. Furthermore, when `onDrop` is triggered, this temporary variable is added to the grid canvas's component collection to mark the completion of the addition operation.

[0091] The onDragOver event is frequently triggered when the user drags a new component across the canvas. This allows for continuous monitoring of user actions and fine-tuning and updating as needed. For example, the canvas scale information of the grid canvas can be obtained, and the original size of the new component can be scaled and adjusted accordingly based on the canvas scale information.

[0092] The onDragLeave event is triggered when the user moves the mouse pointer out of the canvas area. It can be used for cleanup and recovery work (such as deleting temporary variables created in response to the onDragEnter event) to indicate that the new component no longer appears in the grid canvas area.

[0093] The `onDrop` event is triggered when a new component is dragged and placed onto the canvas. Based on the new component's index key, its basic information can be accurately added to the `Layouts` collection (the collection of components in the grid canvas), indicating that the component has been successfully added to the canvas. Through the event's callback function, complete information about the latest collection of components in the canvas can be obtained, allowing for appropriate layout processing or updates.

[0094] In addition, it can proactively send onDrop event notifications to upper-layer applications and pass the updated Layouts collection information to the upper-layer business so that they can use and process it subsequently.

[0095] In an exemplary embodiment, the grid coordinate information of the target component during a component movement operation can be determined in the following manner. This is illustrated using the example of a new component dragged in from outside the grid canvas.

[0096] When the target component is dragged into the grid canvas, the onDragEnter event is triggered, and the dragEnterCounter flag is incremented by 1. Then, as the component moves on the grid canvas, the onDragOver event is triggered continuously. The component's coordinates relative to the target placement can be calculated using the following code:

[0097] const{clientX,clientY}=e.nativeEvent;

[0098] const dropTarget=this.ref.current? .getBoundingClientRect()? ? {left:0,top:0};

[0099] const offsetX=(clientX-dropTarget.left) / transformScale;

[0100] const offsetY=(clientY-dropTarget.top) / transformScale;

[0101] This code mainly handles the logic flow in an event function. (1) From the nativeEvent property of the event object e, the values ​​of clientX and clientY can be extracted. These two values ​​represent the coordinates of the mouse click position relative to the entire browser window. Here, the mouse click position is equivalent to the starting point of the component's drag.

[0102] (2) Call the `this.ref.current?.getBoundingClientRect()` method to obtain the position information of the current element (i.e., the target component). If the element exists and has position data, this information can be assigned to the `dropTarget` variable; otherwise, the default values ​​`{left:0,top:0}` can be used instead. Here, `left` and `top` obtained through `getBoundingClientReact` are the relative position information of the component with respect to the top-left corner of the viewport.

[0103] (3) Calculate the offset of the mouse click position relative to the element's position, and divide this offset by the value of transformScale to obtain two results: offsetX and offsetY. Here, offsetX and offsetY are equivalent to the absolute offset of the mouse click position relative to the top-left corner of the target component. The value of transformScale represents the scaling factor of the element in the horizontal and vertical directions, and can be used to control the scaling effect of the element. Unless otherwise specified, the value of transformScale can be 1.

[0104] (4) Combine the calculated offset with the event object e (i.e., the target component) to construct a new object droppingPosition containing left and top properties. This object will be output as a position result of the target component, indicating the specific position where the element is dragged and dropped. Here, droppingPosition is position information relative to the grid canvas, that is, the coordinate information of the component relative to the target placement.

[0105] Next, the relative positioning target coordinate information of the components can be converted into rasterized data (i.e., grid coordinates) that meet the requirements of flexible layout. This can be achieved using the following code:

[0106] export function calcXY(positionParams:PositionParams,top:number,left:number,w:number,h:number):(x:number,y:number}

[0107] const{margin,cols,rowHeight,maxRows}=positionParams;

[0108] / / The following is how to obtain the horizontal granularity value of the canvas.

[0109] const colWidth=calcGridColWidth(positionParams);

[0110] let x=round((left-margin[0]) / (colwidth+margin[0]), 9);

[0111] let y=round((top-margin[1]) / (rowHeight+margin[1]), 9);

[0112] / / The following is the boundary value processing

[0113] x = clamp(x, 0, cols-w);

[0114] y=clamp(y,0,maxRows-h);

[0115] return {x, y};

[0116] This code defines a function called calcXY, which is used to calculate the position coordinates of an element in a grid layout.

[0117] Inside the function, the `positionParams` object is first deconstructed to extract properties such as `margin` (outer margin, the blank area around the element), `cols` (number of columns, the number of columns in the canvas), `rowHeight` (row height, the height of each row), and `maxRows` (maximum number of rows, the maximum number of rows the canvas can hold). Then, the `calcGridColWidth` function is called to calculate `colWidth` (column width, the width of each column). The `positionParams` object is a private object within the engine, storing information such as canvas width and height, row width, column width, and outer margin. It is used to convert absolute units (px) relative to the browser to private units relative to the canvas. This enables responsive layout functionality, meaning that internal components change accordingly when the canvas size changes.

[0118] Next, calculate the values ​​of x and y using the following formulas:

[0119] x=(left-margin[0]) / (colWidth+margin[0])

[0120] y=(top-margin[1]) / (rowHeight+margin[1])

[0121] During the calculation process, the `round` function can be used to retain nine decimal places to address the issue of precision loss during dragging. Finally, the `clamp` function is used to constrain the calculated x and y values ​​within a certain range, preventing them from exceeding the boundaries of the grid layout. The final result returns an object containing the calculated x and y values, which represents the component's coordinates relative to the canvas—that is, the grid coordinates.

[0122] Figure 4 This is a flowchart illustrating a data visualization method according to some embodiments of the present disclosure.

[0123] In this embodiment of the disclosure, Figure 4 In the data visualization method shown, steps S410, S450, and S460 are respectively related to... Figure 1 Steps S110, S140, and S150 in the data visualization method shown correspond to each other and will not be repeated here.

[0124] In some embodiments of this disclosure, in Figure 1 Based on the data visualization method shown, Figure 4 The data visualization method shown may also include the following steps.

[0125] In step S420, a component size adjustment operation is received for the target component in the grid canvas.

[0126] In this embodiment of the disclosure, the component size adjustment operation is one of the component layout operations.

[0127] In step S430, in response to a component size monitoring event bound to the target component triggered by the size adjustment operation, the updated component size of the target component under the size adjustment operation is obtained.

[0128] In step S440, the first data is determined based on the component update size.

[0129] In this embodiment of the disclosure, when a component layout operation (i.e., resizing) is performed, a monitoring event bound to the component can be triggered. This monitoring event can be specifically used to monitor changes in component size. In response to the monitoring event triggered by this resizing operation, the new size information of the target component under the resizing operation can be obtained. This new size information is the "component updated size". The obtained component updated size can be used as "first data" for subsequent data visualization or processing.

[0130] This disclosure illustrates that when a component size adjustment operation is performed, the new size of the component can be obtained by monitoring events, and this new size can be determined as key data (i.e., "first data") for subsequent processing or visualization.

[0131] Figure 5 This is a flowchart illustrating the generation of visualization effect data for a target component in a data visualization method according to some embodiments of the present disclosure.

[0132] like Figure 5 As shown, in some embodiments of this disclosure, generating visualization data of the target component based on the first data may include the following steps.

[0133] Step S510: Obtain the canvas ratio information of the grid canvas.

[0134] In this embodiment of the disclosure, during the data visualization process, the grid canvas serves as the basis for the background and layout and may have the attribute of canvas proportion information, which typically involves parameters such as the width, height, resolution, and scaling ratio of the canvas.

[0135] Step S520: Use the canvas ratio information to convert the component update size into a grid-fit size.

[0136] In this embodiment of the disclosure, once the canvas scale information is available, this information can be used to convert the component update size (i.e., the part about the component size in the first data) into a grid-fitted size to ensure that the component size can match the scale of the grid canvas, thereby maintaining the accuracy and consistency of the visualization.

[0137] Step S530: Obtain the size adjustment effect style corresponding to the target component, associate the size adjustment effect style with the mesh adaptation size, and generate the visualization effect data of the target component.

[0138] In this embodiment of the disclosure, in addition to size information, the visualization effect of the component may also include some style information, such as color, border, shadow, etc. The size adjustment effect style corresponding to the target component can be obtained; these styles may be predefined, or they may be based on user settings or dynamically calculated.

[0139] The acquired size adjustment style is associated with the grid adaptation size. This association generates the final visualization data for the target component, which can include the component's position, size, and style information on the grid canvas. This visualization data is then used to render the component, displaying the final visualization on the user interface.

[0140] In this embodiment of the disclosure, it is described that in a data visualization method, visualization effect data of a target component can be generated based on the component's updated size (first data) and the scale information and size adjustment effect style of the grid canvas. This process ensures that the component can correctly adapt to the canvas scale and style requirements during visualization, thereby presenting an accurate and aesthetically pleasing visualization effect.

[0141] In an exemplary embodiment, the data visualization method may further include: obtaining a component placeholder image of the target component; and displaying the component placeholder image based on a continuously updated grid-adapted size, instead of displaying the changes of the target component under component size adjustment operations.

[0142] In this way, the component placeholder map can be used to replace the original component for display based on the continuously updated mesh size, resulting in less rendering resources.

[0143] Figure 6 This is a flowchart illustrating collision detection in a data visualization method according to some embodiments of the present disclosure.

[0144] like Figure 6 As shown, in some embodiments of this disclosure, the data visualization method may further include the following steps regarding collision detection.

[0145] Step S610: After the component layout operation is completed, obtain the component stacking indication information of the grid canvas.

[0146] In this embodiment of the disclosure, the grid canvas may also include other components, and the position and size of these other components need to be taken into account when performing component layout operations.

[0147] In this embodiment of the disclosure, after the component layout operation is completed, component stacking indication information of the grid canvas can be obtained. This information is used to indicate whether components are allowed to stack (i.e. overlap) on the grid canvas. Then, it can be determined whether collision detection is required based on this information.

[0148] In some embodiments of this disclosure, in response to the display carrier of the grid canvas being a business intelligent dashboard, the component stacking indication information of the grid canvas is set to disallow stacking; in response to the display carrier of the grid canvas being a large visualization screen, the component stacking indication information of the grid canvas is set to allow stacking.

[0149] This disclosure embodiment may involve two application scenarios:

[0150] Scenario 1: BI Dashboard (Business Intelligence Dashboard) application scenario. The BI dashboard adopts a responsive and flexible layout without a fixed canvas size, and automatically fills the space (i.e., the grid canvas area) by default. Components are arranged in a tiled manner and cannot overlap each other. Furthermore, collision detection is required for any movement or resizing of components to ensure layout rationality.

[0151] Scenario 2: Visual dashboard application scenario. The canvas size of the visual dashboard is absolutely fixed but can be freely adjusted according to the user. Unlike BI dashboards, the position and size of components in a visual dashboard need to be decoupled from the canvas and require greater certainty. Furthermore, to make the layout clearer and more orderly, a hierarchical sequence needs to exist between components by default.

[0152] Specifically, the design for the BI dashboard needs to ensure that components can be tiled to meet users' expectations for space utilization. Therefore, when new components are dragged in, existing components are moved, or components are scaled, the `compact` function will be called to perform collision detection and rearrangement operations to ensure their proper position on the dashboard.

[0153] Furthermore, to meet the above requirements and simplify usage, only one switch needs to be exposed to the business side: the `allowStack` parameter (component stacking indicator). In visualization dashboards, when the business side passes the `allowStack` parameter to `true`, it means that the component stacking indicator of the grid canvas is set to allow stacking. This disables collision detection between components and simultaneously enables the `preventCollision` property, allowing components to overlap, thus meeting specific design requirements. In Kanban scenarios, by setting `allowStack` to `false`, the component stacking indicator of the grid canvas is set to disallow stacking, disabling the `preventCollision` property and ensuring that components are presented in a tiled, non-overlapping manner, maintaining a clear and standardized layout.

[0154] Step S620: In response to the component stacking indication information indicating that stacking is not allowed, collision detection is performed on the target component and the other components.

[0155] In this embodiment of the disclosure, the purpose of collision detection is to check whether the target component will overlap with other components after it has been moved or resized.

[0156] Step S630: In response to the presence of collision detection, rearrange the other components based on the first data to obtain the updated mesh coordinates of the other components.

[0157] In this embodiment of the disclosure, if collision detection occurs, i.e., the target component overlaps with other components, the other components can be rearranged based on the first data (which may include information such as the new position and size of the target component) to ensure that all components can be displayed correctly on the grid canvas without overlapping.

[0158] Step S640: Update the layout information of the grid canvas according to the updated grid coordinates of the other components.

[0159] In this embodiment of the disclosure, after rearranging other components, the updated grid coordinates of these components can be obtained, and then the layout information of the grid canvas can be updated according to these updated grid coordinates, thereby ensuring the accuracy and consistency of the visualization effect.

[0160] Through the embodiments of this disclosure, when there are multiple components on the grid canvas, steps such as obtaining component stacking indication information, performing collision detection, rearranging other components, and updating grid coordinates and layout information can be used to ensure that all components can be correctly displayed based on the business requirements of the corresponding scenario during the visualization process, without overlapping or confusion.

[0161] Figure 7 This is a flowchart illustrating a data visualization method in response to a canvas size adjustment operation, according to some embodiments of the present disclosure.

[0162] In some embodiments of this disclosure, the data visualization method may further include the following steps.

[0163] Step S710: Receive a canvas size adjustment operation for the grid canvas.

[0164] In this embodiment of the disclosure, the canvas size adjustment operation can originate from user operation or be triggered by a program. For example, the user may manually scale the boundaries of the grid canvas, or the grid canvas displayed on one carrier may be sent to another carrier with a different screen size for display. In an exemplary embodiment, the canvas size adjustment operation can be implemented through controls, shortcut keys, mouse dragging, etc., on the user interface.

[0165] In an exemplary embodiment, adjustment instruction information of the grid canvas can be obtained first, and then, in response to the adjustment instruction information of the grid canvas being allowed to be adjusted, the canvas size adjustment operation for the grid canvas can be allowed to be received.

[0166] For example, when a grid canvas is already displayed on a BI dashboard, you can set the adjustment instructions to be disallowed if the BI dashboard remains unchanged.

[0167] Step S720: In response to the canvas monitoring event triggered by the canvas size adjustment operation, obtain the updated canvas size of the grid canvas under the canvas size adjustment operation.

[0168] In this embodiment of the disclosure, a canvas monitoring event can be triggered when the canvas size is adjusted. This event can be used to capture and record information about the canvas size change so that the components on the canvas can be adjusted accordingly in the future.

[0169] In response to canvas monitoring events, the new dimensions of the grid canvas after a canvas resizing operation can be obtained, i.e., the updated canvas size. This size information will include the canvas width, height, and possible resolution, etc.

[0170] Step S730: Rearrange the existing components in the grid canvas according to the updated canvas size to obtain the updated grid coordinates of the existing components.

[0171] In this embodiment of the disclosure, after obtaining the new canvas size information, it can first detect whether component rearrangement is needed, and then, if necessary, rearrange the existing components on the grid canvas according to this size. This rearrangement process may include adjusting the position, size, and possible scaling ratio of the components to ensure that the components can still be displayed correctly under the new canvas size.

[0172] For example, if the grid canvas is set to not allow stacking and the grid canvas adjustment indicator is set to allow adjustment, then after the grid canvas is adjusted from a large area to a small area, the size of the encountered components will not change, so the components may overlap, and a collision will be detected. At this time, the existing components in the grid canvas need to be rearranged.

[0173] For example, since all components need to exist within the grid layout area, when the grid layout is shrunk, some components may appear outside the shrunk grid layout area. In this case, these components need to be rearranged to ensure that the components always remain within the grid layout area.

[0174] Step S740: Update the layout information of the grid canvas according to the updated grid coordinates of the existing components.

[0175] In this embodiment of the disclosure, after rearranging existing components, the new coordinates of these components on the grid canvas can be obtained, i.e., the grid coordinates are updated. This coordinate information is used to update the layout information of the grid canvas to ensure that all components on the canvas can be displayed correctly under the new size and layout, thereby maintaining the accuracy and consistency of data visualization.

[0176] Through the embodiments of this disclosure, when the size of the grid canvas needs to be adjusted, the accuracy and consistency of the visualization effect can be ensured by steps such as responding to canvas monitoring events, obtaining updated sizes, rearranging existing components, and updating layout information.

[0177] In an exemplary embodiment, the data visualization method may further include: in response to the triggering of a canvas size adjustment event (i.e., a canvas monitoring event) bound to the grid canvas, triggering a layout size change processing event bound to the canvas; invoking the processing logic of the layout size change processing event to pass the target canvas size at the end of the size adjustment to a preset business caller.

[0178] Among them, the business caller can subscribe to layout size change processing events as needed, so as to be informed in a timely manner that the size of the grid canvas has changed, and then execute the configured processing method.

[0179] In some embodiments of this disclosure, the data visualization method further includes: registering a monitoring event to be configured bound to a configurable operation object; wherein the configurable operation object is a grid canvas object or a component object; determining a data processing function configured for the monitoring event to be configured; and encapsulating the monitoring event to be configured and the corresponding data processing function into the configurable operation object.

[0180] In this embodiment of the disclosure, the object to be configured for operation can be a grid canvas object, which represents the entire background area of ​​the visualization; or it can be a component object, which is an element that constitutes the visualization content, such as charts, buttons, text boxes, etc. Registering events means that the system can start listening for specific interactions that may occur on these objects, such as clicks, drags, keyboard input, etc.

[0181] For each registered monitoring event, a corresponding data processing function can be configured. The data processing function is a code block that is called when the event occurs, responsible for processing the event data and updating the visualization status or performing other operations as needed.

[0182] The monitoring events to be configured and their corresponding data processing functions can be encapsulated within the operation object to be configured. Encapsulation is a programming technique that allows data and the code that operates on that data to be combined into a single, reusable unit. Encapsulation ensures that the correct data processing function is automatically invoked when an event occurs on the operation object.

[0183] This disclosure enables flexible responses to user interactions. When a user interacts with a grid canvas or component, the system captures these interaction events, calls the corresponding data processing functions, and updates the visualization effects according to the function logic. This mechanism allows data visualization to have more user-friendly dynamic and interactive effects, improving the user experience.

[0184] Furthermore, the embodiments disclosed herein can also promote the maintainability and reusability of the functionality of this solution. By encapsulating event and data processing functions together, developers can more easily understand and modify the visualization logic without worrying about breaking the functionality of other parts. It also makes it easier to extend more functionality for interactive events.

[0185] It should be noted that the above figures are merely illustrative representations of the processes included in methods according to some embodiments of this disclosure, and are not intended to be limiting. It is readily understood that the processes shown in the above figures do not indicate or limit the temporal order of these processes. Furthermore, it is readily understood that these processes may be executed synchronously or asynchronously, for example, in multiple modules.

[0186] The following are embodiments of the apparatus disclosed herein, which can be used to execute embodiments of the method disclosed herein. For details not disclosed in the apparatus embodiments of this disclosure, please refer to the embodiments of the method disclosed herein.

[0187] Figure 8 This is a block diagram illustrating a data visualization apparatus according to some embodiments of the present disclosure. (Refer to...) Figure 8 The device includes: a display unit 801, a receiving unit 802, an acquisition unit 803, a generation unit 804, an update unit 805, a collision detection unit 806, a rearrangement unit 807, an event registration unit 808, and an encapsulation unit 809.

[0188] The display unit 801 is used to display a grid canvas; the receiving unit 802 is used to receive a component layout operation for a target component in the grid canvas; the acquisition unit 803 is used to acquire first data of the target component under the component layout operation in response to a component monitoring event triggered by the component layout operation; the generation unit 804 is used to generate visualization effect data of the target component based on the first data; and the update unit 805 is used to update the layout information of the grid canvas based on the visualization effect data, wherein the layout information is used for grid canvas rendering.

[0189] In some embodiments of this disclosure, the component layout operation includes a component movement operation; wherein, the acquisition unit 803, in response to a component monitoring event triggered by the component layout operation, acquires first data of the target component under the component layout operation, including: in response to a displacement monitoring event bound to the target component triggered by the component movement operation, acquiring the displacement coordinates of the target component under the component movement operation; and determining the first data based on the displacement coordinates.

[0190] In some embodiments of this disclosure, the generation unit 804 generates visualization effect data of the target component based on the first data, including: obtaining grid configuration information of the grid canvas; converting the displacement coordinates into grid coordinates using the grid configuration information; obtaining a movement effect style corresponding to the target component; associating the movement effect style with the grid coordinates; and generating visualization effect data of the target component.

[0191] In some embodiments of this disclosure, the component layout operation is a component size adjustment operation; wherein, the acquisition unit 803, in response to a component monitoring event triggered by the component layout operation, acquires first data of the target component under the component layout operation, including: in response to a component size monitoring event bound to the target component triggered by the size adjustment operation, acquiring the updated component size of the target component under the size adjustment operation; and determining the first data based on the updated component size.

[0192] In some embodiments of this disclosure, the generation unit 804 generates visualization effect data of the target component based on the first data, including: obtaining canvas ratio information of the grid canvas; using the canvas ratio information to convert the component update size into a grid-adapted size; obtaining a size adjustment effect style corresponding to the target component; associating the size adjustment effect style with the grid-adapted size; and generating visualization effect data of the target component.

[0193] In some embodiments of this disclosure, the data visualization device further includes a collision detection unit 806 and a rearrangement unit 807; wherein, the grid canvas also includes other components; after the component layout operation is completed, the acquisition unit 803 is further configured to acquire component stacking indication information of the grid canvas; the collision detection unit 806 is configured to perform collision detection on the target component and the other components in response to the component stacking indication information indicating that stacking is not allowed; the rearrangement unit 807 is configured to rearrange the other components based on the first data in response to the existence of collision detection, and obtain the updated grid coordinates of the other components; the update unit 805 is further configured to update the layout information of the grid canvas according to the updated grid coordinates of the other components.

[0194] In some embodiments of this disclosure, in response to the display carrier of the grid canvas being a business intelligent dashboard, the component stacking indication information of the grid canvas is set to disallow stacking; in response to the display carrier of the grid canvas being a large visualization screen, the component stacking indication information of the grid canvas is set to allow stacking.

[0195] In some embodiments of this disclosure, the receiving unit 802 is further configured to receive a canvas size adjustment operation for the grid canvas; the acquiring unit 803 is further configured to, in response to a canvas monitoring event triggered by the canvas size adjustment operation, acquire the updated canvas size of the grid canvas under the canvas size adjustment operation; the rearrangement unit 807 is further configured to rearrange the existing components in the grid canvas according to the updated canvas size, and obtain the updated grid coordinates of the existing components; the updating unit 805 is further configured to update the layout information of the grid canvas according to the updated grid coordinates of the existing components.

[0196] In some embodiments of this disclosure, the data visualization device further includes an event registration unit 808 and an encapsulation unit 809; the event registration unit 808 is used to register a monitoring event to be configured and bound to a configurable operation object; wherein, the configurable operation object is a grid canvas object or a component object; the acquisition unit 803 is further used to determine the data processing function configured for the monitoring event to be configured; the encapsulation unit 809 is used to encapsulate the monitoring event to be configured and the corresponding data processing function into the configurable operation object.

[0197] Regarding the apparatus in the above embodiments, the specific manner in which each module performs its operation has been described in detail in the embodiments related to the method, and will not be elaborated upon here.

[0198] Figure 9This is a block diagram illustrating an apparatus 900 for data visualization according to some embodiments of the present disclosure. For example, apparatus 900 may be a mobile phone, computer, digital broadcasting terminal, messaging device, game console, tablet device, medical device, fitness equipment, personal digital assistant, etc.

[0199] Reference Figure 9 The device 900 may include one or more of the following components: a processing component 902, a memory 904, a power component 906, a multimedia component 908, an audio component 910, an input / output (I / O) interface 912, a sensor component 914, and a communication component 916.

[0200] Processing component 902 typically controls the overall operation of device 900, such as operations associated with display, telephone calls, data communication, camera operation, and recording. Processing component 902 may include one or more processors 920 to execute instructions to perform all or part of the steps of the methods described above. Furthermore, processing component 902 may include one or more modules to facilitate interaction between processing component 902 and other components. For example, processing component 902 may include a multimedia module to facilitate interaction between multimedia component 908 and processing component 902.

[0201] Memory 904 is configured to store various types of data to support the operation of device 900. Examples of this data include instructions for any application or method operating on device 900, contact data, phonebook data, messages, pictures, videos, etc. Memory 904 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk.

[0202] The power supply component 906 provides power to the various components of the device 900. The power supply component 906 may include a power management system, one or more power sources, and other components associated with generating, managing, and distributing power to the device 900.

[0203] Multimedia component 908 includes a screen that provides an output interface between the device 900 and the user. In some embodiments, the screen may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touchscreen to receive input signals from the user. The touch panel includes one or more touch sensors to sense touches, swipes, and gestures on the touch panel. The touch sensors may sense not only the boundaries of the touch or swipe action but also the duration and pressure associated with the touch or swipe operation. In some embodiments, multimedia component 908 includes a front-facing camera and / or a rear-facing camera. When the device 900 is in an operating mode, such as a shooting mode or a video mode, the front-facing camera and / or the rear-facing camera may receive external multimedia data. Each front-facing camera and rear-facing camera may be a fixed optical lens system or have focal length and optical zoom capabilities.

[0204] Audio component 910 is configured to output and / or input audio signals. For example, audio component 910 includes a microphone (MIC) configured to receive external audio signals when device 900 is in an operating mode, such as call mode, recording mode, and voice recognition mode. The received audio signals may be further stored in memory 904 or transmitted via communication component 916. In some embodiments, audio component 910 also includes a speaker for outputting audio signals.

[0205] I / O interface 912 provides an interface between processing component 902 and peripheral interface modules, such as keyboards, click wheels, buttons, etc. These buttons may include, but are not limited to, home buttons, volume buttons, power buttons, and lock buttons.

[0206] Sensor assembly 914 includes one or more sensors for providing status assessments of various aspects of device 900. For example, sensor assembly 914 may detect the on / off state of device 900, the relative positioning of components such as the display and keypad of device 900, changes in position of device 900 or a component of device 900, the presence or absence of user contact with device 900, orientation or acceleration / deceleration of device 900, and temperature changes of device 900. Sensor assembly 914 may include a proximity sensor configured to detect the presence of nearby objects without any physical contact. Sensor assembly 914 may also include a light sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, sensor assembly 914 may also include an accelerometer, gyroscope, magnetometer, pressure sensor, or temperature sensor.

[0207] Communication component 916 is configured to facilitate wired or wireless communication between device 900 and other devices. Device 900 can access wireless networks based on communication standards, such as WiFi, 3G, 4G, 5G, other communication standards, or combinations thereof. In some embodiments of this disclosure, communication component 916 receives broadcast signals or broadcast-related information from an external broadcast management system via a broadcast channel. In some embodiments of this disclosure, communication component 916 further includes a near-field communication (NFC) module to facilitate short-range communication. For example, the NFC module may be implemented based on radio frequency identification (RFID) technology, Infrared Data Association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology, and other technologies.

[0208] In some embodiments of this disclosure, the apparatus 900 may be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field-programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components to perform the methods described above.

[0209] In some embodiments of this disclosure, a non-transitory computer-readable storage medium including instructions is also provided, such as a memory 904 including instructions that can be executed by a processor 920 of device 900 to perform the above-described method. For example, the non-transitory computer-readable storage medium may be a ROM, random access memory (RAM), CD-ROM, magnetic tape, floppy disk, and optical data storage device, etc.

[0210] A non-transitory computer-readable storage medium, when instructions in the storage medium are executed by a processor of a mobile terminal, enables the mobile terminal to perform a data visualization method, the method comprising: displaying a grid canvas; receiving a component layout operation on the grid canvas for a target component; in response to a component monitoring event triggered by the component layout operation, acquiring first data of the target component under the component layout operation; generating visualization effect data of the target component based on the first data; and updating layout information of the grid canvas based on the visualization effect data, the layout information being used for grid canvas rendering.

[0211] Other embodiments of this disclosure will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not disclosed herein. The specification and examples are to be considered exemplary only, and the true scope and spirit of this disclosure are indicated by the following claims.

[0212] It should be understood that this disclosure is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this disclosure is limited only by the appended claims.

Claims

1. A data visualization method, characterized in that, include: Display grid canvas; Receive component layout operations for the target component in the grid canvas; In response to a component monitoring event triggered by the component layout operation, the first data of the target component under the component layout operation is obtained; Visualization data of the target component is generated based on the first data; The layout information of the grid canvas is updated based on the visualization data, and the layout information is used for grid canvas rendering.

2. The method according to claim 1, characterized in that, The component layout operation includes component movement operation; Specifically, in response to a component monitoring event triggered by the component layout operation, the first data of the target component under the component layout operation is obtained, including: In response to a displacement monitoring event bound to the target component triggered by a component movement operation, the displacement coordinates of the target component under the component movement operation are obtained; The first data is determined based on the displacement coordinates.

3. The method according to claim 2, characterized in that, Based on the first data, visualization data of the target component is generated, including: Obtain the grid configuration information of the grid canvas; The displacement coordinates are converted into grid coordinates using the grid configuration information; Obtain the movement effect style corresponding to the target component, associate the movement effect style with the grid coordinates, and generate the visualization effect data of the target component.

4. The method according to claim 1, characterized in that, The component layout operation is a component size adjustment operation; Specifically, in response to a component monitoring event triggered by the component layout operation, the first data of the target component under the component layout operation is obtained, including: In response to a component size monitoring event bound to the target component triggered by a size adjustment operation, the updated component size of the target component under the size adjustment operation is obtained; The first data is determined based on the updated size of the component.

5. The method according to claim 4, characterized in that, Based on the first data, visualization data of the target component is generated, including: Obtain the canvas scale information of the grid canvas; The component update size is converted into a grid-fit size using the canvas ratio information; Obtain the size adjustment effect style corresponding to the target component, associate the size adjustment effect style with the grid adaptation size, and generate the visualization effect data of the target component.

6. The method according to claim 1, characterized in that, The grid canvas also includes other components; wherein, after the component layout operation is completed, the method further includes: Obtain the component stacking indication information of the grid canvas; In response to the component stacking indication information indicating that stacking is not allowed, collision detection is performed on the target component and the other components; In response to the presence of collision detection, the other components are rearranged based on the first data to obtain the updated mesh coordinates of the other components; The layout information of the grid canvas is updated based on the updated grid coordinates of the other components.

7. The method according to claim 1 or 6, characterized in that, In response to the fact that the display carrier of the grid canvas is a business intelligence dashboard, the component stacking indication information of the grid canvas is set to disallow stacking; In response to the display carrier of the grid canvas being a large visual screen, the component stacking indication information of the grid canvas is set to allow stacking.

8. The method according to claim 1, characterized in that, The method further includes: Receive canvas size adjustment operation for the grid canvas; In response to a canvas monitoring event triggered by the canvas size adjustment operation, the updated canvas size of the grid canvas under the canvas size adjustment operation is obtained; The existing components in the grid canvas are rearranged according to the updated canvas size to obtain the updated grid coordinates of the existing components; The layout information of the grid canvas is updated based on the updated grid coordinates of the existing components.

9. The method according to claim 1, characterized in that, The method further includes: Register the monitoring events to be configured and bind them to the operation object to be configured; wherein, the operation object to be configured is a grid canvas object or a component object; The data processing function configured for the monitoring event to be configured is determined; The monitoring events to be configured and the corresponding data processing functions are encapsulated into the operation object to be configured.

10. A data visualization device, characterized in that, include: Display unit, used to display the grid canvas; A receiving unit is configured to receive component layout operations for a target component in the grid canvas; The acquisition unit is used to acquire the first data of the target component under the component layout operation in response to a component monitoring event triggered by the component layout operation; A generation unit is used to generate visualization effect data of the target component based on the first data; An update unit is used to update the layout information of the grid canvas based on the visualization effect data, the layout information being used for grid canvas rendering.

11. An electronic device, characterized in that, include: processor; Memory used to store processor-executable instructions; The processor is configured to implement the steps of the method according to any one of claims 1-9.

12. A non-transitory computer-readable storage medium, wherein instructions in the storage medium, when executed by a processor of a mobile terminal, enable the mobile terminal to perform a data visualization method, the method comprising: Display grid canvas; Receive component layout operations for the target component in the grid canvas; In response to a component monitoring event triggered by the component layout operation, the first data of the target component under the component layout operation is obtained; Visualization data of the target component is generated based on the first data; The layout information of the grid canvas is updated based on the visualization data, and the layout information is used for grid canvas rendering.

Images