Dynamic highlight histogram display and paging management method and device based on React

Abstract

The embodiment of the invention provides a React-based dynamic highlight histogram display and paging management method and device and electronic equipment, and belongs to the technical field of data processing.The method comprises the steps that a histogram set is obtained, a configuration parameter C and a weight parameter W are extracted, and a histogram generation function Fc is set; receiving a user setting parameter Cv, generating matching parameters Cp and Wp, and inputting the Fc to obtain original data Dy; analyzing the Dy to obtain a data processing and rendering task, and splitting the data Dcf according to the time complexity; generating an execution plug-in set P for each thread to obtain display data DP; and segmenting the DP score page sequence according to the data volume Nd of each page, loading corresponding data according to user operation, and displaying the histogram. According to the invention, the flexibility of dynamic highlight histogram setting is improved.

Description

Technical Field

[0001] The present invention relates to the field of data processing technology, and in particular to a method, device and electronic device for dynamically highlighting a bar chart and managing paging based on React. Background Art

[0002] In today's digital information age, data visualization plays a vital role in various fields. As an intuitive and effective way of data visualization, dynamic highlight bar charts are widely used in many scenarios such as data analysis, business intelligence, scientific research, etc., which can help users quickly understand and analyze data. However, the existing React-based dynamic highlight bar chart display and paging management solutions still have many problems in practical applications, which limit their further promotion and use, mainly manifested as follows:

[0003] 1. The learning cost of chart library is high

[0004] There are many chart libraries on the market, such as D3.js, ECharts, etc. D3.js is powerful, but its high flexibility makes its API complex to use. Developers need to have a deep understanding of its data binding and selection mechanism, and the learning curve is steep. For beginners, it is difficult to master its complex API and many concepts (such as selectors, data binding, transition animations, etc.), which undoubtedly increases the development cycle and cost. Although ECharts is relatively simple to configure, for the customization needs of complex charts, developers still need to spend a lot of time to understand its numerous configuration options and callback functions, which also affects the development efficiency to a certain extent.

[0005] 2. Outstanding performance issues

[0006] As the amount of data continues to grow, existing solutions face severe challenges in processing large amounts of data. When processing hundreds of thousands or even millions of data, the rendering and interactive performance of charts will be significantly reduced. Due to the single-threaded nature of JavaScript, when processing large amounts of data, calculation and rendering operations are likely to block the UI thread, causing page freezes and affecting user experience. In addition, although Canvas and SVG are commonly used graphics rendering technologies, performance will be significantly reduced when rendering a large number of elements or performing frequent updates. Although WebGL can provide higher performance, it has high programming complexity and is not suitable or necessary for all projects.

[0007] 3. Poor mobile adaptation

[0008] With the widespread popularity of mobile devices, the demand for data visualization on mobile devices is growing. However, the existing dynamic highlight bar chart display solutions have many problems on mobile devices. On the one hand, some interactive effects (such as dragging and zooming) do not provide a good experience on mobile devices. Since many chart libraries give priority to the desktop environment when designing, they do not provide sufficient support for touch events (such as sliding, zooming, etc.) on mobile devices, which makes it difficult for users to operate. On the other hand, on small-screen devices, chart elements may be too small or the layout may be messy. Although many libraries support responsive design, there are still challenges in layout and interaction design when actually displaying complex charts, which seriously affects users' viewing and analysis of data.

[0009] 4. Poor cross-browser compatibility

[0010] Different browsers have different levels of support for modern Web technologies, which brings compatibility issues to the display of dynamic highlight bar charts. On older versions of browsers, some chart libraries may not work properly or their performance may drop significantly, requiring additional processing of compatibility issues. In addition, different browsers have different levels of support for graphics rendering. When achieving cross-browser compatibility, due to differences in the implementation of graphics rendering standards (such as SVG and Canvas) by different browsers, the chart display effects vary significantly between different browsers, which requires developers to spend a lot of time and energy on debugging and optimization to ensure that the charts can be displayed normally and with consistent effects on various browsers.

[0011] 5. Difficulty in customization

[0012] In actual applications, users have various customization requirements for dynamic highlight bar charts. Although existing chart libraries provide a large number of configuration items, to achieve highly customized charts, developers still need to deeply understand the internal mechanisms of the library and write a lot of code. In order to simplify use, many chart libraries highly encapsulate the internal mechanisms, which makes it difficult for developers to deeply customize and expand. In addition, some libraries have limited support for functional expansion and lack a complete plug-in and extension mechanism. Developers need to write custom plug-ins or extend functions to meet specific needs, which increases the difficulty and workload of development.

[0013] 6. Insufficient documentation and community support

[0014] Documentation and community support are crucial for developers to quickly master and use chart libraries. However, the documentation of some chart libraries is not detailed enough, and the sample code is insufficient, making it difficult for developers to find solutions when they encounter problems. At the same time, the community is not active enough, lacking timely technical support and problem solving, which increases the learning cost and difficulty of developers, making it impossible for developers to get help in time when they encounter difficulties during the development process, affecting the progress of the project.

[0015] The above problems become technical problems that need to be solved. Summary of the invention

[0016] In view of this, an embodiment of the present invention provides a method, device and electronic device for displaying a dynamic highlight bar chart and managing paging based on React, which at least partially solves the problems existing in the prior art.

[0017] In a first aspect, an embodiment of the present invention provides a method for displaying a dynamic highlight bar chart and managing paging based on React, comprising:

[0018] Obtain a dynamic highlight bar graph set P to be displayed, extract configuration parameters of the dynamic highlight bar graph set P, obtain a configuration parameter set C={C1, C2, ..., Cn}, set a weight parameter set W={W1, W2, ..., Wn} corresponding to the configuration parameter set C, and execute a bar graph generation function Fc of the configuration parameter set C and the weight parameter set W;

[0019] Receive the setting parameter Cv input by the user for the histogram in the operation interface, generate the matching configuration parameter Cp∈C and the matching weight parameter Wp∈W of the histogram based on the setting parameter Cv, input the matching configuration parameter Cp and the matching weight parameter Wp into the histogram generation function Fc, and obtain the histogram original data Dy=Fc(Cp,Wp);

[0020] The bar chart original data Dy is parsed to obtain the data processing task Tk1 and the data rendering task Tk2 required for displaying the bar chart, and the time complexity of the data processing task Tk1 is calculated to be O(Tk1) and the time complexity of the data rendering task is O(Tk2). Based on the time complexity of O(Tk1) and the time complexity of O(Tk2), the bar chart original data Dy is converted into split data Dcf executed simultaneously in k different threads;

[0021] Generate a corresponding execution plug-in for each thread running the split data DCF to form an execution plug-in set P={P1, P2, ..., Pk}, and generate the display data DP of the bar chart based on the execution plug-in set;

[0022] The amount of data Nd displayed in each page of the bar chart is obtained, and the display data DP is segmented based on the amount of data Nd to obtain a paging data set sequence D'={D'1, D'2, ..., D'm}, where , Denotes rounding up a numerical value, |DP| represents the number of elements contained in the display data DP. When the user switches the page of the current page with page number p, if the user clicks the previous page, if p > 1, then p = p - 1; if the user clicks the next page, if p < m, then p = p + 1. When the user switches to the q-th page, the corresponding data D’p is loaded from the paging data set sequence D’ according to the page number, and the dynamic highlighted bar chart corresponding to the data of this page is displayed on the page of the q-th page.

[0023] According to a specific implementation manner of an embodiment of the present invention, for obtaining the set P of dynamic highlighted bar charts to be displayed, extracting configuration parameters from the set P of dynamic highlighted bar charts, and obtaining a configuration parameter set C = {C1, C2,..., Cn}, including:

