Dragging type visual chart component system

Abstract

The invention discloses a drag-and-drop type visual chart component system. The system comprises a data source and format conversion module, a real-time data binding module and a drag-and-drop type interaction module, the dragging type interaction module is used for dragging the selected chart component into a working area; the data source and format conversion module is used for performing format conversion on different collected data, and the real-time data binding module binds the data with a chart component in a working area; and the bound chart component interacts with a user through a user interface. In the invention, the system provides a visual drag-and-drop interaction function, so that the user can easily construct and customize the chart without programming skills. And the user can directly drag the required chart component into the working area, so that the chart creation process is simplified. Depending on the real-time data binding module, the system can automatically refresh the chart component when the data source is updated, so that the user can always obtain the latest data display.

Description

Technical Field

[0001] The present invention belongs to the technical field of data visualization, and specifically relates to a drag-and-drop visualization chart component system. Background Art

[0002] Data visualization is the process of presenting data in a graphical or visual form to facilitate understanding, analysis, and communication of information. Through visual elements such as charts, graphs, and maps, data visualization can help people identify trends, patterns, and anomalies in data, thereby better supporting decision-making and discovering insights. Data visualization can present complex data in an intuitive visual form, making the data easier to understand. Through visual effects, users can quickly identify trends and patterns in the data, thereby effectively communicating information and making the data story more compelling.

[0003] In the prior art, for example, the technical solution described in the patent with publication number CN111427906 is: "A drag-and-drop multi-component hybrid application data visualization system, including a data source management module, a data set management module and a data report management module. The data source management module is used to obtain and save the configuration information of the database type data source, and synchronize the table structure of the selected data table in the database type data source based on the synchronization rules in the configuration information."

[0004] In traditional visualization systems, data visualization functions have problems such as complex operation, poor interactivity, and insufficient real-time performance. Many existing digital twin systems cannot effectively support users' real-time customization and interaction with visualization charts, resulting in users being unable to flexibly display and analyze data during use. Especially for application scenarios that need to reflect changes in the physical world in real time, such as smart manufacturing and smart cities, traditional fixed layouts and display modes cannot meet the needs of dynamic changes. Summary of the invention

[0005] The purpose of the present invention is to provide a drag-and-drop visualization chart component system to solve the problems of complex operation, poor interactivity and insufficient real-time performance of data visualization functions in the prior art mentioned in the background technology.

[0006] In order to solve the above technical problems, the technical solution adopted by the present invention is:

[0007] A drag-and-drop visual chart component system includes a data source and format conversion module, a real-time data binding module and a drag-and-drop interaction module; wherein the drag-and-drop interaction module is used to drag the selected chart component into a workspace; the data source and format conversion module is used to convert the formats of different collected data, unify the formats of the data, and transmit the data after format conversion to the real-time data binding module, the real-time data binding module binds the data to the chart component in the workspace, and through data flow binding, the chart component can automatically refresh when the data is updated;

[0008] The bound chart component interacts with the user through the user interface.

[0009] According to the above technical solution, the data binding of the real-time data binding module is implemented through the subscription and publishing mode, including the following steps:

[0010] Data subscription and distribution: Leverage the advantages of WebSocket two-way communication to achieve efficient data subscription and distribution; while formatting data and pushing it to the workspace, establish a real-time feedback channel, and data updates immediately trigger chart component binding events to ensure that visualization and data are updated synchronously, shortening response delays;

[0011] Data binding mechanism: Hash tables build data and chart mapping relationships, and accurately locate indexes, specifically:

[0012] Map = {DataKey i →Chart i}

[0013] Binding logic:

[0014] Bind(DataKey, Chart)→RealTimeRefresh

[0015] Ensure that data updates drive chart components to refresh in real time, maintain dynamic consistency of visualization, and improve the immediacy of user interaction experience; when data is updated, find the corresponding chart according to DataKey and trigger a refresh event; use the incremental update mechanism to update only the changed data.

[0016] According to the above technical solution, automatic refresh is achieved by monitoring the changes in the data stream. Automatic refresh adopts an incremental update algorithm to update only the changed data part without redrawing the entire chart, thereby improving efficiency. The specific steps are as follows:

[0017] Incremental detection:

[0018] Δx=CurrentData-PreviousData

[0019] In the formula, CurrentData is the data value at the current moment, and PreviousData is the data value at the previous moment. The difference between the two accurately captures the data change amount, which is used for subsequent efficient refreshing and positioning of the change interval;

[0020] Refresh calculation:

[0021] UpdateRegion = f(Δx)

