A knowledge visualization development method and system for a data visualization large screen
By developing a knowledge visualization method for data visualization dashboards and utilizing communication between abstract components and sibling components, the low development efficiency of traditional chart components in knowledge visualization is solved, enabling rapid knowledge retrieval and display, and improving scalability and efficiency.
Patent Information
- Application Number
- CN202111294713.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2021-11-03
- Publication Date
- 2025-11-25
- Estimated Expiration
- 2041-11-03
AI Technical Summary
Existing data visualization application systems lack versatility, resulting in low development efficiency of traditional chart components in knowledge visualization and difficulty in quickly realizing knowledge query and display capabilities.
By dividing different knowledge visualization functional components, abstract knowledge visualization components are generated, and communication between sibling components based on knowledge visualization data is designed to establish a data flow channel, perform data format conversion and set the interaction relationship between components, so as to realize rapid knowledge query and display.
It improves the knowledge retrieval and display capabilities of traditional chart components within data visualization dashboards, enhancing development efficiency and application scalability.
Smart Images

Figure CN114218394B_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the fields of data visualization technology and data application technology, and in particular to a knowledge visualization development method and system for data visualization dashboards. Background Technology
[0002] Knowledge visualization based on knowledge graphs can further expand the application scope of data visualization technology and improve the data exploration and analysis capabilities during the visualization process. However, current data visualization application systems mainly use various types of charts to visualize data, lacking applications for the visualization and interactive exploration of knowledge data.
[0003] In the process of realizing knowledge data visualization, knowledge visualization capabilities often need to be used in conjunction with traditional chart components. To enable chart components to possess the search and display capabilities required for knowledge visualization, developing each individual component individually often results in high code duplication, which is time-consuming and labor-intensive. Existing technologies lack universal development methods for quickly reusing knowledge visualization capabilities from traditional chart components, hindering the improvement of engineering development efficiency. Summary of the Invention
[0004] The present invention aims to at least partially solve one of the technical problems in the related art.
[0005] Therefore, this invention proposes a knowledge visualization development method and system for data visualization dashboards, and provides a development template for front-end components to realize knowledge visualization based on knowledge graphs. It can provide traditional chart components in data visualization dashboards with the knowledge query and knowledge display capabilities required for knowledge visualization, solve the limitations of current front-end visualization component technology in realizing knowledge visualization in the field of knowledge graphs, and improve the scalability and development efficiency of applications.
[0006] Therefore, the first objective of this invention is to propose a knowledge visualization development method for data visualization dashboards, comprising:
[0007] Different knowledge visualization functional components are divided, and knowledge visualization abstract components are generated based on the characteristics of the different knowledge visualization functional components;
[0008] Based on the knowledge visualization abstract component, design sibling component communication based on knowledge visualization data to generate a data flow channel for component library communication;
[0009] Based on the data flow channel, the data format of different knowledge visualization abstract components in the component library is converted and automatically adapted to the current visualization chart to format the knowledge query results;
[0010] Based on the formatted knowledge query results, and according to the usage rules of the knowledge visualization abstract component, the components in the component library are combined and matched, and the interaction relationships between the components are set to realize knowledge visualization for the data visualization dashboard.
[0011] This invention discloses a knowledge visualization development method for data visualization dashboards. The method involves dividing different knowledge visualization functional components and generating abstract knowledge visualization components based on their characteristics. Based on these abstract components, it designs sibling component communication based on knowledge visualization data, creating a data flow channel for component library communication. Using this data flow channel, it performs data format conversion on different abstract knowledge visualization components in the component library, automatically adapting to the current visualization chart to format the knowledge query results. Based on the formatted knowledge query results, it combines components in the component library according to the usage rules of the abstract knowledge visualization components and sets the interaction relationships between components, thereby achieving knowledge visualization for data visualization dashboards. This invention can quickly provide traditional chart-type components within data visualization dashboards with the knowledge query and display capabilities required for knowledge visualization, overcoming the limitations of current front-end visualization component technologies in knowledge graph domains and improving application scalability and development efficiency.
[0012] In addition, the knowledge visualization development method for data visualization dashboards according to the above embodiments of the present invention may also have the following additional technical features:
[0013] Furthermore, in one embodiment of the present invention, the knowledge visualization abstraction component includes: a knowledge query abstraction component and a knowledge display abstraction component; wherein, the knowledge query abstraction component includes: initiating a knowledge query request using a knowledge graph stored in a graph database as a data source, and distributing the knowledge query results to each knowledge display abstraction component; the knowledge display abstraction component includes: continuously monitoring the update status of the knowledge query results, and converting the knowledge query results into display data that can be used by chart components according to a specified data format.
[0014] Furthermore, in one embodiment of the present invention, the design of sibling component communication based on knowledge visualization data includes: designing visualization components with sibling relationships based on a large-screen canvas, the canvas container carrying the visualization components, the container component of the canvas container and the visualization components having a parent-child relationship, adding the knowledge visualization abstract component, the knowledge visualization abstract component serving as a child component of the visualization components, and if the parent components of the knowledge visualization abstract component have a sibling relationship, then the knowledge query abstract component and the knowledge display abstract component are considered to have a pseudo-sibling relationship.
[0015] Furthermore, in one embodiment of the present invention, the step of generating a data flow channel for component library communication includes: the knowledge query abstract component storing the identifier uid of the knowledge display abstract component that has a data linkage relationship with the knowledge query abstract component in its internal attribute uidList; submitting the corresponding query results to the store repository based on the knowledge query behavior corresponding to the identifier uid, and storing them with the identifier uid as the key; the knowledge display abstract component monitoring the data changes in the store repository in real time, obtaining the corresponding data with its own identifier uid as the key, and processing it into formatted data usable by the visualization component.
[0016] Furthermore, in one embodiment of the present invention, the data format conversion of different knowledge visualization abstract components in the component library includes: designing a hierarchical structure for storing data formats using a layer-by-layer processing logic, using an array as the storage method, and processing the knowledge query results into formatted data usable by the chart components layer by layer using a hierarchical traversal method.
[0017] Furthermore, in one embodiment of the present invention, the layer-by-layer processing logic includes:
[0018] a. Determine the string content stored at index 0 of the passed parameter dataConfig array. If the string in dataConfig[0] is "array", proceed to b; if the string in dataConfig[0] is "object", proceed to c.
[0019] b. Determine whether the pointer stored in dataConfig[1] is null. If the pointer is null, proceed to d; if the pointer is not null, proceed to e.
[0020] c. Iterate through all attributes stored after index 0 of the array and process them one by one. If the attribute is not a pointer type, proceed to d; if the attribute is a pointer, proceed to e.
[0021] d. Perform the assignment operation based on the "attribute-query result" correspondence determined when configuring the component interaction relationship;
[0022] e. Return to a, use the current pointer value as the parameter, and call it again to process the next level.
[0023] To achieve the above objectives, a second aspect of the present invention proposes a knowledge visualization development system for data visualization dashboards, comprising:
[0024] The component generation module is used to divide different knowledge visualization functional components and generate knowledge visualization abstract components based on the characteristics of the different knowledge visualization functional components.
[0025] The component communication design module is used to design sibling component communication based on knowledge visualization data according to the knowledge visualization abstract component, and generate a data flow channel for component library communication.
[0026] The data processing module is used to convert the data format of different knowledge visualization abstract components in the component library based on the data flow channel, and automatically adapt to the current visualization chart to format the knowledge query results.
[0027] The results display module is used to combine components in the component library based on the formatted knowledge query results and according to the usage rules of the knowledge visualization abstract component, and to set the interaction relationships between components to realize knowledge visualization for data visualization dashboards.
[0028] This invention discloses a knowledge visualization development system for data visualization dashboards. The system comprises a component generation module, used to divide different knowledge visualization functional components and generate abstract knowledge visualization components based on their characteristics; a component communication design module, used to design sibling component communication based on knowledge visualization data according to the abstract knowledge visualization components, generating a data flow channel for component library communication; a data processing module, used to convert the data format of different abstract knowledge visualization components in the component library based on the data flow channel, automatically adapting to the current visualization chart to format the knowledge query results; and a result display module, used to combine components in the component library based on the formatted knowledge query results and according to the usage rules of the abstract knowledge visualization components, and set the interaction relationships between components to achieve knowledge visualization for data visualization dashboards. This invention can provide traditional chart-type components within data visualization dashboards with the knowledge query and display capabilities required for knowledge visualization, overcoming the limitations of current front-end visualization component technology in achieving knowledge visualization in the knowledge graph field, and improving the scalability and development efficiency of applications.
[0029] Additional aspects and advantages of the invention will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of the invention. Attached Figure Description
[0030] The above and / or additional aspects and advantages of the present invention will become apparent and readily understood from the following description of the embodiments taken in conjunction with the accompanying drawings, wherein:
[0031] Figure 1 A flowchart illustrating the knowledge visualization development method for data visualization dashboards provided in this embodiment of the invention;
[0032] Figure 2This is a schematic diagram of the overall architecture of the data visualization large screen provided in an embodiment of the present invention;
[0033] Figure 3 This is a structural diagram of the knowledge query abstract component class provided in an embodiment of the present invention;
[0034] Figure 4 This is a schematic diagram illustrating the structure of the knowledge demonstration abstract component class provided in the embodiments of the present invention;
[0035] Figure 5 This is a schematic diagram illustrating the relationship between large-screen components provided in an embodiment of the present invention;
[0036] Figure 6 This is a comparative diagram of the communication data flow paths between the old and new components provided in an embodiment of the present invention;
[0037] Figure 7 This is a schematic diagram of the calling process of the knowledge visualization method provided in the embodiments of the present invention;
[0038] Figure 8 This is a schematic diagram of the storage structure of each layer of the hierarchical structure of the data format provided in the embodiments of the present invention.
[0039] Figure 9 This is a schematic diagram of the storage structure of the data format provided in an embodiment of the present invention;
[0040] Figure 10 This is a schematic diagram of the process for processing query results layer by layer according to an embodiment of the present invention;
[0041] Figure 11 This is a schematic diagram of the structure of a knowledge visualization development system for data visualization dashboards provided in an embodiment of the present invention. Detailed Implementation
[0042] Embodiments of the present invention are described in detail below, examples of which are illustrated in the accompanying drawings, wherein the same or similar reference numerals denote the same or similar elements or elements having the same or similar functions throughout. The embodiments described below with reference to the accompanying drawings are exemplary and intended to explain the present invention, and should not be construed as limiting the present invention.
[0043] The following describes, with reference to the accompanying drawings, a knowledge visualization development method and system for data visualization dashboards according to embodiments of the present invention. First, the knowledge visualization development method for data visualization dashboards according to embodiments of the present invention will be described with reference to the accompanying drawings.
[0044] This invention aims to achieve knowledge visualization on data visualization dashboards. It requires the dashboard's internal component library to be bound to a graph database as a data source, establishing interactive data relationships between components. Components capable of performing queries (such as search boxes and selectors) perform knowledge searches based on the knowledge graph stored in the graph database. The results are then displayed through other visualization chart components. To achieve knowledge visualization on data visualization dashboards, this invention designs and develops a knowledge visualization abstract component. This abstract component is used as a sub-component of the dashboard components, giving it the necessary knowledge query and display capabilities. Appropriate component combinations enable interactive knowledge exploration. Specifically, as follows... Figure 2 As shown.
[0045] Figure 1 This is a flowchart of a knowledge visualization development method for a data visualization dashboard according to an embodiment of the present invention.
[0046] like Figure 1 As shown, this knowledge visualization development method for data visualization dashboards includes the following steps:
[0047] Step S1: Divide the different knowledge visualization functional components and generate knowledge visualization abstract components based on the characteristics of the different knowledge visualization functional components.
[0048] Understandably, to ensure that traditional component libraries in visual dashboards can quickly acquire the knowledge query and display capabilities required for knowledge visualization, and to avoid writing excessively repetitive code across multiple components, thereby improving development efficiency, this invention designs to achieve the reuse of knowledge visualization functions through abstract components. Simply write an abstract component with knowledge visualization capabilities, and then import and use the knowledge visualization abstract component tag within each component to quickly reuse knowledge visualization capabilities.
[0049] Specifically, abstract components are similar to regular components, but they do not present any content to the DOM. They are generally used to add extra functionalities or to process the rendering of components. Since knowledge visualization only requires knowledge retrieval and display using a large-screen component library without additional rendering, abstract components efficiently reuse the knowledge visualization functionality of the large-screen component library. The knowledge visualization abstract component designed in this invention acts as a sub-component of the data visualization component, providing corresponding knowledge visualization functions without affecting the normal rendering of the component's original HTML code.
[0050] Based on the Vue framework, the knowledge visualization abstraction component needs to be implemented within the component... <template>The tag is used internally, and the html code of the component is wrapped by the abstract component tag, that is:
[0051]
[0052] Further, to realize knowledge visualization, the large-screen component should have two main functions: a knowledge query abstract component for knowledge query and a knowledge display abstract component for knowledge display.
[0053] Specifically, the knowledge query abstract component is generally applicable to components that can perform query behaviors, such as search box components, selector components, etc. The user inputs keywords used for knowledge query using this type of component, and the abstract component initiates a knowledge query request with the knowledge graph stored in the graph database as the data source. The query result will be distributed to each knowledge display abstract component.
[0054] The structure of the knowledge query abstract component class is shown in Figure 3
[0055] uidList: a private attribute, a set of knowledge display component uids that have an interactive relationship with the knowledge query component.
[0056] searchData: a public method, provided to the component for calling, for knowledge query.
[0057] pushData: a private method, distributing knowledge query results to corresponding knowledge display components.
[0058] Specifically, the knowledge display abstract component is generally applicable to chart-type components that can display data, such as bar chart components, table components, etc. This type of component provides the abstract component with the data format required by itself, and the abstract component continuously listens to the update of the knowledge query result and converts the query result into display data that can be used by the chart-type component according to the specified data format.
[0059] The structure of the knowledge display abstract component class is shown in Figure 4
[0060] uid: a public attribute, the unique identifier of the knowledge display component. When determining the interactive relationship with the knowledge query component, it is provided to the query component as the key required to receive the knowledge query result.
[0061] data: a public attribute, the data to be displayed by the knowledge display component.
[0062] dataConfig: a private attribute, the display data structure specified by the knowledge display component according to the characteristics of the chart itself.
[0063] setDataConfig: public method, provided to the component for setting dataConfig to ensure that the component can obtain correctly formatted display data.
[0064] createUid: private method, create a random number string as the component uid.
[0065] transData: private method, convert the knowledge query result into structured data required by the component according to dataConfig.
[0066] watchChange: private method, listen to the new knowledge query result.
[0067] Step S2, according to the knowledge visualization abstract component, design the communication between the brother components based on the knowledge visualization data, and generate the data flow channel for the component library communication.
[0068] It can be understood that the original data visualization large screen component development draws on the componentization idea. Under the vue development framework, each large screen component is an instance of vue.component, and the data flow direction is specified to flow from the parent component to the child component. The data displayed by the large screen visualization chart component is first parsed by the parent component, and then passed to the child component instance for assignment and display. There is no data exchange between brother components. If the original parent-child component communication method is used, the knowledge query component needs to dispatch the query result to the upper parent component in the form of an event, and the parent component decides to distribute it to the corresponding child component to complete the knowledge display. However, realizing knowledge visualization requires more data flow between components, which is difficult for the parent component to handle uniformly, and also makes the data flow path too complex and causes confusion. In view of the complexity of the original parent-child component communication method, the present application designs a knowledge visualization abstract component based on the vue development framework, uses the vuex state management mode, bypasses the parent component, simplifies the data flow path, realizes the rapid communication between brother components, and completes the knowledge exploration based on the knowledge graph.
[0069] Specifically, Figure 5 The schematic diagram of the relationship between the large screen components is shown in Figure 5 .
[0070] The visualization components in the large screen canvas are in a brother relationship, and the canvas container carries these visualization components, and the container component and the visualization component are in a parent-child relationship. After adding the knowledge visualization abstract component, the abstract component exists as a child component of the visualization component. At this time, there will be a false brother component relationship between these abstract components. That is, when the parent components of the abstract components are in a brother relationship, these abstract components can be regarded as pseudo-brother relationships. The brother component communication scheme proposed by the present application is implemented between these pseudo-brother relationship components.
[0071] Further, Figure 6 A comparison chart of the data flow paths of the new and old components is shown in Figure 6
[0072] The core of Vuex is the store warehouse, and the A component submits data to the store warehouse, and other components can obtain the data by accessing the store warehouse. The knowledge query abstract component stores the unique identifier uid of the knowledge display abstract component having a data linkage relationship with it in the internal attribute uidList, and according to the knowledge query behavior corresponding to the uid, the corresponding query result is submitted to the store warehouse for storage with the uid as the key. The knowledge display abstract component always listens to the data change in the store warehouse, obtains the corresponding data with the uid as the key, and further processes it into formatted data available to the visualization component.
[0073] The knowledge visualization abstract component changes the inherent data flow direction, so that each component can more conveniently complete the data exchange between components, and at the same time, the visualization component itself does not need to consider how to communicate with other components and how to format data, but only needs to use the interface function provided by the abstract component class to initiate a knowledge search request or obtain data meeting the component display requirements, and the operation of data exchange is completed by the abstract component.
[0074] Further, Figure 7 A timing chart of the implementation of the knowledge visualization function is shown in Figure 7 The calling process of the knowledge visualization method proposed by the application is shown.
[0075] Specifically, the user drags a component in the component library to the large screen canvas to create a component instance, and the internal abstract component creates a corresponding function class instance. The knowledge display function instance generates a unique identifier uid after being created, and determines the required format of the component display data. The user configures the interaction relationship of the component on the visualization page, determines the correspondence between the knowledge query instruction and the display component with the uid as the identifier (different knowledge display components can correspond to different knowledge query instructions), and perfects the parameter information such as the data source required for the query. The knowledge display function instance always listens to the change of the store warehouse with the uid as the key. The user initiates a knowledge query behavior by using the knowledge query component, the component calls the query function instance to execute the query request on the target data source, and stores the query result data of the corresponding query instruction in the store warehouse with the uid in the uidList as the key. The knowledge display function instance listens to the change of the store warehouse, obtains the new query result, converts it into structured data available to the component, and performs knowledge display, thereby realizing the knowledge visualization of the data-oriented visualization large screen.
[0076] Step S3: Based on the data flow channel, perform data format conversion on different knowledge visualization abstract components in the component library, and automatically adapt to the current visualization chart to format the knowledge query results.
[0077] Understandably, data visualization dashboard component libraries offer a rich collection of chart components to support knowledge visualization and display functions. Most of these components are based on ECharts and AnTV chart libraries. However, different chart components often require vastly different data formats, and due to format mismatches, knowledge query results cannot be used directly. Therefore, the knowledge visualization abstract component needs to adapt to the data formats of various chart components, automatically processing knowledge query results into formatted data usable by the visualization component. This invention formats the data, enabling the knowledge display abstract component to convert data formats and automatically adapt to the current visualization chart.
[0078] Specifically, the hierarchical structure of the data format, through analysis and sorting out the data structure characteristics required by chart components, reveals that the data used for chart display is basically a combination of array type and object type.
[0079] As an example: 1) The data required for a bar chart is: [{x:"Mon",y:10},{x:"Tue",y:52},{x:"Wed",y:200},{x:"Thu",y:334},{x:"Fri",y:220}], that is, storing multiple objects with attributes x and y in an array. 2) The data required for a two-way bar chart is: [{x:"Income",y:[320,302,341]},{x:"Expenditure",y:[-120,-132,-101]}], that is, storing multiple objects with attributes x and y in an array, where the value of attribute y is an array type. 3) The data required for the bubble chart is: [{id:"1990",data:[{size:17096869,name:"Australia"},{size:27662440,name:"Canada"}]},{id:"2015",data:[{size:23968973,name:"Australia"},{size:35939927,name:"Canada"}]}]. That is, multiple objects with attributes id and data are stored in the array, where the value of the attribute data is an array type, and data contains multiple objects with attributes size and name.
[0080] Furthermore, based on the commonalities and characteristics of the data formats required for charts, and to facilitate automated data format conversion later, this invention designs a hierarchical structure for storing data formats, corresponding to the `dataConfig` attribute of the knowledge display function class. The hierarchical structure of `dataConfig` uses an array for storage, and the storage structure of each level is as follows: Figure 8 As shown.
[0081] Specifically, the first position of the array stores a string, representing the data type of the current level. Depending on dataConfig[0], the following possible situations will occur: 1) If the current level is an object type, i.e., dataConfig[0] = "object", starting from the second position, the attributes that the object type of this level should include are stored in sequence. The attributes are generally basic data types such as strings and numbers, or they can be reference types such as objects or arrays. When it is a reference type, it indicates that there is a structure of the next level. 2) If the current level is an array type, i.e., dataConfig[0] = "array", then a pointer is stored in the second position. The pointer has two cases: ① If the pointer is null, i.e., dataConfig[1] = null, it means that the elements in the array are not object types. A number is stored in the third position to represent the length of the array; ② If the pointer is not null, i.e., dataConfig[1] points to the structure of the next level, it means that the elements in the array are object types.
[0082] Furthermore, taking the three charts mentioned above as examples, their data format storage structure is as follows: Figure 9 As shown.
[0083] Specifically, by designing the data format required for the charts as a hierarchical structure, the knowledge query results can be processed layer by layer into formatted data usable by the chart components using a hierarchical traversal approach. This invention proposes a method for processing query results layer by layer, which is invoked when a certain level needs to be processed. The execution logic of this method is as follows:
[0084] 1. First, determine the string content stored at index 0 of the passed parameter dataConfig array. If the string in dataConfig[0] is "array", proceed to step 2; if the string in dataConfig[0] is "object", proceed to step 3.
[0085] 2. Continue to check whether the pointer stored in dataConfig[1] is null. If the pointer is null, proceed to step 4; if the pointer is not null, proceed to step 5.
[0086] 3. Iterate through all attributes stored after index 0 of the array and process them one by one. If the attribute is not a pointer type, proceed to step 4; if the attribute is a pointer, proceed to step 5.
[0087] 4. Perform the assignment operation based on the "attribute-query result" correspondence determined when configuring the component interaction relationship.
[0088] 5. Return to step 1, and with the value of this pointer as the parameter, call this method again to process the next level.
[0089] Furthermore, the corresponding process is as follows: Figure 10 As shown.
[0090] Step S4: Based on the formatted knowledge query results, according to the usage rules of the knowledge visualization abstract component, the components in the component library are combined and matched, and the interaction relationships between the components are set to realize knowledge visualization for the data visualization dashboard.
[0091] This invention discloses a knowledge visualization development method for data visualization dashboards. It divides different knowledge visualization functional components and generates abstract knowledge visualization components based on the characteristics of each component. Based on these abstract components, it designs sibling component communication based on knowledge visualization data, creating a data flow channel for component library communication. Using this data flow channel, it converts the data format of different abstract knowledge visualization components in the component library, automatically adapting to the current visualization chart to format the knowledge query results. Based on the formatted knowledge query results, it combines components in the component library according to the usage rules of the abstract knowledge visualization components and sets the interaction relationships between components, thus realizing knowledge visualization for data visualization dashboards. This invention can quickly provide traditional chart-type components within data visualization dashboards with the knowledge query and display capabilities required for knowledge visualization, overcoming the limitations of current front-end visualization component technologies in knowledge graph domains for knowledge visualization, and improving application scalability and development efficiency.
[0092] Next, with reference to the accompanying drawings, a knowledge visualization development system for data visualization dashboards proposed according to an embodiment of the present invention is described.
[0093] like Figure 11 As shown, the system 10 includes: a component generation module 100, a component communication design module 200, a data processing module 300, and a result display module 400.
[0094] The component generation module 100 is used to divide different knowledge visualization functional components and generate knowledge visualization abstract components based on the characteristics of different knowledge visualization functional components.
[0095] The component communication design module 200 is used to design sibling component communication based on knowledge visualization data according to the knowledge visualization abstract component, and to generate a data flow channel for component library communication.
[0096] The data processing module 300 is used to convert the data format of different knowledge visualization abstract components in the component library based on the data flow channel, and automatically adapt to the current visualization chart to format the knowledge query results.
[0097] The results display module 400 is used to combine components in the component library based on the formatted knowledge query results and according to the usage rules of the knowledge visualization abstract component, and to set the interaction relationship between the components to realize knowledge visualization for the data visualization dashboard.
[0098] Furthermore, in one embodiment of the present invention, the device 10 further includes a writing module for writing abstract components with knowledge visualization capabilities, and for reusing knowledge visualization capabilities by introducing and using knowledge visualization abstract component tags within each component, including:
[0099] Based on the Vue development framework, the knowledge visualization abstract component is applied inside the template tag of the component, and the HTML code of the component is wrapped with the knowledge visualization abstract component tag.
[0100] Furthermore, in one embodiment of the present invention, the above-mentioned component communication design module 200 includes: a knowledge query abstract component module and a knowledge display abstract component module; wherein,
[0101] The Knowledge Query Abstraction Component Module is used to: initiate knowledge query requests using the knowledge graph stored in the graph database as the data source, and distribute the knowledge query results to various knowledge display abstraction components;
[0102] The Knowledge Display Abstract Component module is used to: continuously monitor updates to knowledge query results and convert those results into display data that can be used by chart components according to a specified data format.
[0103] Furthermore, in one embodiment of the present invention, the above-mentioned component communication design module 200 is also used to process data through a hierarchical processing method to optimize the automated processing performance of the data processing module.
[0104] According to an embodiment of the present invention, a knowledge visualization development system for data visualization dashboards includes: a component generation module for dividing different knowledge visualization functional components and generating abstract knowledge visualization components based on the characteristics of different functional components; a component communication design module for designing sibling component communication based on knowledge visualization data according to the abstract knowledge visualization components, generating a data flow channel for component library communication; a data processing module for converting the data format of different abstract knowledge visualization components in the component library based on the data flow channel, automatically adapting to the current visualization chart to format the knowledge query results; and a result display module for combining components in the component library based on the formatted knowledge query results and according to the usage rules of the abstract knowledge visualization components, and setting the interaction relationships between components to realize knowledge visualization for data visualization dashboards. This invention can provide traditional chart-type components within data visualization dashboards with the knowledge query and display capabilities required for knowledge visualization, overcoming the limitations of current front-end visualization component technologies in realizing knowledge visualization in the knowledge graph field, and improving the scalability and development efficiency of applications.
[0105] It should be noted that the foregoing explanation of the knowledge visualization development method embodiment for data visualization dashboards also applies to the knowledge visualization development system for data visualization dashboards in this embodiment, and will not be repeated here.
[0106] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this invention, "a plurality of" means at least two, such as two, three, etc., unless otherwise explicitly specified.
[0107] In the description of this specification, the references to "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of the present invention. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of different embodiments or examples.
[0108] Although embodiments of the present invention have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting the present invention. Those skilled in the art can make changes, modifications, substitutions and variations to the above embodiments within the scope of the present invention.< / template>
Claims
1. A knowledge visualization development method for large data visualization dashboards, characterized in that, Includes the following steps: Different knowledge visualization functional components are divided, and knowledge visualization abstract components are generated based on the characteristics of the different knowledge visualization functional components; Based on the knowledge visualization abstract component, design sibling component communication based on knowledge visualization data to generate a data flow channel for component library communication; Based on the data flow channel, the data format of different knowledge visualization abstract components in the component library is converted and automatically adapted to the current visualization chart to format the knowledge query results; Based on the formatted knowledge query results, and according to the usage rules of the knowledge visualization abstract component, the components in the component library are combined and matched, and the interaction relationships between the components are set to realize knowledge visualization for the data visualization dashboard. The knowledge visualization abstract component includes: a knowledge query abstract component and a knowledge display abstract component; wherein... The knowledge query abstraction component includes: initiating a knowledge query request using a knowledge graph stored in a graph database as the data source, and distributing the knowledge query results to each knowledge display abstraction component; The knowledge display abstract component includes: continuously monitoring the updates of the knowledge query results, and converting the knowledge query results into display data that can be used by chart components according to a specified data format; The design is based on sibling component communication using knowledge visualization data, including: Visualization components based on a large-screen canvas design with sibling relationships are used. The canvas container carries the visualization components, and the container components of the canvas container and the visualization components have a parent-child relationship. The knowledge visualization abstract component is added, and the knowledge visualization abstract component is a child component of the visualization components. If the parent components of the knowledge visualization abstract component have a sibling relationship, then the knowledge query abstract component and the knowledge display abstract component are considered to have a pseudo-sibling relationship. The process of generating a data flow channel for component library communication includes: The knowledge query abstract component stores the identifier uid of the knowledge display abstract component that has a data linkage relationship with the knowledge query abstract component in its internal attribute uidList; Based on the knowledge query behavior corresponding to the identifier uid, the corresponding query results are submitted to the store repository based on the Vue development framework and stored using the identifier uid as the key; The knowledge display abstraction component monitors data changes in the store repository in real time, retrieves the corresponding data using its own identifier UID as the key, and processes it into formatted data usable by the visualization component.
2. The knowledge visualization development method for data visualization dashboards according to claim 1, characterized in that, The data format conversion of different knowledge visualization abstraction components in the component library includes: The system employs a hierarchical structure for storing data, using arrays as the storage method. It then uses a hierarchical traversal approach to process the knowledge query results into formatted data usable by chart components.
3. The knowledge visualization development method for data visualization dashboards according to claim 2, characterized in that, The layer-by-layer processing logic includes: a. Determine the string content stored at index 0 of the passed parameter dataConfig array. If the string in dataConfig[0] is "array", proceed to b; if the string in dataConfig[0] is "object", proceed to c. b. Determine whether the pointer stored in dataConfig[1] is null. If the pointer is null, proceed to d; if the pointer is not null, proceed to e. c. Iterate through all attributes stored after index 0 of the array and process them one by one. If the attribute is not a pointer type, proceed to d; if the attribute is a pointer, proceed to e. d. Perform the assignment operation based on the "attribute-query result" correspondence determined when configuring the component interaction relationship; e. Return to a, and with the current pointer value as the parameter, call again to process the next level.
4. A knowledge visualization development system for data visualization dashboards using the method described in claim 1, characterized in that, include: The component generation module is used to divide different knowledge visualization functional components and generate knowledge visualization abstract components based on the characteristics of the different knowledge visualization functional components. The component communication design module is used to design sibling component communication based on knowledge visualization data according to the knowledge visualization abstract component, and generate a data flow channel for component library communication. The data processing module is used to convert the data format of different knowledge visualization abstract components in the component library based on the data flow channel, and automatically adapt to the current visualization chart to format the knowledge query results. The results display module is used to combine components in the component library based on the formatted knowledge query results and according to the usage rules of the knowledge visualization abstract component, and to set the interaction relationship between components to realize knowledge visualization for data visualization dashboards. It also includes a module for writing abstract components with knowledge visualization capabilities. Within each component, knowledge visualization abstract component tags are imported and used to reuse knowledge visualization capabilities, including: Based on the Vue development framework, the knowledge visualization abstract component is applied inside the template tag of the component, and the HTML code of the component is wrapped with the knowledge visualization abstract component tag; The component communication design module includes: a knowledge query abstract component module and a knowledge display abstract component module; wherein... The knowledge query abstract component module is used to: initiate a knowledge query request using the knowledge graph stored in the graph database as the data source, and distribute the knowledge query results to each knowledge display abstract component; The knowledge display abstract component module is used to: continuously monitor the updates of the knowledge query results, and convert the knowledge query results into display data that can be used by chart components according to the specified data format; The component communication design module is also used to process data through a hierarchical processing method to optimize the automated processing performance of the data processing module.
Citation Information
Patent Citations
Method, apparatus, storage medium and processor for processing knowledge map
CN109508384A
Associated network knowledge graph visualization component and method
CN113010758A