[0024] Traverse each bar chart instance in the set P of dynamic highlighted bar charts, perform a preliminary structural analysis on each instance, and determine the data type and display requirements it contains;

[0025] Extract the data value array C1 related to the bar chart data. This array C1 contains the numerical information represented by each bar in the bar chart and is used to determine the height of the bar;

[0026] Extract the bar color parameter C2 that controls the appearance style of the bar chart, and set the display color of each bar through this parameter C2;

[0027] Obtain the parameter C3 for defining the classification label of the bar chart. The label parameter C3 corresponds to the data value array C1 and is used to identify the category represented by each bar;

[0028] Extract the mouse hover tooltip information parameter C4 related to the chart interaction function, and display the data description by setting the parameter C4 when the user's mouse hovers over the cylinder.

[0029] According to a specific implementation manner of an embodiment of the present invention, for inputting the matching configuration parameter Cp and the matching weight parameter Wp into the bar chart generation function Fc to obtain the original bar chart data Dy = Fc(Cp, Wp), including:

[0030] Perform validity verification on the input matching configuration parameter Cp, check whether the format and value range of the parameter meet the requirements of the bar chart generation function Fc, and perform corresponding correction or prompt an error if they do not meet;

[0031] Organize and combine the verified matching configuration parameter Cp and the matching weight parameter Wp according to the input format of the bar chart generation function Fc to form an input data structure that meets the function requirements;

[0032] Call the bar chart generation function Fc, pass the sorted input data to the function Fc for calculation, and inside the function Fc, start to initialize and calculate the various attributes of the bar chart according to the settings of the configuration parameters and weight parameters;

[0033] After the function Fc completes the calculation, it returns the generated bar chart raw data Dy, which contains all the basic information required to generate the final bar chart.

[0034] According to a specific implementation of an embodiment of the present invention, the parsing of the original bar graph data Dy to obtain the data processing task Tk1 and the data rendering task Tk2 required for displaying the bar graph includes:

[0035] Perform structural analysis on the original data Dy of the bar chart to determine the organizational form of the data and the type of information it contains;

[0036] Extract the task requirements related to data processing from the original data, and organize and summarize the task requirements into data processing tasks Tk1;

[0037] The tasks related to data rendering are separated from the original data, including converting the data into visual elements, setting the styles and attributes of the elements, and thus forming the data rendering task Tk2.

[0038] According to a specific implementation of an embodiment of the present invention, the time complexity of the calculation data processing task Tk01 is O(Tk01) and the time complexity of the data rendering task is O(Tk02). Based on the time complexity of O(Tk01) and the time complexity of O(Tk02), the bar chart original data Dy is converted into split data Dcf executed simultaneously in k0 different threads, including:

[0039] Assume that the data size is s, and the data processing task is used to sort the data. The time complexity O(Tk01) satisfies the formula:

[0040]

[0041] in It represents the asymptotically tight bound of the algorithm, and its time complexity is of the same order as slogs;

[0042] For the data rendering task Tk02, which involves drawing and styling r graphic elements, the time complexity O(Tk02) is expressed by the following formula:

[0043]

[0044] f(i) is a function related to the rendering of the i-th graphic element, which includes the attribute calculation and position adjustment operations of the element;

[0045] Set the comprehensive complexity evaluation function G(O(Tk01), O(Tk02)) to determine the strategy of splitting the bar chart original data Dy into k0 parts, which is defined as:

[0046]

[0047] Where α and β are weight coefficients;

[0048] According to the determined splitting strategy, the original data Dy of the histogram is divided according to the task type and data relevance, and the related data and operations are allocated to different parts to form k0 data subsets;

[0049] Data subset The dependency relationship with other subsets is represented by the dependency matrix R. Representation Subset right The degree of dependence, the dependence matrix R satisfies:

[0050]

[0051] The data subsets that have been divided and added with metadata are combined into split data Dcf. The split data Dcf is stored in a tree row structure. Each node represents a data subset, and the edges between nodes represent data dependencies. Suppose the depth of the tree is h and the number of nodes is k0. The depth h of the tree and the number of nodes k0 satisfy the relationship:

[0052]

[0053] in Indicates a floor operation.

[0054] According to a specific implementation of an embodiment of the present invention, a corresponding execution plug-in is generated for each thread running the split data DCF to form an execution plug-in set P={P1, P2, ..., Pk0}, including:

[0055] For each data subset in the split data Dcf, analyze its corresponding task requirements and functional requirements, determine the specific operations and functions that each thread needs to perform, and for the i-th data subset, its task complexity is expressed by the complexity function To measure:

[0056]

[0057] in is the number of operations associated with this subset of data, is the complexity function of the jth operation, is the relevant parameter of the jth operation;

[0058] According to the tasks and functional requirements of each thread, design the corresponding execution plug-in architecture, determine the plug-in input interface, output interface and internal processing logic framework, and the data format received by the input interface is vector The data format of the output interface is vector , and there is a linear transformation relationship between the input and output, through a matrix express:

[0059]

[0060] in is an r×s matrix, where r and s are the dimensions of the output vector and the input vector respectively. is an offset vector;

[0061] According to the designed execution plug-in architecture, write specific code to implement each execution plug-in, and perform functional tests on each written execution plug-in;

[0062] Add necessary configuration parameters and initialization logic to each execution plug-in so that it can be flexibly configured according to different operating environments and requirements. The configuration parameter set is , containing p parameters The relationship between the performance of the plug-in and the configuration parameters is expressed as a response surface function To describe:

[0063]

[0064] in and e are model parameters.

[0065] According to a specific implementation of the embodiment of the present invention, the data amount Nd displayed in each page of the bar chart is obtained, and the display data DP is divided based on the data amount Nd to obtain a paging data set sequence D'={D'1, D'2, ..., D'm}, including:

[0066] According to the user's operating habits, device screen size and the complexity of the chart, a default initial value of the amount of data displayed on each page Nd is preset;

[0067] Obtain the user-defined data volume set for the bar chart paging display on the operation interface, count the displayed data DP, and determine the number of elements |DP| contained therein;

[0068] According to the formula Calculate the total number of pages m to be divided. Starting from the starting position of the display data DP, divide the data in groups of every Nd elements, and sequentially store the divided data groups as D’1, D’2, …, D’m to form a paged data set sequence D’.

[0069] According to a specific implementation manner of an embodiment of the present invention, loading the corresponding data D’p from the paged data set sequence D’ according to the page number, and displaying the dynamic highlighted bar chart corresponding to the data of this page on the page of the q-th page includes:

[0070] On the user operation interface, set an identification area for displaying the current page number, and display the page number p where the user is currently located in real time;

[0071] When the user triggers a page switching operation, obtain the current page number p and the total number of pages m. According to the page switching rule, update the current page number p. If the user clicks the previous page and p > 1, then update p to p - 1. If the user clicks the next page and p < m, then update p to p + 1;

[0072] According to the updated page number p, find the corresponding paged data D’p from the paged data set sequence D’, and pass the found paged data D’p to the front-end rendering module for rendering;

[0073] On the front-end page, create a container for the q-th page to display the generated dynamic highlighted bar chart, and present the rendered dynamic highlighted bar chart in the container of the q-th page.

[0074] In a second aspect, an embodiment of the present invention further provides a dynamic highlighted bar chart display and paging management device based on React, including:

[0075] An acquisition module that acquires the set P of dynamic highlighted bar charts to be displayed, extracts configuration parameters from the set P of dynamic highlighted bar charts to obtain a configuration parameter set C = {C1, C2, …, Cn}, sets a weight parameter set W = {W1, W2, …, Wn} corresponding to the configuration parameter set C, and a bar chart generation function Fc that executes the configuration parameter set C and the weight parameter set W;

[0076] A receiving module that receives the setting parameter Cv input by the user for the bar chart on the operation interface, generates a matching configuration parameter Cp ∈ C and a matching weight parameter Wp ∈ W for the bar chart based on the setting parameter Cv, and inputs the matching configuration parameter Cp and the matching weight parameter Wp into the bar chart generation function Fc to obtain the bar chart raw data Dy = Fc(Cp, Wp);

[0077] A parsing module parses the original bar chart data Dy to obtain a data processing task Tk1 and a data rendering task Tk2 required for displaying the bar chart, calculates the time complexity of the data processing task Tk1 as O(Tk1) and the time complexity of the data rendering task as O(Tk2), and based on the time complexity of O(Tk1) and the time complexity of O(Tk2), converts the original bar chart data Dy into split data Dcf that is simultaneously executed in k different threads.

[0078] A forming module generates a corresponding execution plugin for each thread running the split data Dcf, forms an execution plugin set P = {P1, P2,..., Pk}, and generates the display data DP of the bar chart based on the execution plugin set.

[0079] A splitting module obtains the data volume Nd displayed in each page of the bar chart, splits the display data DP based on the data volume Nd to obtain a sequence of paged data sets D’ = {D’1, D’2,…, D’m}, where , represents rounding up the numerical value, |DP| represents the number of elements included in the display data DP. When the user switches the page of the current page with page number p, if the user clicks the previous page, if p > 1, then p = p - 1; if the user clicks the next page, if p < m, then p = p + 1. When the user switches to the q-th page, the corresponding data D’p is loaded from the sequence of paged data sets D’ according to the page number, and the dynamic highlighted bar chart corresponding to the data of this page is displayed on the page of the q-th page.

[0080] In a third aspect, an embodiment of the present invention further provides an electronic device, which includes:

[0081] At least one processor; and,

[0082] A memory communicatively connected to the at least one processor; wherein,

[0083] The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the method described in any of the foregoing first aspects or any implementation manners of the first aspect.

[0084] In a fourth aspect, an embodiment of the present invention further provides a non-transitory computer-readable storage medium, which stores computer instructions for causing the computer to execute the method described in any of the foregoing first aspects or any implementation manners of the first aspect.

[0085] Fifth aspect, embodiments of the present invention further provide a computer program product, which includes a computing program stored on a non-transitory computer-readable storage medium. The computer program includes program instructions that, when executed by a computer, cause the computer to execute the method described in the foregoing first aspect or any implementation manner of the first aspect.

[0086] The solution in the embodiments of the present invention includes: obtaining a set P of dynamic highlighted bar charts to be displayed, extracting configuration parameters from the set P of dynamic highlighted bar charts to obtain a set C = {C1, C2,..., Cn} of configuration parameters, setting a set W = {W1, W2,..., Wn} of weight parameters corresponding to the set C of configuration parameters, and executing a bar chart generation function Fc for the set C of configuration parameters and the set W of weight parameters; receiving setting parameters Cv input by a user for a bar chart on an operation interface, generating a matching configuration parameter Cp ∈ C and a matching weight parameter Wp ∈ W for the bar chart based on the setting parameters Cv, and inputting the matching configuration parameter Cp and the matching weight parameter Wp into the bar chart generation function Fc to obtain bar chart raw data Dy = Fc(Cp, Wp); parsing the bar chart raw data Dy to obtain a data processing task Tk1 and a data rendering task Tk2 required for displaying the bar chart, calculating the time complexity of the data processing task Tk1 as O(Tk1) and the time complexity of the data rendering task Tk2 as O(Tk2), and converting the bar chart raw data Dy into split data Dcf that is simultaneously executed in k different threads based on the time complexity of O(Tk1) and the time complexity of O(Tk2); generating a corresponding execution plug-in for each thread running the split data Dcf to form an execution plug-in set P = {P1, P2,..., Pk}, and generating display data DP for the bar chart based on the execution plug-in set; obtaining the data volume Nd displayed by the bar chart on each page, and splitting the display data DP based on the data volume Nd to obtain a sequence D' = {D'1, D'2,..., D'm} of paged data sets, where , represents rounding up a numerical value, |DP| represents the number of elements included in the display data DP. When the user switches the current page with page number p, if the user clicks the previous page and p > 1, then p = p - 1; if the user clicks the next page and p < m, then p = p + 1. When the user switches to the q-th page, the corresponding data D'p is loaded from the sequence D' of paged data sets according to the page number, and the dynamic highlighted bar chart corresponding to the data on this page is displayed on the q-th page.

[0087] The present solution has the following beneficial effects:

[0088] Provides intuitive and high-level API interfaces, allowing developers to quickly get started and easily achieve basic chart display needs. Common chart types can be displayed through simple configuration. Compared with traditional complex API design, it greatly shortens development time, reduces development costs, and improves development efficiency. Even beginners can quickly master and apply it.

[0089] While providing a simple and easy-to-use high-level interface, it retains the flexibility of the underlying API to meet the needs of advanced users for in-depth customization of charts. Advanced users can deeply control the details of the chart according to specific project requirements and realize personalized chart display, thus broadening the scope of application of this solution.

[0090] Separate data processing and chart rendering into different threads to avoid main thread blocking and maintain UI responsiveness. This allows the page to respond quickly when users operate charts, such as updating data and interacting with them, without freezing, greatly improving the user experience.

[0091] Only the data visible in the user's window is rendered, which significantly improves rendering efficiency. When processing large amounts of data, this method can avoid unnecessary data rendering, reduce resource consumption, and improve system performance. Especially in large data volume scenarios, charts can be loaded and displayed quickly, allowing users to obtain data information in a timely manner.

[0092] Use WebGL for accelerated graphics rendering, making full use of the parallel computing capabilities of the GPU to improve rendering performance in complex graphics and high-frequency update scenarios. In application scenarios that require real-time data updates, such as stock market monitoring and real-time data analysis, dynamic highlight bar charts can be displayed smoothly at a high frame rate to ensure timely presentation and visualization of data.

[0093] Enhance interactive support for touch screen devices, optimize the interactive experience on mobile devices, and make chart operations on mobile devices consistent with or better than those on desktop devices. For example, accurately identify gesture operations such as sliding and zooming, so that users can easily view and analyze data on mobile devices, meeting the needs of users in different scenarios.

[0094] Provide chart styles and layouts designed specifically for mobile devices to ensure good display on small screens. By adopting responsive design, the chart layout and element size are automatically adjusted according to different screen sizes and resolutions to ensure the readability and visibility of the chart, and improve the comfort of users viewing charts on mobile devices.

[0095] Polyfill technology is used to improve compatibility with older versions of browsers, allowing the chart library to work properly in more browser environments. This means that the solution can cover a wider range of user groups, and users can view and use dynamic highlight bar charts normally regardless of the browser they use, which improves the versatility and applicability of the solution.

[0096] Regularly test and optimize the performance of the chart library in different browsers to ensure consistency and stability on each browser. When users access charts in different browsers, they can see the same display effect, avoiding chart display anomalies caused by browser differences and improving users' trust and satisfaction with chart display.

[0097] The introduction of a complete plug-in system allows developers to easily expand and customize chart functions according to their needs. Developers can develop various plug-ins to implement specific functions such as data filtering, sorting, and exporting according to specific project requirements, enriching the functions of charts and meeting the diverse needs of different users.