[0022] Intelligently calculate the chart update area based on incremental data. f(Δx) is an adaptive mapping function that dynamically determines the update range based on data features and chart layout to avoid global redrawing resource waste and optimize rendering performance.

[0023] Update rendering: WebGL or BowellTwin partially updates the chart on demand, accurately draws the changed parts according to the update area instructions, reduces the global rendering calculation overhead, speeds up the refresh process, and ensures the smoothness of chart interaction and visual stability;

[0024] Update rendering: Use WebGL or D3.js to update partial rendering of the chart to reduce global rendering overhead.

[0025] According to the above technical solution, the drag-and-drop interaction module includes a drag-and-drop interaction sub-module and a custom layout sub-module; wherein the drag-and-drop interaction sub-module is used for users to drag charts and update component positions in real time; the custom layout sub-module is used for users to adjust the chart size, position and display mode, including free layout and grid layout switching of charts.

[0026] According to the above technical solution, the data binding of the real-time data binding module includes a JSON data source, a CSV data source and real-time streaming data.

[0027] According to the above technical solution, the data source and format conversion module includes a data conversion submodule and a data processing submodule; wherein the data conversion submodule is used to convert sensor data and monitoring data; the collected data is converted into a data format that can be used in charts through the data conversion submodule; the data processing submodule is used to process missing values ​​and abnormal values ​​in the data to ensure the quality of the data.

[0028] According to the above technical solution, the specific data conversion process is as follows:

[0029] Layered storage: Multi-dimensional monitoring data based on DataLayer i ={x i ,y i , z i}Tiered storage, x i ,y i , z iRepresenting time, space dimensions and attribute fields respectively, the layered architecture improves data management efficiency, accelerates query retrieval, and lays the foundation for complex data processing and analysis;

[0030] Data smoothing: sliding window averaging method:

[0031]

[0032] In the formula, x i is the original data sequence, y t is the smoothed data value, and n is the window width; noise fluctuations are filtered out, trend characteristics are retained, and data stability and visual readability are improved;

[0033] Missing value completion: linear interpolation method, specifically:

[0034]

[0035] In the formula, x t is the completion value, x t-1 、x t+1 is the adjacent known value, t is the current time point, t -1 ,t +1 For adjacent time points; intelligently fill in missing values ​​based on existing data trends to ensure data continuity and integrity and improve the quality of visualized data.

[0036] According to the above technical solution, the chart component system also includes a chart configuration module, which is used to adjust the chart that has completed real-time data binding, and the adjustment includes adjusting the appearance and behavior of the chart; wherein the appearance of the chart includes color, size and label; the behavior includes mouse interaction and feedback of click events.

[0037] According to the above technical solution, the chart component system also includes a saving and sharing module, which is used to visually configure the chart configured by the chart configuration module for later use or sharing.

[0038] According to the above technical solution, the saving and sharing module also includes exporting the chart as a static image, PDF file or generating a sharing link for other users to view.

[0039] Compared with the prior art, the present invention has the following beneficial effects:

[0040] In the present invention, the system provides an intuitive drag-and-drop interactive function, so that users can easily build and customize charts without programming skills. Users can directly drag the required chart components into the workspace, simplifying the process of chart creation. Through the data source and format conversion module, the system can process data from different sources and achieve format unification. Relying on the real-time data binding module, the system can automatically refresh the chart components when the data source is updated, so that users can always get the latest data display. This is especially important for business scenarios that require real-time monitoring and analysis of data. Users can visualize data through a variety of chart components (such as line charts, bar charts, pie charts, etc.), thereby gaining more insights in the data analysis process. The diversity of charts meets the needs of different users and makes the final result more intuitive and easy to understand. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] Figure 1 It is a structural schematic diagram of the drag-and-drop visualization chart component system of the present invention. DETAILED DESCRIPTION

[0042] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0043] Embodiment 1

[0044] The existing visualization system has the following problems in achieving multi-data source fusion, real-time data interaction and efficient data display:

[0045] Inconsistent data formats: Different data sources have different formats, resulting in low data processing efficiency;

[0046] Lack of real-time performance: When data is updated, the entire chart usually needs to be reloaded, resulting in delayed response;

[0047] Poor user interactivity: lack of intuitive drag-and-drop operation and layout adjustment functions, making it difficult to meet users' personalized needs;

[0048] Data quality issues: Missing values ​​and noise in the data are not handled perfectly, affecting the accuracy of the display.

