Chart linkage updating method and device based on react framework, and computer device
By creating associated parameter objects and reusable components in a React project, the problem of passive components not updating in a timely manner in chart linkage was solved, enabling timely response and updates of charts.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- CCB FINTECH CO LTD
- Filing Date
- 2022-09-16
- Publication Date
- 2026-07-07
AI Technical Summary
In large-screen data visualization, when charts are linked, passive components cannot respond to changes in the state of active components in a timely manner, resulting in untimely updates.
By creating objects and reusable components in a React project to store associated parameters, you can generate and update associated parameters, promptly propagate changes to the backend to obtain new chart data, and update the view.
It enables timely updates of passive components when charts are linked, solving the problem of untimely linkage, and is suitable for both global and local linkage scenarios.
Smart Images
Figure CN115470375B_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of data visualization technology, specifically to a chart linkage update method based on the React framework, a chart linkage update device based on the React framework, a computer device, a computer-readable storage medium, and a computer program product. Background Technology
[0002] Large-screen data visualization uses a large screen as the primary display medium to present data visually. It can connect to multiple terminals, supports content delivery by multiple users, and displays data graphically. It can vividly express the inherent information and patterns of the data, making the data presentation simpler and clearer. In terms of layout, large-screen visualization goes beyond simple horizontal and vertical lines and basic graphics. It also supports intelligent layout and free arrangement of components. The combination of different graphic styles and colors can create a large-screen display that is personalized, layered, and spatially appealing.
[0003] With the development of technologies and tools related to large-screen data visualization, the needs and functions of large-screen visualization projects are becoming increasingly complex, and chart linkage has become a common requirement in these projects. In chart linkage within the large-screen visualization field, when using global filtering and local linkage functions, passive components cannot respond promptly to changes in active components. For example, one existing chart linkage technology directly uses the fields displayed in the current chart as associated fields, binding them to other charts to achieve linkage between multiple charts. Other associated charts with bound fields are displayed accordingly based on the operations performed on the current chart. However, for charts with filtering conditions, it is impossible to use the unbound fields of the current chart for global chart linkage display, resulting in the defect of untimely updates to linked charts. Summary of the Invention
[0004] To address one of the aforementioned technical deficiencies, this application provides a method and apparatus for chart linkage updates based on the React framework.
[0005] The first aspect of this application provides a method for linked chart updates based on the React framework, including:
[0006] When establishing the linkage between active and passive components, associated parameters are generated based on the state information of the active component;
[0007] The associated parameters are stored in an object created within the React project to store the associated parameters.
[0008] When the state information of the active component changes, new association parameters are generated, and the configuration parameters of the passive component are updated according to the new association parameters, or the association parameters stored in the object are replaced with the new association parameters.
[0009] The configuration parameters of the passive component are obtained through a reusable component created in the React project. The associated parameters stored in the object are then obtained. The configuration parameters of the passive component are compared with the associated parameters stored in the object. Based on the comparison result, it is determined whether to obtain new chart data to update the view.
[0010] In this embodiment of the application, when establishing the linkage relationship between the active component and the passive component, generating the association parameter based on the status information of the active component includes: forming the association parameter by combining the dimension information and indicator information of the active component; wherein, both the active component and the passive component are chart components.
[0011] In this embodiment of the application, the step of storing the associated parameters through an object created in the React project to store the associated parameters includes: assigning the associated parameters to the subordinate data in the configuration parameters of the passive component, and at the same time assigning the associated parameters to the key value of the corresponding passive component under the object.
[0012] In this embodiment of the application, the step of generating new association parameters when the state information of the active component changes, and updating the configuration parameters of the passive component according to the new association parameters, includes: when the dimension information or indicator information of the active component changes, forming new association parameters based on the changed dimension information and indicator information; and reassigning values to the subordinate data in the configuration parameters of the passive component according to the new association parameters.
[0013] In this embodiment, the step of obtaining configuration parameters of a passive component through a reusable component created in a React project, obtaining associated parameters stored in the object, comparing the configuration parameters of the passive component with the associated parameters stored in the object, and determining whether to obtain new chart data to update the view based on the comparison result includes: obtaining dependent data from the configuration parameters of the passive component as first comparison data during the lifecycle of the reusable component, and obtaining the key-value of the corresponding passive component under the object as second comparison data; comparing the first comparison data with the second comparison data, and if the comparison result is inconsistent, calling the corresponding interface to obtain new chart data to update the view according to the configuration parameters of the passive component, and simultaneously updating the key-value of the corresponding passive component under the object according to the dependent data in the configuration parameters of the passive component.
[0014] In this embodiment of the application, when establishing the linkage relationship between the active component and the passive component, generating the association parameter based on the status information of the active component includes: adding a global filtering attribute of the corresponding chart component to the static attributes of the reusable component, using the configuration parameters when the chart component is created as the initial value of the global filtering attribute of the corresponding chart component; and forming the association parameter by combining the identifier ID, dimension information and indicator information of the active component; wherein, the active component is a filtering component and the passive component is a chart component.
[0015] In this embodiment of the application, storing the associated parameters through an object created in the React project for storing associated parameters includes: using a global filter array created in the React project as an object for storing associated parameters, and pushing the associated parameters into the global filter array.
[0016] In this embodiment of the application, generating new association parameters when the state information of the active component changes, and replacing the association parameters stored in the object with the new association parameters, includes: when the dimension information or indicator information of the active component changes, forming new association parameters based on the identifier ID of the active component, the changed dimension information, and the indicator information; searching for the corresponding association parameter of the active component in the global filter array based on the identifier ID in the new association parameter, and replacing the found association parameter with the new association parameter.
[0017] In this embodiment, the step of obtaining configuration parameters of a passive component through a reusable component created in a React project, obtaining associated parameters stored in the object, comparing the configuration parameters of the passive component with the associated parameters stored in the object, and determining whether to obtain new chart data to update the view based on the comparison result includes: obtaining the static attribute value of the corresponding passive component as the first comparison data during the lifecycle of the reusable component, and obtaining the associated parameters of the corresponding active component in the global filter array as the second comparison data; comparing the first comparison data with the second comparison data, and if the comparison result is inconsistent, calling the corresponding interface to obtain new chart data to update the view based on the configuration parameters of the passive component and the associated parameters of the corresponding active component in the global filter array, and simultaneously updating the static attribute value of the corresponding passive component in the reusable component to the associated parameters of the corresponding active component in the global filter array.
[0018] A second aspect of this application provides a chart-linked update device based on the React framework, comprising:
[0019] The association parameter generation module is used to generate association parameters based on the state information of the active component when establishing the linkage relationship between the active component and the passive component, and to generate new association parameters when the state information of the active component changes.
[0020] The associated parameter storage module is used to store the associated parameters through an object created in the React project for storing associated parameters.
[0021] The associated parameter update module is used to update the configuration parameters of the passive component according to the new associated parameters, or to replace the associated parameters stored in the object with the new associated parameters;
[0022] The associated parameter comparison module is used to obtain the configuration parameters of the passive component through the reusable component created in the React project, obtain the associated parameters stored in the object, and compare the configuration parameters of the passive component with the associated parameters stored in the object.
[0023] The chart update module is used to determine whether to retrieve new chart data to update the view based on the comparison results.
[0024] A third aspect of this application provides an electronic device, including: a processor and a memory communicatively connected to the processor; the memory stores a computer program; the processor executes the computer program stored in the memory to implement the chart linkage update method based on the React framework provided in the first aspect above.
[0025] The fourth aspect of this application provides a machine-readable storage medium storing computer instructions, which, when executed by a processor, are used to implement the chart linkage update method based on the React framework provided in the first aspect above.
[0026] The fifth aspect of this application provides a computer program product, including a computer program that, when executed by a processor, implements the chart linkage update method based on the React framework provided in the first aspect above.
[0027] This application provides a method and apparatus for interactive chart updates based on the React framework. By creating data structures such as objects and reusable components in the React project to store related parameters, the related parameters are passed through the created objects. The reusable components retrieve these parameters and detect changes, enabling timely transmission of changed parameters to the backend for immediate chart data retrieval and rendering. This method is applicable to both global and local interactive chart updates. New related parameters are immediately generated when the state of the active component changes. The reusable components can detect changes by comparing the related parameters, triggering a chart update. This solves the problem of passive components failing to update promptly when the state of the active component changes during interactive chart updates.
[0028] Other features and advantages of the embodiments of this application will be described in detail in the following detailed description section. Attached Figure Description
[0029] The accompanying drawings are provided to further illustrate the embodiments of this application and form part of the specification. They are used together with the following detailed description to explain the embodiments of this application, but do not constitute a limitation on the embodiments of this application. In the drawings:
[0030] Figure 1 The flowchart illustrating the chart linkage update method based on the React framework according to an embodiment of this application is shown in the schematic diagram.
[0031] Figure 2 A flowchart illustrating partial linkage in an embodiment of this application is shown schematically;
[0032] Figure 3 This illustration shows a flowchart of the global linkage in an embodiment of this application;
[0033] Figure 4 This schematic diagram illustrates the structural block diagram of a chart linkage update device based on the React framework according to an embodiment of this application;
[0034] Figure 5 The diagram illustrates the internal structure of a computer device according to an embodiment of this application. Detailed Implementation
[0035] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. It should be understood that the specific embodiments described herein are only for illustration and explanation of the embodiments of this application and are not intended to limit the embodiments of this application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without creative effort are within the scope of protection of this application.
[0036] Terminology Explanation:
[0037] Chart Linkage: Two or more components establish a connection, where a change in the dimension or metric of one component drives corresponding changes in the other components. In a linked system, the component that drives the changes in other components is called the active component, and the component that is driven to change is called the passive component. Active components can be filter components or chart components. Passive components are generally chart components, such as line charts, pie charts, bar charts, candlestick charts, tables, and text.
[0038] Filtering components: These are components with global properties that are not driven by other components. Common filtering components include dropdown selection components, date range components, and other non-chart components.
[0039] Global linkage: The active component is a filtering component. Changes in the dimensions or metrics of the active component will drive all non-filtering components to link together.
[0040] Local linkage: Both active and passive components are chart components (not filter components), and the chart components are linked together.
[0041] Figure 1 The flowchart illustrating a React-based chart linkage update method according to an embodiment of this application is shown in the diagram. Figure 1 As shown, one embodiment of this application provides a chart linkage update method based on the React framework, including the following steps:
[0042] Step 102: When establishing the linkage relationship between the active component and the passive component, generate the association parameters based on the state information of the active component;
[0043] Step 104: Save the associated parameters using the object created in the React project to store the associated parameters;
[0044] Step 106: When the state information of the active component changes, generate new association parameters, update the configuration parameters of the passive component according to the new association parameters, or replace the association parameters stored in the object with the new association parameters.
[0045] Step 108: Obtain the configuration parameters of the passive component through the reusable component created in the React project, obtain the associated parameters stored in the object, compare the configuration parameters of the passive component with the associated parameters stored in the object, and determine whether to obtain new chart data to update the view based on the comparison result.
[0046] The chart linkage update method based on the React framework provided in this application creates data structures such as objects and reusable components in the React project to store association parameters. The association parameters are passed through the created objects, and the reusable components retrieve and judge changes in these parameters. This allows for timely transmission of changed association parameters to the backend, enabling prompt acquisition of chart data and timely chart updates. This method is applicable to both global and local linkage. Once the state of the active component changes, new association parameters are immediately generated. The reusable components can detect changes by comparing the association parameters, triggering chart updates. This solves the problem of passive components failing to update promptly when the state of the active component changes during chart linkage.
[0047] It should be understood that, although Figure 1The steps in the flowchart are shown sequentially as indicated by the arrows, but these steps are not necessarily executed in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order in which these steps are executed, and they can be performed in other orders. Figure 1 At least some of the steps in the process may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these sub-steps or stages is not necessarily sequential, but can be executed in turn or alternately with other steps or at least some of the sub-steps or stages of other steps.
[0048] In one embodiment, in the case of partial linkage, both the active and passive components are chart components. In step 102, the association parameters are formed by combining the dimensional and indicator information of the active component. Dimensional information includes the component's aggregation or filtering fields, such as the horizontal, vertical, and third-dimensional position coordinates of the chart, and the color, fill, and line style of a specific legend. Indicator information includes data values under each dimension, such as horizontal and vertical coordinate values. In step 104, the association parameters are assigned to the subordinate data in the configuration parameters of the passive component, and simultaneously, the association parameters are assigned to the key value of the corresponding passive component under the object used to store the association parameters. In step 106, when the dimensional or indicator information of the active component changes, new association parameters are formed by combining the changed dimensional and indicator information, and the subordinate data in the configuration parameters of the passive component are reassigned according to the new association parameters. In step 108 above, during the lifecycle of the reusable component, the dependent data in the configuration parameters of the passive component is obtained as the first comparison data, and the key value of the corresponding passive component under the object used to store the associated parameters is obtained as the second comparison data. The first comparison data and the second comparison data are compared. If the comparison results are inconsistent, the corresponding interface is called according to the configuration parameters of the passive component to obtain new chart data to update the view. At the same time, the key value of the corresponding passive component under the object used to store the associated parameters is updated according to the dependent data in the configuration parameters of the passive component. If the comparison results are consistent, no update operation is performed.
[0049] In one embodiment, the active component is a filtering component, and the passive component is a chart component. For globally linked scenarios, a global filtering attribute corresponding to the chart component is added to the static properties of the reusable component, and the configuration parameters when the chart component is created are used as the initial values of the global filtering attribute corresponding to that chart component. In step 102 above, the association parameter is formed by combining the active component's identifier ID, dimension information, and indicator information. It should be noted that the identifier ID of each component is unique. In step 104 above, the global filtering array created in the React project is used as an object to store the association parameter, and the association parameter is pushed into the global filtering array. In step 106 above, when the dimension information or indicator information of the active component changes, a new association parameter is formed by combining the active component's identifier ID, the changed dimension information, and indicator information. The corresponding association parameter for the active component is searched in the global filtering array based on the identifier ID in the new association parameter, and the found association parameter is replaced with the new association parameter. In step 108 above, the static attribute value of the corresponding passive component is obtained as the first comparison data during the lifecycle of the reusable component, and the associated parameter of the corresponding active component in the global filter array is obtained as the second comparison data. The first comparison data and the second comparison data are compared. If the comparison results are inconsistent, the corresponding interface is called to obtain new chart data to update the view according to the configuration parameters of the passive component and the associated parameter of the corresponding active component in the global filter array. At the same time, the static attribute value of the corresponding passive component in the reusable component is updated to the associated parameter of the corresponding active component in the global filter array. If the comparison results are consistent, no update operation is performed.
[0050] The following are exemplary examples of local and global linkage to provide a detailed description of the technical solutions of the embodiments of this application.
[0051] In a partially linked example, we first import the state management plugin react-redux into the React project. We create an object `relate` to store the associated parameters; this object can be stored locally on the client side. Each component generated in the React project (including filter and chart components) has a unique identifier ID. We create a `core.js` file as a reusable component to render different chart components based on different configuration parameters. Assume components A and B are a pair of partially linked components, where component A is the active component with the ID `ida`, and component B is the passive component with the ID `idb`. When the two components establish a link, the dimensions and metrics of the active component A are combined to form an associated parameter. This associated parameter is assigned to the dependency data `dependenceData` in the configuration parameters of the passive component B, and simultaneously assigned to the `idb` key of the `relate` object.
[0052] like Figure 2 As shown, when the dimension or metric of active component A changes, the new dimension and metric are combined into a new related parameter, and the dependency data in the configuration parameters of passive component B is updated to the new related parameter. In the lifecycle method `componentDidUpdate` of the reusable component `core.js`, the dependency data in the configuration parameters of passive component B is retrieved and recorded as `data1`; the idb key of the object `relate` is retrieved and recorded as `data2`. A deep comparison of `data1` and `data2` is performed. If the two values are not equal, the backend interface is called according to the configuration parameters of passive component B to obtain the new chart data, and the chart component's rendering API is called to re-render the chart component (update the view). Simultaneously, the idb key of the object `relate` is updated to the dependency data in the configuration parameters of passive component B. If the values of `data1` and `data2` are equal, no update operation is performed.
[0053] In a globally linked example, we first import the state management plugin react-redux into the React project. We create a global filter array, `globalFilterData`, to store the associated parameters. This array can be stored on the server side. Each component generated in the React project (including the filter component and the chart component) has a unique identifier ID. We create a `core.js` file as a reusable component to render different chart components based on different configuration parameters. In the static properties of the reusable component `core.js`, we add the `globalFilter` property for the corresponding chart component (as a passive component). The initial value of the `globalFilter` property is the configuration parameter used when the chart component was created, which is `globalFilterData`. In the globally linked scenario, the filter component acts as the active component, and the chart component acts as the passive component. Assume the identifier ID of filter component C is `idc`, and the identifier ID of chart component D is `idd`. When filter component C is created, an associated parameter is generated based on the dimensions and metrics of filter component C. This associated parameter is an object containing the identifier ID, dimension information, and metric information. This associated parameter is then pushed into the global filter array `globalFilterData`.
[0054] like Figure 3As shown, when the dimension or metric of the filtering component C changes, the new dimension and metric are combined into a new associated parameter. The associated parameter with the identifier ID in the new associated parameter is searched in the global filter array `globalFilterData` for the associated parameter with the identifier ID `idc`, and the found associated parameter is replaced with the new associated parameter. In the lifecycle method `componentDidUpdate` of the reusable component `core.js`, the static property `globalFilter` of the corresponding chart component D is retrieved and recorded as `data3`; the global filter array `globalFilterData` is retrieved and recorded as `data4`. `data3` and `data4` are compared in depth. If the two values are not equal, the backend interface is called to retrieve the new data based on the configuration parameters of chart component D and the global filter array `globalFilterData`. The chart component's rendering API is then called to re-render the chart component, and the static property value `globalFilter` of the corresponding chart component D in the reusable component `core.js` is updated to `globalFilterData`. If the values of `data3` and `data4` are equal, no update operation is performed.
[0055] Figure 4 The diagram illustrates the structural block diagram of a chart-linking update device based on the React framework, according to an embodiment of this application. Figure 4 As shown, in one embodiment, a chart linkage update device 400 based on the React framework is provided, including: a correlation parameter generation module 402, a correlation parameter storage module 404, a correlation parameter update module 406, a correlation parameter comparison module 408, and a chart update module 410. The correlation parameter generation module 402 is used to generate correlation parameters based on the state information of the active component when establishing a linkage relationship between the active and passive components, and to generate new correlation parameters when the state information of the active component changes. The correlation parameter storage module 404 is used to store the correlation parameters through an object created in the React project for storing correlation parameters. The correlation parameter update module 406 is used to update the configuration parameters of the passive component according to the new correlation parameters, or to replace the correlation parameters stored in the object with the new correlation parameters. The correlation parameter comparison module 408 is used to obtain the configuration parameters of the passive component through a reusable component created in the React project, obtain the correlation parameters stored in the object, and compare the configuration parameters of the passive component with the correlation parameters stored in the object. The chart update module 410 is used to determine whether to obtain new chart data to update the view based on the comparison result.
[0056] In the case of partial linkage, both the active and passive components are chart components. The association parameter generation module 402 combines the dimensional and indicator information of the active component to form association parameters. The association parameter saving module 404 assigns the association parameters to the subordinate data in the configuration parameters of the passive component, and simultaneously assigns the association parameters to the key-value pair of the corresponding passive component under the object used to save the association parameters. When the dimensional or indicator information of the active component changes, the association parameter generation module 402 combines the changed dimensional and indicator information to form new association parameters, and the association parameter updating module 406 reassigns the subordinate data in the configuration parameters of the passive component according to the new association parameters. The correlation parameter comparison module 408 obtains subordinate data from the configuration parameters of the passive component as first comparison data during the lifecycle of the reusable component, and obtains the key value of the corresponding passive component under the object used to store the correlation parameters as second comparison data. The first comparison data and the second comparison data are compared. If the comparison results are inconsistent, the chart update module 410 calls the corresponding interface to obtain new chart data to update the view according to the configuration parameters of the passive component, and at the same time updates the key value of the corresponding passive component under the object used to store the correlation parameters according to the subordinate data in the configuration parameters of the passive component. If the comparison results are consistent, no update operation is performed.
[0057] In a globally interconnected scenario, the active component is a filter component, and the passive component is a chart component. A global filter attribute corresponding to the chart component is added to the static properties of the reusable component, using the configuration parameters from chart component creation as the initial value for this global filter attribute. The association parameter generation module 402 combines the active component's identifier ID, dimension information, and indicator information to form association parameters. The global filter array `globalFilterData` created in the React project is used as the object to store the association parameters, and the association parameter storage module 404 pushes the association parameters into the global filter array. When the dimension information or indicator information of the active component changes, the association parameter generation module 402 combines the active component's identifier ID, the changed dimension information, and indicator information to form new association parameters. The association parameter update module 406 searches for the corresponding association parameter for the active component in the global filter array based on the identifier ID in the new association parameter and replaces the found association parameter with the new one. The correlation parameter comparison module 408 obtains the static attribute value of the corresponding passive component as the first comparison data during the lifecycle of the reusable component, and obtains the correlation parameter of the corresponding active component in the global filter array as the second comparison data. The first comparison data is compared with the second comparison data. If the comparison result is inconsistent, the chart update module 410 calls the corresponding interface to obtain new chart data to update the view according to the configuration parameters of the passive component and the correlation parameter of the corresponding active component in the global filter array. At the same time, the static attribute value of the corresponding passive component in the reusable component is updated to the correlation parameter of the corresponding active component in the global filter array. If the comparison result is consistent, no update operation is performed.
[0058] The specific details of the chart linkage update device in this embodiment can be understood by referring to the chart linkage update method in the above embodiment. The chart linkage update device in this embodiment and the chart linkage update method described above have the same advantages over the prior art, and will not be repeated here.
[0059] In one embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as follows: Figure 5As shown in the figure, the computer device includes a processor A01, a network interface A02, a display screen A04, an input device A05, and a memory (not shown) connected via a system bus. The processor A01 provides computing and control capabilities. The memory includes internal memory A03 and a non-volatile storage medium A06. The non-volatile storage medium A06 stores an operating system B01 and a computer program B02. The internal memory A03 provides an environment for the operation of the operating system B01 and the computer program B02 stored in the non-volatile storage medium A06. The network interface A02 is used to communicate with external terminals via a network connection. When the computer program is executed by the processor A01, it implements the graph linkage update method based on the React framework in the above embodiment. The display screen A04 can be a liquid crystal display or an e-ink display. The input device A05 can be a touch layer covering the display screen, or buttons, a trackball, or a touchpad mounted on the computer device casing, or an external keyboard, touchpad, or mouse, etc.
[0060] This application also provides a computer-readable storage medium storing computer instructions. When these instructions are executed on a computer, the computer performs the technical solution of the chart-based linked update method based on the React framework described in the above embodiments. The computer-readable storage medium includes permanent and non-permanent, removable and non-removable media, and can be implemented using any method or technology to store information. The information can be computer-readable instructions, data structures, program modules, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information accessible by a computing device.
[0061] This application also provides a computer program product, which includes a computer program stored in a computer-readable storage medium. At least one processor can read the computer program from the computer-readable storage medium. When the at least one processor executes the computer program, it can implement the technical solution of the chart linkage update method based on the React framework in the above embodiments. The processor executing the computer program can at least implement the following method steps:
[0062] Step 102: When establishing the linkage relationship between the active component and the passive component, generate the association parameters based on the state information of the active component;
[0063] Step 104: Save the associated parameters using the object created in the React project to store the associated parameters;
[0064] Step 106: When the state information of the active component changes, generate new association parameters, update the configuration parameters of the passive component according to the new association parameters, or replace the association parameters stored in the object with the new association parameters.
[0065] Step 108: Obtain the configuration parameters of the passive component through the reusable component created in the React project, obtain the associated parameters stored in the object, compare the configuration parameters of the passive component with the associated parameters stored in the object, and determine whether to obtain new chart data to update the view based on the comparison result.
[0066] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create a machine for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.
[0067] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.
[0068] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.
[0069] The above are merely embodiments of this application and are not intended to limit the scope of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of the claims of this application.
Claims
1. A method for linked chart updates based on the React framework, characterized in that, include: When establishing the linkage relationship between active and passive components, association parameters are generated based on the status information of the active component. Specifically, for global linkage, the active component is a filtering component, the passive component is a chart component, and the association parameters are formed by combining the active component's identifier ID, dimension information, and indicator information. For local linkage, both the active component and the passive component are chart components, and the association parameters are formed by combining the active component's dimension information and indicator information. The associated parameters are stored in an object created in the React project to store the associated parameters; wherein, for the case of global linkage, the object is a global filter array created in the React project; for the case of local linkage, the associated parameters are assigned to the subordinate data in the configuration parameters of the passive component, and at the same time, the associated parameters are assigned to the key-value of the corresponding passive component under the object; When the state information of the active component changes, a new association parameter is generated. For local linkage, the subordinate data in the configuration parameters of the passive component is updated according to the new association parameter. For global linkage, the association parameter corresponding to the active component is found in the global filter array according to the identifier ID in the new association parameter, and the association parameter stored in the global filter array as the object is replaced with the new association parameter. The configuration parameters of the passive component are obtained through a reusable component created in the React project. The new associated parameters stored in the object are then obtained. The configuration parameters of the passive component are compared with the new associated parameters stored in the object. Based on the comparison result, it is determined whether to obtain new chart data to update the view.
2. The chart linkage update method based on the React framework according to claim 1, characterized in that, The process of generating new association parameters when the state information of the active component changes, and updating the subordinate data in the configuration parameters of the passive component based on the new association parameters for local linkage, includes: When the dimensional or indicator information of the active component changes, new association parameters are formed by combining the changed dimensional and indicator information. The dependent data in the configuration parameters of the passive component are reassigned based on the new association parameters.
3. The chart linkage update method based on the React framework according to claim 2, characterized in that, The process of obtaining configuration parameters of a passive component through a reusable component created in a React project, obtaining new association parameters stored in the object, comparing the configuration parameters of the passive component with the new association parameters stored in the object, and determining whether to obtain new chart data to update the view based on the comparison result includes: For partial linkage, the subordinate data in the configuration parameters of the passive component is obtained as the first comparison data during the lifecycle of the reusable component, and the key value of the corresponding passive component under the object is obtained as the second comparison data. The first comparison data is compared with the second comparison data. If the comparison results are inconsistent, the corresponding interface is called according to the configuration parameters of the passive component to obtain new chart data to update the view. At the same time, the key value of the corresponding passive component under the object is updated according to the subordinate data in the configuration parameters of the passive component.
4. The chart linkage update method based on the React framework according to claim 1, characterized in that, In the case of global linkage, when establishing the linkage relationship between the active component and the passive component, the associated parameters are generated based on the state information of the active component, including: Add a global filter property for the corresponding chart component to the static properties of the reusable component, and use the configuration parameters when the chart component is created as the initial value of the global filter property for the corresponding chart component. The associated parameters are formed by combining the identifier ID, dimension information, and indicator information of the active component.
5. The chart linkage update method based on the React framework according to claim 4, characterized in that, For globally linked scenarios, the associated parameters are stored through an object created in the React project to store the associated parameters, including: Use the global filter array created in the React project as an object to store the associated parameters, and push the associated parameters into the global filter array.
6. The chart linkage update method based on the React framework according to claim 5, characterized in that, When the state information of the active component changes, new association parameters are generated. For global linkage, the association parameters corresponding to the active component are searched in the global filter array according to the identifier ID in the new association parameters, and the association parameters stored in the global filter array, which is the object, are replaced with the new association parameters, including: When the dimensional or indicator information of the active component changes, a new association parameter is formed by combining the active component's identifier ID, the changed dimensional information, and the indicator information. Based on the identifier ID in the new association parameter, search the global filter array for the corresponding association parameter of the active component, and replace the found association parameter with the new association parameter.
7. The chart linkage update method based on the React framework according to claim 6, characterized in that, The process of obtaining configuration parameters of a passive component through a reusable component created in a React project, obtaining new association parameters stored in the object, comparing the configuration parameters of the passive component with the new association parameters stored in the object, and determining whether to obtain new chart data to update the view based on the comparison result includes: For global linkage, the static attribute value of the corresponding passive component is obtained as the first comparison data during the lifecycle of the reusable component, and the associated parameter of the corresponding active component in the global filter array is obtained as the second comparison data. The first comparison data is compared with the second comparison data. If the comparison results are inconsistent, the corresponding interface is called to obtain new chart data to update the view based on the configuration parameters of the passive component and the associated parameters of the corresponding active component in the global filter array. At the same time, the static attribute values of the corresponding passive component in the reusable component are updated to the associated parameters of the corresponding active component in the global filter array.
8. A chart-linked update device based on the React framework, characterized in that, include: The association parameter generation module is used to generate association parameters based on the state information of the active component when establishing a linkage relationship between the active and passive components, and to generate new association parameters when the state information of the active component changes. Specifically, for global linkage, the active component is a filtering component, and the passive component is a chart component; the association parameters are formed by combining the active component's identifier ID, dimension information, and indicator information. For local linkage, both the active and passive components are chart components; the association parameters are formed by combining the active component's dimension information and indicator information. The associated parameter storage module is used to store the associated parameters through an object created in the React project. For global linkage, the object is a global filter array created in the React project. For local linkage, the associated parameters are assigned to the subordinate data in the configuration parameters of the passive component, and the associated parameters are also assigned to the key-value pairs of the corresponding passive components under the object. The associated parameter update module is used to update the subordinate data in the configuration parameters of the passive component according to the new associated parameters for local linkage, or to find the associated parameter corresponding to the active component in the global filter array according to the identifier ID in the new associated parameters for global linkage, and replace the associated parameter stored in the global filter array as the object with the new associated parameter. The associated parameter comparison module is used to obtain the configuration parameters of the passive component through the reusable component created in the React project, obtain the new associated parameters stored in the object, compare the configuration parameters of the passive component with the new associated parameters stored in the object, and obtain the comparison result. The chart update module is used to determine whether to retrieve new chart data to update the view based on the comparison results.
9. A computer device, characterized in that, include: A processor, and a memory communicatively connected to the processor; The memory stores computer programs; The processor executes the computer program stored in the memory to implement the chart linkage update method based on the React framework as described in any one of claims 1 to 7.
10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions, which, when executed by a processor, are used to implement the chart linkage update method based on the React framework as described in any one of claims 1 to 7.
11. A computer program product, characterized in that, Includes a computer program that, when executed by a processor, implements the chart linkage update method based on the React framework as described in any one of claims 1 to 7.