[0098] Provide more built-in extension points and custom event hooks, so that advanced users can deeply customize according to specific needs. This provides developers with more flexibility and control, and can customize each key link of the chart according to the special requirements of the project to achieve personalized chart display and interactive effects. BRIEF DESCRIPTION OF THE DRAWINGS

[0099] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0100] Figure 1 A schematic diagram of a flow chart of a dynamic highlight bar chart display and paging management method based on React provided in an embodiment of the present invention;

[0101] Figure 2 A schematic diagram of another flow chart of a dynamic highlight bar chart display and paging management method based on React provided in an embodiment of the present invention;

[0102] Figure 3 A schematic diagram of the structure of a dynamic highlight bar chart display and paging management device based on React provided in an embodiment of the present invention;

[0103] Figure 4 A schematic diagram of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0104] The embodiments of the present invention are described in detail below with reference to the accompanying drawings.

[0105] The following describes the embodiments of the present disclosure through specific examples, and those skilled in the art can easily understand other advantages and effects of the present disclosure from the contents disclosed in this specification. Obviously, the described embodiments are only a part of the embodiments of the present disclosure, rather than all of the embodiments. The present disclosure can also be implemented or applied through other different specific embodiments, and the details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present disclosure. It should be noted that the following embodiments and features in the embodiments can be combined with each other without conflict. Based on the embodiments in the present disclosure, all other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present disclosure.

[0106] It should be noted that various aspects of the embodiments within the scope of the appended claims are described below. It should be apparent that the aspects described herein may be embodied in a wide variety of forms, and any specific structure and / or function described herein is merely illustrative. Based on the present disclosure, it should be understood by those skilled in the art that an aspect described herein may be implemented independently of any other aspect, and two or more of these aspects may be combined in various ways. For example, any number of aspects described herein may be used to implement the device and / or practice the method. In addition, other structures and / or functionalities other than one or more of the aspects described herein may be used to implement this device and / or practice this method.

[0107] It should also be noted that the illustrations provided in the following embodiments are only schematic illustrations of the basic concept of the present disclosure. The drawings only show components related to the present disclosure rather than being drawn according to the number, shape and size of components in actual implementation. In actual implementation, the type, quantity and proportion of each component may be changed arbitrarily, and the component layout may also be more complicated.

[0108] Additionally, in the following description, specific details are provided to facilitate a thorough understanding of the examples. However, it will be understood by those skilled in the art that the aspects described may be practiced without these specific details.

[0109] The disclosed embodiment provides a method for displaying a dynamic highlight bar chart and managing pages based on React. The method for displaying a dynamic highlight bar chart and managing pages based on React provided in the embodiment can be executed by a computing device, which can be implemented as software or as a combination of software and hardware, and which can be integrated in a server, terminal device, etc.

[0110] See also Figure 1 and Figure 2 , the embodiment of the present disclosure provides a method for displaying a dynamic highlight bar chart and managing paging based on React, including:

[0111] S101, obtain the dynamic highlight bar chart set P to be displayed, extract the configuration parameters of the dynamic highlight bar chart set P, obtain the configuration parameter set C={C1,C2,...,Cn}, set the weight parameter set W={W1,W2,...,Wn} corresponding to the configuration parameter set C, and execute the bar chart generation function Fc of the configuration parameter set C and the weight parameter set W.

[0112] By establishing a connection with the data source, the dynamic highlight bar chart related information to be displayed is read from different data sources such as databases, API interfaces or local file systems, and all related bar chart information is integrated into a set P. The read information is preliminarily verified to ensure the integrity and accuracy of the data, such as checking whether the data format is correct and whether it contains necessary metadata.

[0113] Perform a detailed analysis of each bar chart instance in the set P. First, determine the data-related configuration parameters, such as C1 is the data value array of the bar chart, which stores the specific values ​​represented by each column; C2 is the data classification label array, which is used to identify the category corresponding to each column.

[0114] Extract configuration parameters related to the appearance style. For example, C3 represents the color setting of the column, which can be a single color value or a function that dynamically generates color based on data; C4 is the width of the column, through which the visual width of the column can be adjusted; C5 is the background color of the chart; C6 is the spacing between columns.

[0115] Collect configuration parameters related to interactive functions, such as C7, which is used to control whether to display prompt information and the format of prompt information when the mouse hovers; C8 defines the click events of the bar chart, such as jumping to a link, triggering a specific operation, etc.

[0116] Considering the configuration parameters related to layout, C9 represents the horizontal alignment of the chart on the page (such as left alignment, center alignment, right alignment); C10 represents the vertical alignment.

[0117] According to different chart types and business requirements, preset weight parameter set W. For example, for a bar chart that emphasizes data comparison, the weight W1 of parameter C1 related to data value may be set higher; for a display bar chart that focuses on aesthetics, the weights of parameters related to appearance style (such as C3, C4, C5) may be relatively increased. The value range of weight parameter is [0,1], and the sum of all weight parameters is 1, so that the comprehensive impact of each parameter on the bar chart generation is reasonable.

[0118] The histogram generation function Fc adopts a weighted summation method to comprehensively consider the configuration parameter set C and the weight parameter set W. The specific implementation is:

[0119]

[0120] The function performs specific calculations and processing based on different configuration parameters and weights. For example, the height of the column is calculated based on the data value parameter C1 and the weight W1; the final color of the column is determined based on the color parameter C3 and the weight W3.

[0121] S102, receiving the setting parameters Cv input by the user for the bar graph in the operation interface, generating the matching configuration parameters Cp∈C and matching weight parameters Wp∈W of the bar graph based on the setting parameters Cv, inputting the matching configuration parameters Cp and matching weight parameters Wp into the bar graph generation function Fc, and obtaining the bar graph original data Dy=Fc(Cp,Wp).

[0122] Provide visual setting options on the operation interface. Users can enter the setting parameters Cv for the bar chart through interactive components such as input boxes, drop-down menus, sliders, etc. Verify the setting parameters Cv entered by the user in real time so that the input values ​​are within a reasonable range and meet the system requirements. For example, if the user sets the color of the column, check whether the input color value meets the CSS color specification. Match the setting parameters Cv entered by the user with the configuration parameter set C. For parameters that can be directly matched, such as color, width, etc., directly assign the corresponding values ​​in Cv to the corresponding parameters in Cp.

[0123] For some parameters that need to be calculated or derived based on user input, they are converted and generated according to preset rules. For example, if the user sets the overall scaling of the chart, the width and spacing of the columns are calculated based on the scaling and Cp is updated.

[0124] For the weight parameter Wp, according to the chart type or specific requirements selected by the user, the corresponding weight value is selected from the weight parameter set W. If the user does not make a special selection, the default weight configuration is used.

[0125] The generated matching configuration parameter Cp and matching weight parameter Wp are passed as parameters to the bar graph generation function Fc. Function Fc calculates according to the input parameters and generates the bar graph raw data Dy. During the calculation process, each parameter is processed according to the preset weighted summation formula to obtain the raw data containing all the basic information of the bar graph, such as the position, height, color, label, etc. of the column.

[0126] S103, parse the bar chart original data Dy to obtain the data processing task Tk1 and the data rendering task Tk2 required to display the bar chart, calculate the time complexity of the data processing task Tk1 to be O(Tk1) and the time complexity of the data rendering task to be O(Tk2), and based on the time complexity of O(Tk1) and the time complexity of O(Tk2), convert the bar chart original data Dy into split data Dcf that is executed simultaneously in k different threads.