[0049] The present invention provides an innovative solution by introducing technologies such as data normalization, real-time data binding, incremental update algorithms, and drag-and-drop interaction. In the era of big data, data visualization is of great significance for efficient data interpretation and decision-making. Traditional visualization tools often require complex programming and professional knowledge, are cumbersome to operate, and lack flexibility. Existing chart component systems have limitations in data format compatibility, real-time updates, and interactive convenience, and are difficult to meet the needs of rapid processing and dynamic display of multi-source data. The present invention is committed to solving such problems and providing an efficient and easy-to-use visualization solution.

[0050] like Figure 1 As shown, a drag-and-drop visualization chart component system includes a data source and format conversion module, a real-time data binding module and a drag-and-drop interaction module; wherein the drag-and-drop interaction module is used to drag the selected chart component into the workspace; the data source and format conversion module is used to convert the formats of different collected data, unify the formats of the data, and transmit the data after the format conversion to the real-time data binding module, and the real-time data binding module binds the data to the chart component in the workspace. Through data flow binding, the chart component can be automatically refreshed when the data is updated;

[0051] The bound chart component interacts with the user through the user interface.

[0052] In the present invention, the system provides an intuitive drag-and-drop interactive function, so that users can easily build and customize charts without programming skills. Users can directly drag the required chart components into the workspace, simplifying the process of chart creation. Through the data source and format conversion module, the system can process data from different sources and achieve format unification. Relying on the real-time data binding module, the system can automatically refresh the chart components when the data source is updated, so that users can always get the latest data display. This is especially important for business scenarios that require real-time monitoring and analysis of data. Users can visualize data through a variety of chart components (such as line charts, bar charts, pie charts, etc.), thereby gaining more insights in the data analysis process. The diversity of charts meets the needs of different users and makes the final result more intuitive and easy to understand.

[0053] In the present invention, the bound chart components can interact with the user through the interface, and the user can zoom in, zoom out, filter and export the chart, which improves the usability and user experience. The system architecture design allows users to select and add different data sources and chart components according to their needs, making the system have good scalability and can adapt to different types of data analysis needs and user scenarios.

[0054] Embodiment 2

[0055] This embodiment provides a specific implementation method.

[0056] Data format conversion includes the following steps:

[0057] Step 1, data normalization process: The data format conversion module achieves data format unification through the following steps:

[0058] Data extraction: Multi-threading technology is used to crawl MQTT, HTTP and other protocol interface data in parallel. Multi-threaded concurrency greatly reduces the collection time, enhances the real-time performance of the system, and ensures timely acquisition of data.

[0059] Use multi-threaded crawling data sources (such as MQTT, HTTP protocol):

[0060] MQTT data example: sensor data is in time series format (t,v), extracting fields t (timestamp) and v (sensor value);

[0061] HTTP data example: Extract core fields from JSON format data.

[0062] Step 2, format identification: Based on the deeply optimized regular expression matching algorithm, the data source format type is quickly and accurately determined, providing key basis for subsequent processing and adapting to diverse data format environments.

[0063] Step 3, data mapping and conversion: intelligently match source data with target format fields based on predefined field mapping tables to ensure accurate data conversion and integration, and achieve seamless data connection with visualization components. Innovative design of standardized functions

[0064] F(x)=Normalize(Extract(x))

[0065] For the input data source x, Extract(x) accurately extracts the core fields and filters out redundant information. Normalize(x) normalizes it into a JSON or CSV table structure, unifies the format standard, standardizes the data, ensures data consistency and universality, and improves system compatibility and processing efficiency.

[0066] Core algorithm:

[0067] Multi-source data integration: Multi-source data merging function R under dynamic mapping rules, specifically:

[0068]

[0069] In the formula, according to M(x i ) for each single source data x i After mapping and transformation, the complete data set R is accumulated, providing comprehensive and accurate data for data binding.

[0070] The chart configuration module in the present invention provides basic chart components, and users can choose different types of charts (such as line charts, bar charts, pie charts, heat maps, scatter plots, etc.) according to their needs. Each component presets a variety of styles and configuration items, supporting personalized customization of chart size, color, font, legend, etc.

[0071] The drag-and-drop interaction module includes a drag-and-drop interaction submodule and a custom layout submodule; the drag-and-drop interaction submodule is used for users to drag charts and update component positions in real time; the custom layout submodule is used for users to adjust the size, position and display mode of charts, including switching between free layout and grid layout of charts.

[0072] Users can drag the selected chart components into the workspace (canvas) through the interactive interface of the drag-and-drop interactive module, and can freely adjust the position, size and layout. Chart components can be placed arbitrarily on the canvas, and can also be aligned through grid layout or free layout.

[0073] Furthermore, drag interaction includes support for dragging charts with the mouse and updating component positions in real time.