[0127] Perform structural analysis on the bar chart raw data Dy and decompose it into different parts to determine the data processing task Tk1 and the data rendering task Tk2. For the data processing task Tk1, extract the parts related to data operations, such as sorting, filtering, and aggregation of data. For example, if the raw data contains a large number of data points and the user needs to group and count the data, then the grouping and statistical operations of the data belong to the data processing task Tk1. For the data rendering task Tk2, extract the operations related to converting the data into visual elements, such as drawing columns according to data values, setting the style of the columns (color, width, etc.), drawing coordinate axes, adding labels, etc.

[0128] For data processing task Tk1, according to its specific algorithm and operation steps, analyze the time growth trend in the worst case and determine its time complexity O(Tk1). For example, if the data processing task is to sort an array containing n elements using the quick sort algorithm, its time complexity is O(nlogn).

[0129] For the data rendering task Tk2, we consider factors such as the number of elements to be rendered and the complexity of the rendering operation, analyze its time growth trend in the worst case, and determine its time complexity O(Tk2). For example, if the bar chart to be rendered contains m columns, the rendering of each column requires multiple calculations and drawing operations, and the number of operations is proportional to the number of columns, then the time complexity may be O(m).

[0130] Compare the size of O(Tk1) and O(Tk2), and determine the strategy for splitting the bar graph raw data Dy into k parts based on their relative sizes and the nature of the task. If O(Tk1) is much larger than O(Tk2), the data processing task can be further subdivided and more threads can be assigned to process the data.

[0131] According to the determined splitting strategy, the original data Dy is divided according to the task type and data relevance. For example, the data and operations related to the data processing task are divided into one group, and the data and operations related to the data rendering task are divided into another group. Then, each group is further subdivided according to the data volume and task complexity to form k data subsets.

[0132] Necessary meta-information is added to each data subset, such as task identification, data dependency, etc., so that tasks can be accurately scheduled and executed in a multi-threaded environment. This meta-information will help the system to correctly manage and coordinate the work between threads at runtime. Finally, the split data Dcf is formed.

[0133] S104, generating a corresponding execution plug-in for each thread running the split data DCF, forming an execution plug-in set P={P1, P2, . . . , Pk}, and generating the display data DP of the bar chart based on the execution plug-in set.

[0134] Design the corresponding execution plug-in architecture for each data subset in the split data Dcf and its corresponding tasks. Determine the input interface, output interface and internal processing logic framework of each plug-in. The input interface is designed to receive the corresponding data subset and its meta information, so that the plug-in can obtain all the required data and task requirements. The output interface is designed to output the processed results, which will serve as the basis for the subsequent generation of display data.

[0135] The internal processing logic framework is designed according to the specific requirements of the task. For example, for a plug-in for a data processing task, it may contain algorithms such as data sorting, filtering, and aggregation; for a plug-in for a data rendering task, it may contain operations such as graphics drawing and style setting.

[0136] According to the designed execution plug-in architecture, use a suitable programming language (such as JavaScript) to write specific code to implement each execution plug-in. In the process of writing code, different functional modules are encapsulated into independent functions or classes for easy maintenance and expansion. For example, the data sorting function is encapsulated into a function, which can be reused in different data processing plug-ins.

[0137] Perform error and exception handling for each plug-in so that the plug-in can perform reasonable processing when encountering errors or exceptions, such as recording error logs, returning default values, or prompting users, to ensure the stability and reliability of the system.

[0138] Perform functional testing on each executed plugin, using a series of test cases to verify whether the plugin functions correctly. The test cases should cover various possible input conditions and boundary conditions, so that the plugin can work properly in different situations.

[0139] Perform performance tests on the plug-in to check its performance when processing large amounts of data or complex tasks. Optimize the plug-in based on the test results, such as optimizing algorithms and reducing memory usage, to improve the execution efficiency of the plug-in.

[0140] Combine the k tested and optimized execution plugins into an execution plugin set P = {P1, P2,..., Pk}. Ensure that each plugin in the set can run independently and work collaboratively in a multi-threaded environment. Assign a unique identifier to each execution plugin for management and invocation in the system. Meanwhile, record information such as the function description, input and output parameters of each plugin to form a plugin document for developers to maintain and expand.

[0141] In a multi-threaded environment, start each execution plugin to process the corresponding split data subsets respectively. Each plugin processes the data according to the predetermined processing logic and outputs the processing results through the output interface.

[0142] Collect the output results of each plugin, integrate and assemble them according to certain rules to form the display data DP of the bar chart. This process may involve operations such as data merging and format conversion to make the final display data meet the requirements of bar chart rendering.

[0143] S105, obtain the data volume Nd displayed on each page of the bar chart, and divide the display data DP based on the data volume Nd to obtain a sequence of paged data sets D’ = {D’1, D’2,…, D’m}, where , represents rounding up the numerical value, |DP| represents the number of elements contained in the display data DP. When the user switches the page of the current page with page number p, if the user clicks the previous page and p > 1, then p = p - 1; if the user clicks the next page and p < m, then p = p + 1. When the user switches to the q-th page, load the corresponding data D’p from the sequence of paged data sets D’ according to the page number and display the dynamic highlighted bar chart corresponding to the data of this page on the q-th page.

[0144] According to the system's default settings or the user's historical operation habits, preset an initial value of the data volume Nd displayed on each page. For example, for general data volumes, the default setting is to display 20 data items per page. Provide a function on the operation interface for the user to customize the data volume Nd displayed on each page, and the user can manually adjust the value of Nd according to actual needs. Verify the value of Nd input by the user to make it a positive integer and meet the system's limit conditions.

[0145] Count the number of elements |DP| contained in the display data DP. Calculate the total number of pages m to be divided according to the formula

[0146] Starting from the starting position of the display data DP, divide the data in groups of every Nd elements. Store the divided data groups as D’1, D’2,…, D’m in sequence to form a sequence of paged data sets D’.

[0147] The current page number p and the total number of pages m are displayed on the operation interface, providing clear page navigation information for the user. When the user clicks the previous page button, check whether the current page number p is greater than 1. If p > 1, then update p to p - 1; if p = 1, then keep the page number unchanged because it is already the first page.

[0148] When the user clicks the next page button, check whether the current page number p is less than m. If p < m, then update p to p + 1; if p = m, then keep the page number unchanged because it is already the last page.

[0149] When the user switches to the q-th page (at this time q = p), the corresponding data D’p is accurately loaded from the paged data set sequence D’ according to the page number q. The loaded data D’p is passed to the front-end rendering module, and the front-end rendering module renders the data according to the previously set configuration parameters (such as bar colors, labels, etc.) to generate a dynamic highlighted bar chart. The generated dynamic highlighted bar chart is displayed on the page of the q-th page, making the layout of the chart reasonable and the display clear, providing a good data visualization experience for the user. At the same time, update other relevant information on the page, such as page number display, navigation button status, etc.

[0150] See Figure 2 According to a specific implementation manner of an embodiment of the present invention, for the obtained set P of dynamic highlighted bar charts to be displayed, configuration parameters are extracted from the set P of dynamic highlighted bar charts to obtain a configuration parameter set C = {C1, C2,..., Cn}, including:

[0151] S201, traverse each bar chart instance in the set P of dynamic highlighted bar charts, perform a preliminary structural analysis on each instance to determine the data type and display requirements it contains;

[0152] S202, extract the data value array C1 related to the bar chart data, and this array C1 contains the numerical information represented by each bar in the bar chart, which is used to determine the height of the bar;