[0074] Furthermore, the custom layout allows users to adjust the chart size, position and display mode, and supports switching between free layout and grid layout.

[0075] The data binding of the real-time data binding module includes JSON data source, CSV data source and real-time streaming data.

[0076] The real-time data binding module allows users to directly bind real-time data sources in the digital twin system (such as sensor data, equipment status, production data, etc.) to visualization components. Through data stream binding, chart components can automatically refresh when data is updated.

[0077] The data binding of the real-time data binding module is implemented through the subscription and publishing mode, including the following steps:

[0078] Data subscription and distribution: Leverage the advantages of WebSocket two-way communication to achieve efficient data subscription and distribution; while formatting data and pushing it to the workspace, establish a real-time feedback channel, and data updates immediately trigger chart component binding events to ensure that visualization and data are updated synchronously, shortening response delays;

[0079] Data binding mechanism: Hash tables build data and chart mapping relationships, and accurately locate indexes, specifically:

[0080] Map = {DataKey i →Chart i}

[0081] Binding logic:

[0082] Bind(DataKey, Chart)→RealTimeRefresh

[0083] Ensure that data updates drive chart components to refresh in real time, maintain dynamic consistency of visualization, and improve the immediacy of user interaction experience; when data is updated, find the corresponding chart according to DataKey and trigger a refresh event; use the incremental update mechanism to update only the changed data.

[0084] Automatic refresh is achieved by monitoring changes in data streams. Automatic refresh uses an incremental update algorithm to update only the changed data without redrawing the entire chart to improve efficiency. The specific steps are as follows:

[0085] Incremental detection:

[0086] Δx=CurrentData-PreviousData

[0087] In the formula, CurrentData is the data value at the current moment, and PreviousData is the data value at the previous moment. The difference between the two accurately captures the data change amount, which is used for subsequent efficient refreshing and positioning of the change interval;

[0088] Refresh calculation:

[0089] UpdateRegion = f(Δx)

[0090] Intelligently calculate the chart update area based on incremental data. f(Δx) is an adaptive mapping function that dynamically determines the update range based on data features and chart layout to avoid global redrawing resource waste and optimize rendering performance.

[0091] Update rendering: WebGL or BowellTwin partially updates the chart on demand, accurately draws the changed parts according to the update area instructions, reduces the global rendering calculation overhead, speeds up the refresh process, and ensures the smoothness of chart interaction and visual stability;

[0092] Update rendering: Use WebGL or D3.js to update partial rendering of the chart to reduce global rendering overhead.

[0093] The data source and format conversion module includes a data conversion submodule and a data processing submodule; the data conversion submodule is used to convert sensor data and monitoring data; the collected data is converted into a data format that can be used in charts through the data conversion submodule; the data processing submodule is used to process missing values ​​and abnormal values ​​in the data to ensure the quality of the data.

[0094] The specific data conversion process is as follows:

[0095] Layered storage: Multi-dimensional monitoring data based on DataLayer i={x i ,y i , z i}Tiered storage, x i ,y i , z i Representing time, space dimensions and attribute fields respectively, the layered architecture improves data management efficiency, accelerates query retrieval, and lays the foundation for complex data processing and analysis;

[0096] Data smoothing: sliding window averaging method:

[0097]

[0098] In the formula, x i is the original data sequence, y t is the smoothed data value, and n is the window width; noise fluctuations are filtered out, trend characteristics are retained, and data stability and visual readability are improved;

[0099] Missing value completion: linear interpolation method, specifically:

[0100]

[0101] In the formula, x t is the completion value, x t-1 、x t+1 is the adjacent known value, t is the current time point, t -1 ,t +1 For adjacent time points; intelligently fill in missing values ​​based on existing data trends to ensure data continuity and integrity and improve the quality of visualized data.

[0102] The detailed technical solution of the data source and format conversion module in this step plays a key role in the entire drag-and-drop visualization chart component system, which is specifically reflected in the following important aspects:

[0103] The core value of the data conversion submodule:

[0104] Ensure data availability: Sensors are widely used in many fields, and the time series data they generate are complex in format and have different standards. The data conversion submodule uses precise parsing, such as extracting key timestamps, measurement values, device status identifiers and other core fields from complex sensor data messages according to strict predefined rules, and converts them into a unified and universal numerical format using normalization and standardization algorithms. This process makes the originally different data consistent and comparable, and can perfectly adapt to the format requirements of various chart components for input data, fundamentally ensuring the availability and effectiveness of data in the visualization process, and laying a solid foundation for subsequent accurate and reliable visualization.