[0153] S203, extract the bar color parameter C2 that controls the appearance style of the bar chart, and set the display color of each bar through this parameter C2;

[0154] S204, obtain the parameter C3 for defining the classification label of the bar chart, and the label parameter C3 corresponds to the data value array C1, which is used to identify the category represented by each bar;

[0155] S205, extract the mouse hover tip information parameter C4 related to the chart interaction function, and display data explanations by setting the parameter C4 when the user's mouse hovers over the cylinder.

[0156] According to a specific implementation of the embodiment of the present invention, the step of inputting the matching configuration parameter Cp and the matching weight parameter Wp into the histogram generation function Fc to obtain the histogram original data Dy=Fc(Cp, Wp) comprises:

[0157] Verify the validity of the input matching configuration parameter Cp, check whether the format and value range of the parameter meet the requirements of the histogram generation function Fc, and make corresponding corrections or prompt errors if they do not meet the requirements;

[0158] Arrange and combine the verified matching configuration parameters Cp and matching weight parameters Wp according to the input format of the histogram generation function Fc to form an input data structure that meets the function requirements;

[0159] Call the bar chart generation function Fc, pass the sorted input data to the function Fc for calculation, and inside the function Fc, start to initialize and calculate the various attributes of the bar chart according to the settings of the configuration parameters and weight parameters;

[0160] After the function Fc completes the calculation, it returns the generated bar chart raw data Dy, which contains all the basic information required to generate the final bar chart.

[0161] According to a specific implementation of an embodiment of the present invention, the parsing of the original bar graph data Dy to obtain the data processing task Tk1 and the data rendering task Tk2 required for displaying the bar graph includes:

[0162] Perform structural analysis on the original data Dy of the bar chart to determine the organizational form of the data and the type of information it contains;

[0163] Extract the task requirements related to data processing from the original data, and organize and summarize the task requirements into data processing tasks Tk1;

[0164] The tasks related to data rendering are separated from the original data, including converting the data into visual elements, setting the styles and attributes of the elements, and thus forming the data rendering task Tk2.

[0165] According to a specific implementation of an embodiment of the present invention, the time complexity of the calculation data processing task Tk01 is O(Tk01) and the time complexity of the data rendering task is O(Tk02). Based on the time complexity of O(Tk01) and the time complexity of O(Tk02), the bar chart original data Dy is converted into split data Dcf executed simultaneously in k0 different threads, including:

[0166] Assume that the data size is s, and the data processing task is used to sort the data. The time complexity O(Tk01) satisfies the formula:

[0167]

[0168] in It represents the asymptotically tight bound of the algorithm, and its time complexity is of the same order as slogs;

[0169] For the data rendering task Tk02, which involves drawing and styling r graphic elements, the time complexity O(Tk02) is expressed by the following formula:

[0170]

[0171] f(i) is a function related to the rendering of the i-th graphic element, which includes the attribute calculation and position adjustment operations of the element;

[0172] Set the comprehensive complexity evaluation function G(O(Tk01), O(Tk02)) to determine the strategy of splitting the bar chart original data Dy into k0 parts, which is defined as:

[0173]

[0174] Where α and β are weight coefficients;

[0175] According to the determined splitting strategy, the original bar graph data Dy is divided according to the task type and data relevance, and the related data and operations are allocated to different parts to form k0 data subsets;

[0176] Data subset The dependency relationship with other subsets is represented by the dependency matrix R. Representation Subset right The degree of dependence, the dependence matrix R satisfies:

[0177]

[0178] The data subsets that have been divided and added with metadata are combined into split data Dcf. The split data Dcf is stored in a tree row structure. Each node represents a data subset, and the edges between nodes represent data dependencies. Suppose the depth of the tree is h and the number of nodes is k0. The depth h of the tree and the number of nodes k0 satisfy the relationship:

[0179]

[0180] in Indicates a floor operation.

[0181] According to a specific implementation of an embodiment of the present invention, a corresponding execution plug-in is generated for each thread running the split data DCF to form an execution plug-in set P={P1, P2, ..., Pk0}, including:

[0182] For each data subset in the split data Dcf, analyze its corresponding task requirements and functional requirements, determine the specific operations and functions that each thread needs to perform, and for the i-th data subset, its task complexity is expressed by the complexity function To measure:

[0183]

[0184] in is the number of operations associated with this subset of data, is the complexity function of the jth operation, is the relevant parameter of the jth operation;

[0185] According to the tasks and functional requirements of each thread, design the corresponding execution plug-in architecture, determine the plug-in input interface, output interface and internal processing logic framework, and the data format received by the input interface is vector The data format of the output interface is vector , and there is a linear transformation relationship between the input and output, through a matrix express:

[0186]

[0187] in is an r×s matrix, where r and s are the dimensions of the output vector and the input vector respectively. is an offset vector;

[0188] According to the designed execution plug-in architecture, write specific code to implement each execution plug-in, and perform functional tests on each written execution plug-in;

[0189] Add necessary configuration parameters and initialization logic to each execution plug-in so that it can be flexibly configured according to different operating environments and requirements. The configuration parameter set is , containing p parameters The relationship between the performance of the plug-in and the configuration parameters is expressed as a response surface function To describe:

[0190]

[0191] in and e are model parameters.

[0192] According to a specific implementation manner of an embodiment of the present invention, obtaining the data volume Nd displayed in each page of the bar chart, and dividing the display data DP based on the data volume Nd to obtain a paged data set sequence D' = {D'1, D'2, …, D'm}, including:

[0193] Preset an initial value of the default data volume Nd displayed in each page according to factors such as the user's operation habit, the device screen size, and the complexity of the chart;

[0194] Obtain the custom data volume set by the user for the paged display of the bar chart on the operation interface, count the display data DP, and determine the number of elements |DP| it contains;

[0195] According to the formula Calculate the total number of pages m to be divided. Starting from the starting position of the display data DP, perform data division in the way of taking every Nd elements as a group, and sequentially store the divided data groups as D'1, D'2, …, D'm to form the paged data set sequence D'.

[0196] According to a specific implementation manner of an embodiment of the present invention, loading the corresponding data D'p from the paged data set sequence D' according to the page number, and displaying the dynamic highlighted bar chart corresponding to the data of this page on the page of the q-th page, including:

[0197] On the user operation interface, set an identification area for displaying the current page number, and display the page number p where the user is currently located in real time;

[0198] When the user triggers a page switching operation, obtain the current page number p and the total number of pages m, and update the current page number p according to the page switching rule. If the user clicks the previous page and p > 1, then update p to p - 1; if the user clicks the next page and p < m, then update p to p + 1;

[0199] According to the updated page number p, find the corresponding paged data D'p from the paged data set sequence D', and pass the found paged data D'p to the front-end rendering module for rendering;

[0200] On the front-end page, create a container for the q-th page to display the generated dynamic highlighted bar chart, and present the rendered dynamic highlighted bar chart in the container of the q-th page.

[0201] Corresponding to the above method embodiment, see Figure 3 This embodiment of the present invention also discloses a dynamic highlighted bar chart display and paging management device 30 based on React, including:

[0202] An acquisition module 301 acquires a set P of dynamic highlighted bar charts to be displayed, extracts configuration parameters from the set P of dynamic highlighted bar charts to obtain a set C = {C1, C2,..., Cn} of configuration parameters, sets a corresponding set W = {W1, W2,…, Wn} of weight parameters for the set C of configuration parameters, and a bar chart generation function Fc that executes the set C of configuration parameters and the set W of weight parameters;