[0105] Improve data quality and visualization accuracy: Standardize data collected from different sensors and in different environments to effectively eliminate data magnitude and accuracy inconsistencies caused by equipment differences, changes in measurement environments, and other factors. For example, in an industrial IoT scenario, temperature data collected by different sensors may have huge differences in raw data performance due to differences in sensor accuracy and measurement range. After being processed by the data conversion submodule, these data are standardized to a comparable standard scale, so that they can accurately reflect data characteristics and changing trends when presented visually, significantly improving the accuracy and reliability of visualization and providing users with accurate decision-making basis.

[0106] Key performance of the data processing submodule:

[0107] Tiered storage optimizes data management: Multi-dimensional monitoring data based on DataLayer i ={x i ,y i , z i}Architecture tiered storage, where x i Accurately represent time dimension information, such as recording the data collection time at the time granularity of seconds, minutes or hours; i Detailed representation of spatial dimension features, such as longitude and latitude coordinates in geographic information system (GIS) applications or spatial layout location identification of equipment in industrial plants; i It comprehensively covers all kinds of attribute fields, such as sensor type, measurement unit of physical quantity and other key attributes. This layered architecture is like building an orderly "data warehouse" for massive and complex data, greatly improving the speed of data retrieval and query. When faced with large-scale medical monitoring data or smart city multi-sensor data, researchers can quickly locate the required data subset based on time range, specific area or attribute field of interest, providing strong support for complex data mining and in-depth analysis operations, and effectively promoting the in-depth expansion of visualization applications.

[0108] Data smoothing to enhance visualization stability: Sliding window averaging method:

[0109]

[0110] In the formula, y t is the smoothed data value at the time point; i=t-n+1 is the starting point of the summation; x i is an element in the original data sequence, and the summation and averaging operations are performed within the sliding window; by i Averaging within a window to obtain the smoothed sequence y t .

[0111] For example, if t = 5 and n = 3, then the summation will start from i = 5-3+1 = 3, that is, from the beginning x3 Sum.

[0112] x i It is the elements in the original data sequence, which are summed and averaged within the sliding window to obtain the smoothed data.

[0113] The sliding window average method reduces data fluctuations by averaging the data within a fixed-size window. This method is widely used in time series analysis, signal processing, and data visualization, and can effectively remove noise and make data trends more obvious. For example, in sensor data processing, in the hospital logistics management environment, various sensors (such as temperature, pressure, flow sensors, etc.) will generate a large amount of real-time data. These data often have certain fluctuations. For example, by processing the data of a temperature sensor, by calculating the sliding average temperature over the past 5 minutes, a more stable temperature trend can be obtained, which is convenient for monitoring the operating status of the equipment and detecting abnormal conditions in a timely manner.

[0114] As an efficient data smoothing strategy, it performs well in processing noisy or volatile data sequences. In the visualization scenario of high-frequency trading data in the financial market, stock price data is affected by factors such as market news and trading algorithm interference, and short-term fluctuations are frequent and drastic. By reasonably setting the window width n, this method can effectively filter high-frequency noise and accurately extract short-term trend signals of stock prices, making the stock price trend in the visualization chart more stable and the trend clearer. This not only enhances the readability of visualization charts and helps investors accurately grasp market trends, but also avoids misleading decisions due to noise interference, and effectively improves the stability and decision-making value of visualization analysis.

[0115] Missing value completion maintains data integrity: In the actual data collection process, data missing problems are common due to sensor failure, network transmission interruption or harsh environment interference. Linear interpolation method:

[0116]

[0117] According to the inherent logic and trend characteristics of the data sequence, we cleverly use the adjacent known data points x t-1 With x t+1 The value and the corresponding time point t -1 ,t +1 Relationship with the current time t, accurate estimation of missing data x t In the meteorological monitoring network, some sensors in remote areas are temporarily disconnected due to extreme weather, resulting in missing data. This method can be used to reasonably supplement the data based on the data trends of surrounding stations to ensure the spatiotemporal continuity and integrity of meteorological data. This provides a complete data foundation for subsequent visualization analysis, avoids the formation of analysis "blind spots" or misinterpretations due to missing data, and effectively maintains the quality of visualization data and the reliability of analysis results.

[0118] The chart component system also includes a chart configuration module, which is used to adjust the chart that has completed real-time data binding, including adjusting the appearance and behavior of the chart; wherein the appearance of the chart includes color, size and label; the behavior includes mouse interaction and feedback of click events.

[0119] The style and behavior of the chart are controlled by the chart configuration module. Users can adjust the appearance (color, size, labels, etc.) and behavior (mouse interaction, click events, etc.) of the chart through a graphical interface.