[0203] A receiving module 302 receives a set of setting parameters Cv input by a user for a bar chart on an operation interface, generates a matching configuration parameter Cp ∈ C and a matching weight parameter Wp ∈ W for the bar chart based on the set of setting parameters Cv, and inputs the matching configuration parameter Cp and the matching weight parameter Wp into the bar chart generation function Fc to obtain bar chart raw data Dy = Fc(Cp, Wp);

[0204] An analysis module 303 analyzes the bar chart raw data Dy to obtain a data processing task Tk1 and a data rendering task Tk2 required for displaying the bar chart, calculates the time complexity of the data processing task Tk1 as O(Tk1) and the time complexity of the data rendering task Tk2 as O(Tk2), and based on the time complexity of O(Tk1) and the time complexity of O(Tk2), converts the bar chart raw data Dy into split data Dcf that is simultaneously executed in k different threads;

[0205] A formation module 304 generates a corresponding execution plugin for each thread that runs the split data Dcf to form an execution plugin set P = {P1, P2,..., Pk}, and generates display data DP for the bar chart based on the execution plugin set;

[0206] A segmentation module 305 acquires the amount of data Nd displayed on each page of the bar chart, segments the display data DP based on the amount of data Nd to obtain a sequence D’ = {D’1, D’2,…, D’m} of paged data sets, where , represents rounding up the numerical value, |DP| represents the number of elements included in the display data DP. When the user switches the page of the current page with page number p, if the user clicks the previous page, if p > 1, then p = p - 1; if the user clicks the next page, if p < m, then p = p + 1. When the user switches to the q-th page, the corresponding data D’p is loaded from the sequence D’ of paged data sets according to the page number, and the dynamic highlighted bar chart corresponding to the data of this page is displayed on the page of the q-th page.

[0207] See Figure 4 , this embodiment of the present invention further provides an electronic device 60, and the electronic device includes:

[0208] At least one processor; and,

[0209] a memory communicatively connected to the at least one processor; wherein,

[0210] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the dynamic highlight bar chart display and paging management method based on React in the aforementioned method embodiment.

[0211] An embodiment of the present invention further provides a non-transitory computer-readable storage medium, which stores computer instructions, and the computer instructions are used to enable the computer to execute the aforementioned method embodiment.

[0212] An embodiment of the present invention also provides a computer program product, which includes a computer program stored on a non-transitory computer-readable storage medium, and the computer program includes program instructions. When the program instructions are executed by a computer, the computer executes the React-based dynamic highlight bar chart display and paging management method in the aforementioned method embodiment.