[0120] Users can customize the color, size, font, etc. of the chart through the UI interface. Users can trigger dynamic updates or other actions of the chart through events such as clicks and hovers.

[0121] The chart component system also includes a saving and sharing module, which is used to visually configure the chart configured by the chart configuration module for later use or sharing.

[0122] The saving and sharing module also includes exporting charts as static images, PDF files, or generating sharing links for other users to view.

[0123] This embodiment provides an optimization algorithm for a drag-and-drop chart component system, which optimizes the operation of the drag-and-drop chart component through the optimization algorithm to provide users with an efficient and intuitive interactive experience.

[0124] The drag-and-drop chart component system uses grid layout, adsorption algorithm and conflict detection mechanism. The following describes in detail the key algorithms of the system and their implementation steps.

[0125] 1. Grid component layout. The grid layout divides the workspace into fixed cells (Grid), and uses an adsorption algorithm to automatically align the dragged components to the nearest grid point. This method not only improves the neatness of the layout, but also significantly reduces the user's operational burden of aligning components.

[0126] Step 1: Grid division: Divide the workspace into m×n grid units and define the coordinates of each grid point as P i (a i ,b i ).

[0127] Step 2, objective function: When the user drags the component to position P drag (x drag ,y drag ), calculate the distance between the component's current position and all grid points, and select the nearest grid point as the target position P grid .

[0128]

[0129] Where P grid Indicates the target location.

[0130] Step 3, adsorption process: When the user releases the mouse, move the center point of the component to P grid , to achieve automatic alignment.

[0131] Assume P drag =(a drag , b drag ), grid point P i =(a i , b i )The distance calculation part of the formula becomes:

[0132] Distance calculation:

[0133]

[0134] Closest point selection:

[0135] P grid =min(||P drag -P i ||),

[0136] Where P drag =(a drag , b drag ) indicates the location of the component after the user drags it, where a drag is the horizontal axis, b drag is the vertical axis.

[0137] Specifically, P i =(a i , b i ) represents any point in the grid, where a i is the horizontal axis, b i is the vertical coordinate. Grid represents the set of all grid points. grid Indicates the target grid point that is finally selected, that is, the location where the component should be placed. ||·|| indicates the distance measure between two points, which is the Euclidean distance here. arg min indicates finding the parameter that minimizes the following expression.

[0138] ||P drag -P i ||This part calculates the drag position; P drag =(a drag , b drag ) and any grid point P i =(a i , b i), the Euclidean distance between them is calculated as: This part is at all grid points P i ∈Grid to find and drag the position.

[0139] P drag The grid point with the smallest distance. That is, traverse all grid points, calculate their distances from the drag position, and find the minimum distance. This part finally determines the target grid point P grid arg min operation returns ||P drag -P i ||The smallest grid point P i This point is the target location where the component should be placed.

[0140] Find the nearest grid point P according to the formula grid , and adsorb the center point of the component to the grid point coordinates, update the layout state of the component and save the position.

[0141] 2. Drag conflict detection: During the dragging process, multiple components may overlap. To ensure the neatness and usability of the interface, the system introduces a conflict detection algorithm to detect and adjust the positions of conflicting components. The conflict detection algorithm includes the following steps:

[0142] Overlapping area detection:

[0143] Define the bounding box of each component as a rectangular area Box i (m i,min ,n i,min ,m i,max ,n i,max ), if the bounding boxes of two components overlap, a conflict occurs.

[0144] Overlapping conditions: two component charts i and Chart j The conditions for the bounding boxes to overlap are:

[0145]

[0146] Wherein, C represents the result of whether the two graphs overlap. If C = 1, it means that the two graphs overlap; if C = 0, it means that the two graphs do not overlap.

[0147] Overlap(Chart i , Chart j ): This is a function that calculates the overlap of two charts.

[0148] m i，max and mi，min :Represents the chart i The maximum and minimum values ​​in a certain direction (similar to the original axis x direction).

[0149] m j，max and m j，min : Respectively represent charts j The maximum and minimum values ​​in the same direction (similar to the original x-axis).

[0150] n i，max and n i，min : Respectively represent charts i The maximum and minimum values ​​in another direction (similar to the original y-axis).

[0151] n j，max and n j，min : Respectively represent charts j The maximum and minimum values ​​in the same direction (similar to the original y-axis).

[0152] Condition Explanation

[0153] m i，max >m j，min This means that the chart i The maximum value in a certain direction is greater than the chart j The minimum value in the same direction. If this condition is not met, then the chart i In this direction, the chart is completely j On one side of the graph, the two graphs do not overlap.

[0154] m j，max >m i，min