[0213] Reference below Figure 4 , which shows a schematic diagram of the structure of an electronic device 60 suitable for implementing the embodiment of the present disclosure. The electronic device in the embodiment of the present disclosure may include, but is not limited to, mobile terminals such as mobile phones, notebook computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), vehicle terminals (such as vehicle navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc. Figure 4 The electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.

[0214] like Figure 4 As shown, the electronic device 60 may include a processing device (e.g., a central processing unit, a graphics processing unit, etc.) 601, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 602 or a program loaded from a storage device 608 into a random access memory (RAM) 603. In the RAM 603, various programs and data required for the operation of the electronic device 60 are also stored. The processing device 601, the ROM 602, and the RAM 603 are connected to each other via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.

[0215] Typically, the following devices may be connected to the I / O interface 605: an input device 606 including, for example, a touch screen, a touch pad, a keyboard, a mouse, an image sensor, a microphone, a gage, a gyroscope, etc.; an output device 607 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; a storage device 608 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 609. The communication device 609 may allow the electronic device 60 to communicate with other devices wirelessly or by wire to exchange data. Although Figure 4 The electronic device 60 is shown with various devices, but it should be understood that it is not required to implement or have all the devices shown. More or fewer devices may be implemented or have instead.

[0216] In particular, according to an embodiment of the present disclosure, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device 609, or installed from a storage device 608, or installed from a ROM 602. When the computer program is executed by the processing device 601, the above-mentioned functions defined in the method of the embodiment of the present disclosure are executed.

[0217] The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any changes or substitutions that can be easily thought of by a person skilled in the art within the technical scope disclosed by the present invention should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.

Claims

1. A method for displaying dynamic highlighted bar graphs and paging management based on React, characterized in that: include: Obtain a dynamic highlight bar graph set P to be displayed, extract configuration parameters of the dynamic highlight bar graph set P, obtain a configuration parameter set C={C1, C2, ..., Cn}, set a weight parameter set W={W1, W2, ..., Wn} corresponding to the configuration parameter set C, and execute a bar graph generation function Fc of the configuration parameter set C and the weight parameter set W; Receive the setting parameter Cv input by the user for the histogram in the operation interface, generate the matching configuration parameter Cp∈C and the matching weight parameter Wp∈W of the histogram based on the setting parameter Cv, input the matching configuration parameter Cp and the matching weight parameter Wp into the histogram generation function Fc, and obtain the histogram original data Dy=Fc(Cp,Wp); The bar chart original data Dy is parsed to obtain the data processing task Tk1 and the data rendering task Tk2 required for displaying the bar chart, and the time complexity of the data processing task Tk1 is calculated to be O(Tk1) and the time complexity of the data rendering task is O(Tk2). Based on the time complexity of O(Tk1) and the time complexity of O(Tk2), the bar chart original data Dy is converted into split data Dcf executed simultaneously in k different threads; Generate a corresponding execution plug-in for each thread running the split data DCF to form an execution plug-in set P={P1, P2, ..., Pk}, and generate the display data DP of the bar chart based on the execution plug-in set; Obtain the amount of data Nd displayed in the bar chart on each page, and divide the display data DP based on the amount of data Nd to obtain a sequence of paged data sets D’={D’1,D’2,…,D’m}, where , represents rounding up the numerical value, |DP| represents the number of elements contained in the display data DP. When the user switches the page of the current page with page number p, if the user clicks the previous page, if p>1, then p = p - 1; if the user clicks the next page, if p<m, then p = p + 1. When the user switches to the q-th page, load the corresponding data D’p from the sequence of paged data sets D’ according to the page number, and display the dynamic highlighted bar chart corresponding to the data of this page on the page of the q-th page.

2. The method according to claim 1, characterized in that The step of obtaining a dynamic highlight bar graph set P to be displayed and extracting configuration parameters of the dynamic highlight bar graph set P to obtain a configuration parameter set C={C1, C2, ..., Cn}, including: Traverse each bar chart instance in the dynamic highlight bar chart set P, perform a preliminary structural analysis on each instance, and determine the data type and display requirements it contains; Extract the data value array C1 related to the bar chart data. The array C1 contains the numerical information represented by each column in the bar chart and is used to determine the height of the column. Extract the column color parameter C2 that controls the appearance style of the bar chart, and set the display color of each column through the parameter C2; Get the parameter C3 used to define the bar chart classification label. The label parameter C3 corresponds to the data value array C1 and is used to identify the category represented by each column. Extract the mouse hover prompt information parameter C4 related to the interactive function of the chart, and display the data description when the user hovers the mouse over the cylinder by setting parameter C4.

3. The method according to claim 2, characterized in that The step of inputting the matching configuration parameter Cp and the matching weight parameter Wp into the histogram generation function Fc to obtain the histogram original data Dy=Fc(Cp, Wp) comprises: Verify the validity of the input matching configuration parameter Cp, check whether the format and value range of the parameter meet the requirements of the histogram generation function Fc, and make corresponding corrections or prompt errors if they do not meet the requirements; Arrange and combine the verified matching configuration parameters Cp and matching weight parameters Wp according to the input format of the histogram generation function Fc to form an input data structure that meets the function requirements; Call the bar chart generation function Fc, pass the sorted input data to the function Fc for calculation, and inside the function Fc, start to initialize and calculate the various attributes of the bar chart according to the settings of the configuration parameters and weight parameters; After the function Fc completes the calculation, it returns the generated bar chart raw data Dy, which contains all the basic information required to generate the final bar chart.

4. The method according to claim 3, characterized in that The analysis of the original bar graph data Dy to obtain the data processing task Tk1 and the data rendering task Tk2 required for displaying the bar graph includes: Perform structural analysis on the original data Dy of the bar chart to determine the organizational form of the data and the type of information it contains; Extract the task requirements related to data processing from the original data, and organize and summarize the task requirements into data processing tasks Tk1; The tasks related to data rendering are separated from the original data, including converting the data into visual elements, setting the styles and attributes of the elements, and thus forming the data rendering task Tk2.

5. The method according to claim 4, characterized in that The time complexity of the calculation data processing task Tk01 is O(Tk01) and the time complexity of the data rendering task is O(Tk02). Based on the time complexity of O(Tk01) and the time complexity of O(Tk02), the bar chart original data Dy is converted into split data Dcf executed simultaneously in k0 different threads, including: Assume that the data size is s, and the data processing task is used to sort the data. The time complexity O(Tk01) satisfies the formula: in It represents the asymptotically tight bound of the algorithm, and its time complexity is of the same order as slogs; For the data rendering task Tk02, which involves drawing and styling r graphic elements, the time complexity O(Tk02) is expressed by the following formula: f(i) is a function related to the rendering of the i-th graphic element, which includes the attribute calculation and position adjustment operations of the element; Set the comprehensive complexity evaluation function G(O(Tk01), O(Tk02)) to determine the strategy of splitting the bar chart original data Dy into k0 parts, which is defined as: Where α and β are weight coefficients; According to the determined splitting strategy, the original bar graph data Dy is divided according to the task type and data relevance, and the related data and operations are allocated to different parts to form k0 data subsets; Data subset The dependency relationship with other subsets is represented by the dependency matrix R. Representation Subset right The degree of dependence, the dependence matrix R satisfies: The data subsets that have been divided and added with metadata are combined into split data Dcf. The split data Dcf is stored in a tree row structure. Each node represents a data subset, and the edges between nodes represent data dependencies. Suppose the depth of the tree is h and the number of nodes is k0. The depth h of the tree and the number of nodes k0 satisfy the relationship: in Indicates a floor operation.

6. The method according to claim 5, characterized in that The method generates a corresponding execution plug-in for each thread running the split data DCF, forming an execution plug-in set P={P1, P2, ..., Pk0}, including: For each data subset in the split data Dcf, analyze its corresponding task requirements and functional requirements, determine the specific operations and functions that each thread needs to perform, and for the i-th data subset, its task complexity is expressed by the complexity function To measure: in is the number of operations associated with this subset of data, is the complexity function of the jth operation, is the relevant parameter of the jth operation; According to the tasks and functional requirements of each thread, design the corresponding execution plug-in architecture, determine the plug-in input interface, output interface and internal processing logic framework, and the data format received by the input interface is vector The data format of the output interface is vector , and there is a linear transformation relationship between the input and output, through a matrix express: in is an r×s matrix, where r and s are the dimensions of the output vector and the input vector respectively. is an offset vector; According to the designed execution plug-in architecture, write specific code to implement each execution plug-in, and perform functional tests on each written execution plug-in; Add necessary configuration parameters and initialization logic to each execution plug-in so that it can be flexibly configured according to different operating environments and requirements. The configuration parameter set is , contains p parameters The relationship between the performance of the plug-in and the configuration parameters is expressed as a response surface function To describe: in and e are model parameters.

7. The method according to claim 6, characterized in that Obtain the amount of data Nd displayed in each page of the bar chart, and divide the display data DP based on the amount of data Nd to obtain a paged data set sequence D’={D’1,D’2,…,D’m}, including: Preset an initial value of the default amount of data Nd displayed in each page according to factors such as the user's operation habits, device screen size, and chart complexity; Obtain the custom amount of data set by the user for the bar chart paging display on the operation interface, count the display data DP, and determine the number of elements |DP| it contains; According to the formula The total number of pages m to be divided is calculated, and data is divided starting from the start position of the display data DP in a manner of Nd elements per group. The divided data groups are stored as D'1, D'2, ..., D'm in sequence to form a paging data set sequence D'.

8. The method according to claim 7, characterized in that The loading of the corresponding data D’p from the paged data set sequence D’ according to the page number and the display of the dynamic highlighted bar chart corresponding to the data of this page on the page of the q-th page includes: On the user operation interface, set an identification area for displaying the current page number, and display the page number p where the user is currently located in real time; When the user triggers a page switching operation, obtain the current page number p and the total number of pages m, and update the current page number p according to the page switching rule. If the user clicks the previous page and p>1, then update p to p-1. If the user clicks the next page and p<m, then update p to p+1; According to the updated page number p, find the corresponding paged data D’p from the paged data set sequence D’, and pass the found paged data D’p to the front-end rendering module for rendering; On the front-end page, create a container for the q-th page to display the generated dynamic highlighted bar chart, and present the rendered dynamic highlighted bar chart in the container of the q-th page.

9. A dynamic highlight bar chart display and paging management device based on React, characterized in that: Including: An acquisition module that acquires the set P of dynamic highlighted bar charts to be displayed, extracts configuration parameters from the set P of dynamic highlighted bar charts to obtain a configuration parameter set C={C1,C2,...,Cn}, sets a corresponding weight parameter set W={W1,W2,…,Wn} for the configuration parameter set C, and executes the bar chart generation function Fc of the configuration parameter set C and the weight parameter set W; A receiving module that receives the set parameter Cv input by the user for the bar chart on the operation interface, generates a matching configuration parameter Cp∈C and a matching weight parameter Wp∈W for the bar chart based on the set parameter Cv, and inputs the matching configuration parameter Cp and the matching weight parameter Wp into the bar chart generation function Fc to obtain the bar chart original data Dy=Fc(Cp,Wp); An analysis module that analyzes the bar chart original data Dy to obtain the data processing task Tk1 and the data rendering task Tk2 required for displaying the bar chart, calculates the time complexity of the data processing task Tk1 as O(Tk1) and the time complexity of the data rendering task Tk2 as O(Tk2), and based on the time complexity of O(Tk1) and the time complexity of O(Tk2), converts the bar chart original data Dy into split data Dcf that is executed simultaneously in k different threads; A formation module that generates a corresponding execution plugin for each thread running the split data Dcf to form an execution plugin set P={P1,P2,...,Pk}, and generates the display data DP of the bar chart based on the execution plugin set; The splitting module obtains the data volume Nd displayed in each page of the bar chart, and splits the display data DP based on the data volume Nd to obtain a sequence of paged data sets D’={D’1, D’2, …, D’m}, where , represents rounding up the numerical value, |DP| represents the number of elements contained in the display data DP. When the user switches the page of the current page with page number p, if the user clicks the previous page, if p>1, then p = p - 1; if the user clicks the next page, if p<m, then p = p + 1. When the user switches to the q-th page, the corresponding data D’p is loaded from the sequence of paged data sets D’ according to the page number, and the dynamic highlighted bar chart corresponding to the data of this page is displayed on the page of the q-th page.

10. An electronic device, characterized in that: The electronic device comprises: at least one processor; and, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the React-based dynamic highlight bar chart display and paging management method described in any one of claims 1 to 8.

Images