[0155] This means that the chart j The maximum value in a certain direction is greater than the chart i The minimum value in the same direction. If this condition is not met, then the chart j In this direction, the chart is completely i On one side of the graph, the two graphs do not overlap.

[0156] n i，max >n j，min

[0157] This means that the chart i The maximum value in the other direction is greater than the chart j The minimum value in the same direction. If this condition is not met, then the chart iIn this direction, the chart is completely j On one side of the graph, the two graphs do not overlap.

[0158] n j，max >n i，min

[0159] This means that the chart j The maximum value in the other direction is greater than the chart i The minimum value in the same direction. If this condition is not met, then the chart j Completely on one side of the chart in this direction, both charts i No overlap.

[0160] Only when all the above conditions are met, that is, the two charts have overlapping parts in both directions, the value of C is 1, indicating that the two charts overlap. Otherwise, the value of is 0, indicating that the two charts do not overlap.

[0161] Adjustment rules: When C>0 (i.e. overlap occurs), the coordinates of the overlapping components are automatically adjusted to move them to the nearest empty grid point:

[0162]

[0163] Where P adjust Indicates the adjusted position. This is where the overlapping components will eventually be moved to.

[0164] P conflict Indicates the current position of the conflicting (overlapping) components.

[0165] EmptyGrid represents the set of all empty grid points.

[0166] P k Represents any point in the set of empty grid points.

[0167] ||·|| represents the distance measure between two points, usually the Euclidean distance.

[0168] argmin means finding the parameter that minimizes the following expression.

[0169] Detailed explanation of the formula:

[0170] ||P k -P conflict ||This part calculates the empty grid point P k The conflicting component position P conflict The distance between.

[0171] Usually, if P conflict =(x conflict,y conflict ) and P k =(x k ,y k ) Then the Euclidean distance is:

[0172]

[0173]

[0174] This part is at all empty grid points P k ∈EmptyGrid to find the component position P that conflicts with conflict The empty grid point with the smallest distance. That is, traverse all empty grid points, calculate their distances from the conflict position, and find the minimum distance.

[0175]

[0176] This part finally determines the adjusted position P adjust arg min operation returns ||P k -P conflict ||The smallest empty grid point P k , this point is the target position where the overlapping components should be moved.

[0177] Implementation steps:

[0178] Step 1: Initialize the component bounding box set {Box1, Box2, …, Boxn}.

[0179] Step 2: When the Charti component is dragged to a new location, check its overlap with other components.

[0180] Step 3: If a conflict occurs (i.e., C>0), the adjustment algorithm is called to move the conflicting component to the nearest empty grid point Padjust, update the new position of the conflicting component, and re-detect the overlap.

[0181] Through the grid adsorption and conflict detection algorithm in the present invention, component overlap problems are avoided through dynamic adjustment and adsorption mechanisms, and efficient layout is achieved. An incremental update mechanism is proposed to optimize the component layout adjustment process.

[0182] Conflict detection can reduce the complexity of bounding box calculation through bounding box calculation, support large-scale component dragging operations, and support multiple drag modes (such as free drag and fixed grid adsorption mode) to enhance system flexibility.

[0183] It realizes smooth movement, intelligent adsorption and real-time adjustment feedback of dragged components, improving the user interaction experience.

[0184] In large-scale visual layout scenarios, the system can intelligently assign component positions to avoid visual clutter.

[0185] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device.

[0186] Finally, it should be noted that the above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art can still modify the technical solutions described in the aforementioned embodiments or replace some of the technical features therein by equivalents. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A drag-and-drop visualization chart component system, characterized in that: It includes a data source and format conversion module, a real-time data binding module and a drag-and-drop interaction module; the drag-and-drop interaction module is used to drag the selected chart component into the workspace; the data source and format conversion module is used to convert the formats of different collected data, unify the data formats, and transmit the data after format conversion to the real-time data binding module, which binds the data to the chart component in the workspace. Through data flow binding, the chart component can automatically refresh when the data is updated; The bound chart component interacts with the user through the user interface.

2. A drag-and-drop visualization chart component system according to claim 1, characterized in that: The data binding of the real-time data binding module is implemented through the subscription and publishing mode, including the following steps: Data subscription and distribution: Data subscription and distribution are realized by taking advantage of WebSocket two-way communication. When formatting data and pushing it to the workspace, a real-time feedback channel is established. Data updates immediately trigger chart component binding events, ensuring that visualization and data are updated synchronously and shortening response delays. Data binding mechanism: Hash tables build data and chart mapping relationships, and accurately locate indexes, specifically: Map={DataKey i →Chart i } Binding logic: Bind(DataKey, Chart)→RealTimeRefresh In the formula, Map represents the mapping relationship; DataKey i Represents a data key value, and the subscript i indicates that this is the i-th element in a set of data key values; Chart i Represents a chart or visualization object. The subscript i indicates that this is the i-th element in a set of charts. Bind is a function used to establish a binding relationship. It accepts two parameters: DataKey and Chart. DataKey represents the data key value or data index, which is used to uniquely identify data. Chart represents a chart or visualization object, which can be a bar chart, line chart, pie chart, and other data visualization forms. RealTimeRefresh is the result of the binding operation, which indicates real-time refresh, which means that when the data identified by DataKey changes, the chart bound to it will be updated immediately. Ensure that data updates drive chart components to refresh in real time, maintain dynamic consistency of visualization, and improve the immediacy of user interaction experience; when data is updated, find the corresponding chart according to DataKey and trigger a refresh event; use the incremental update mechanism to update only the changed data.

3. A drag-and-drop visualization chart component system according to claim 2, characterized in that: Automatic refresh is achieved by monitoring changes in data streams. Automatic refresh uses an incremental update algorithm to update only the changed data without redrawing the entire chart to improve efficiency. The specific steps are as follows: Incremental detection: Δx=CurrentData-PreυiOusData In the formula, CurrentData is the data value at the current moment, and PreviousData is the data value at the previous moment. The difference between the two accurately captures the data change amount, which is used for subsequent efficient refreshing and positioning of the change interval; Refresh calculation: UpdateRegion = f(Δx) Intelligently calculate the chart update area based on incremental data. f(Δx) is an adaptive mapping function that dynamically determines the update range based on data features and chart layout to avoid global redrawing resource waste and optimize rendering performance. Update rendering: WebGL or BowellTwin partially updates the chart on demand, accurately draws the changed parts according to the update area instructions, reduces the global rendering calculation overhead, speeds up the refresh process, and ensures the smoothness of chart interaction and visual stability; Update rendering: Use WebGL or D3.js to update partial rendering of the chart to reduce global rendering overhead.

4. A drag-and-drop visualization chart component system according to claim 3, characterized in that: The drag-and-drop interaction module includes a drag-and-drop interaction submodule and a custom layout submodule; the drag-and-drop interaction submodule is used for users to drag charts and update component positions in real time; the custom layout submodule is used for users to adjust the size, position and display mode of charts, including switching between free layout and grid layout of charts.

5. The drag-and-drop visualization chart component system according to claim 4, characterized in that: The data binding of the real-time data binding module includes JSON data source, CSV data source and real-time streaming data.

6. The drag-and-drop visualization chart component system according to claim 5, characterized in that: The data source and format conversion module includes a data conversion submodule and a data processing submodule; The data conversion submodule is used to convert sensor data and monitoring data; the data conversion submodule converts the collected data into a data format that can be used in charts; the data processing submodule is used to process missing values ​​and abnormal values ​​in the data to ensure the quality of the data.

7. The drag-and-drop visualization chart component system according to claim 6, characterized in that: The specific data conversion process is as follows: Layered storage: Multi-dimensional monitoring data based on DataLayer i ={x i ,y i , z i }Tiered storage, x i ,y i , z i Representing time, space dimensions and attribute fields respectively, the layered architecture improves data management efficiency, accelerates query retrieval, and lays the foundation for complex data processing and analysis; Data smoothing: sliding window averaging method: In the formula, x i is the original data sequence, y t is the smoothed data value, and n is the window width; noise fluctuations are filtered out, trend characteristics are retained, and data stability and visual readability are improved; Missing value completion: linear interpolation method, specifically: In the formula, x t is the completion value, x t-1 、x t+1 is the adjacent known value, t is the current time point, t -1 ,t +1 are adjacent time points; Intelligently fill in missing values ​​based on existing data trends to ensure data continuity and integrity and improve the quality of visualized data.

8. The drag-and-drop visualization chart component system according to claim 7, characterized in that: The chart component system also includes a chart configuration module, which is used to adjust the chart that has completed real-time data binding, including adjusting the appearance and behavior of the chart; wherein the appearance of the chart includes color, size and label; the behavior includes mouse interaction and feedback of click events.

9. The drag-and-drop visualization chart component system according to claim 8, characterized in that: The chart component system also includes a saving and sharing module, which is used to visually configure the chart configured by the chart configuration module for later use or sharing.

10. The drag-and-drop visualization chart component system according to claim 9, characterized in that: The saving and sharing module also includes exporting charts as static images, PDF files, or generating sharing links for other users to view.

Images