Heat map generation method and apparatus, electronic device, and storage medium

Abstract

The present application relates to the field of computer, provide a kind of heat map generation method, device, electronic equipment and storage medium, wherein method includes: determining the multi-level structure data of heat map to be generated, and encapsulating folding panel component;In folding panel component, based on iteration component, from the first hierarchical data in multi-level structure data, start execution traversal rendering process, obtain heat map;In traversal rendering process, based on current hierarchical data and its child hierarchical data generate folding main body, folding main body is traversed and rendered, and child hierarchical data is returned as new current hierarchical data to carry out folding main body generation and traversal rendering, until child hierarchical data is the bottom hierarchical data of multi-level structure data.The heat map generation method, device, electronic equipment and storage medium provided by the present application can automatically generate hierarchical folding visual heat map table based on component rendering after accepting multi-level data, which greatly improves the generation efficiency and reliability of heat map table.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer, in particular to a heat map generation method and device, electronic equipment and storage medium. BACKGROUND

[0002] The industry track and drug classification mostly exist hierarchical structure, and the analysis of these businesses often uses heat map to present. At present, the heat map technology in the field of web (World Wide Web, the World Wide Web) mostly tends to display the flattened data, and does not support the data display with multiple levels. For example, the visualization library of Echarts tends to be a short and fast development scheme, and is helpless when encountering complex functions and data with levels.

[0003] In addition, the visualization library D3 developed mainly using SVG (Scalable Vector Graphics, Scalable Vector Graphics) technology is too cumbersome when processing multi-level data, and the size and position of each SVG element need to be calculated. When the data volume is large and the level of data is deep, the amount of developed code will be quite large.

[0004] Therefore, it is an urgent problem for those skilled in the art to provide a reliable and convenient heat map method supporting multi-level structure data display. SUMMARY

[0005] The present application provides a heat map generation method, device, electronic equipment and storage medium to solve the defects of the prior art that do not support data display with multiple levels, complicated calculation and large amount of code.

[0006] The present application provides a heat map generation method, comprising:

[0007] determining multi-level structure data to be generated heat map, and packaging folding panel component;

[0008] In the folding panel component, based on the iteration component, the iteration component starts to execute the traversal rendering process from the first level data in the multi-level structure data, and obtains the heat map;

[0009] In the traversal rendering process, a folding body is generated based on the current level data and its child level data, the folding body is traversed and rendered, and the child level data is returned as a new current level data for folding body generation and traversal rendering until the child level data is the bottom level data of the multi-level structure data.

[0010] According to the heat map generation method provided by the present application, the iteration component starts to execute the traversal rendering process from the first level data in the multi-level structure data, comprising:

[0011] The iteration component determines whether the current level data contains sub-level data;

[0012] In the case that the current level data contains sub-level data, the iteration component generates a sub-component of the iteration component by referring to itself, and passes parameters of the iteration component and the sub-level data to the sub-component to perform a traversal rendering process.

[0013] According to the heat map generation method provided by the application, the folding panel component includes a folding main body and a folding option, the folding main body is generated based on the current level data and its sub-level data, and the traversal rendering of the folding main body includes:

[0014] The folding main body is generated based on the current level data and its sub-level data, the folding option of the folding main body is generated based on the sub-level data, and the content of the folding option is determined based on a template;

[0015] The traversal rendering is performed on the folding main body and the folding option.

[0016] According to the heat map generation method provided by the application, the multi-level structure data adopts a cyclic nested structure of arrays and objects, each display data is stored in an object, the sub-level data of each display data is stored in a children attribute of the object, and the data of the same level is represented in an array form.

[0017] According to the heat map generation method provided by the application, in the multi-level structure data, the attributes of the object include a current level number.

[0018] According to the heat map generation method provided by the application, the iteration component starts the traversal rendering process from the first level data in the multi-level structure data to obtain the heat map, and includes:

[0019] The color value corresponding to each display data in the multi-level structure data is determined;

[0020] Based on the rendering template and method of the iteration component, the color value corresponding to each display data is applied to generate the heat map in the folding panel component.

[0021] According to the heat map generation method provided by the application, after obtaining the heat map, the method further includes:

[0022] In response to an interaction request for the heat map, an operation corresponding to the interaction request is performed on the heat map, the interaction request includes at least one of folding any folding main body in the heat map, penetrating the display data of any folding option, and exporting a heat map image.

[0023] The application further provides a heat map generation device, comprising:

[0024] a data determination unit configured to determine multi-level structure data to be used to generate a heat map, and encapsulate a folding panel component;

[0025] a traversal rendering unit configured to perform a traversal rendering process based on an iteration component starting from first level data in the multi-level structure data in the folding panel component, to obtain the heat map;

[0026] In the traversal rendering process, a folding body is generated based on the current level data and its child level data, the folding body is subjected to traversal rendering, and the child level data is returned as new current level data for folding body generation and traversal rendering until the child level data is the lowest level data in the multi-level structure data.

[0027] The application further provides an electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the heat map generation method according to any one of the above when executing the program.

[0028] The application further provides a non-transitory computer readable storage medium having a computer program stored thereon, wherein the computer program is executable on a processor to implement the heat map generation method according to any one of the above.

[0029] The application further provides a computer program product comprising a computer program, wherein the computer program is executable on a processor to implement the heat map generation method according to any one of the above.

[0030] The heat map generation method, device, electronic device and storage medium provided by the application generate multi-level structure data, encapsulate a folding panel component and an iteration component, perform a traversal rendering process based on the iteration component starting from first level data in the multi-level structure data in the folding panel component, and obtain a heat map. Thus, a data processing and component rendering technology is realized, which can automatically generate a visual heat map table with level folding after accepting multi-level data.

[0031] In addition, the method uses a data-driven view thinking, is convenient to use, and can update the rendering of the heat map table only by generating level data according to a preset structure, thereby greatly improving the generation efficiency and reliability of the heat map table. BRIEF DESCRIPTION OF DRAWINGS

[0032] In order to more clearly illustrate the technical solutions of the present application or the prior art, the following will briefly introduce the drawings needed to be used in the embodiments or prior art description. Obviously, the drawings described below are only some embodiments of the present application, and for those skilled in the art, other drawings can also be obtained without creative labor.

[0033] Figure 1 is one of the flow diagrams of the heat map generation method provided by the present application;

[0034] Figure 2 is another flow diagram of the heat map generation method provided by the present application;

[0035] Figure 3 is a schematic diagram of the multi-level structure data provided by the present application;

[0036] Figure 4 is a schematic diagram of the heat map provided by the present application;

[0037] Figure 5 is a structural schematic diagram of the heat map generation device provided by the present application;

[0038] Figure 6 is a structural schematic diagram of the electronic device provided by the present application. DETAILED DESCRIPTION

[0039] In order to make the objects, technical solutions and advantages of the present application clearer, the technical solutions of the present application will be described clearly and completely below in combination with the drawings in the present application. Obviously, the described embodiments are only some embodiments of the present application, not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor are within the scope of protection of the present application.

[0040] At present, the heat map technology in the web field is mostly inclined to display the flattened data, and does not support the data display with multi-levels. In addition, some visualization libraries are too cumbersome when processing multi-level data, and when the data volume is large and the level of data is deep, the amount of developed code will also be quite large.

[0041] In view of the above problems, the inventive concept of the present application is to generate multi-level structure data, and encapsulate a folding panel component and an iteration component. In the folding panel component, based on the iteration component, a traversal rendering process is performed from the first level data in the multi-level structure data to obtain a heat map. Thus, a data processing and component rendering technology is realized, which can automatically generate a level-folding visual heat map table after accepting multi-level data. Using the data-driven view thinking, it is convenient to update the rendering of the heat map table only by generating level data according to the preset structure.

[0042] Based on the above inventive concept, the present application provides a heat map generation method and device, electronic equipment and storage medium. It can be applied to the generation of page heat map in computer web technology, such as industry track, drug classification business analysis and various scenarios that need to generate heat map based on multi-level data, so as to realize the automatic generation of hierarchical folding visual heat map table based on component rendering after accepting multi-level data, thereby greatly improving the generation efficiency and reliability of heat map table.

[0043] In order to facilitate the understanding of the technical scheme of the present application, some special terms related to computer web technology in the embodiments are explained and described as follows.

[0044] props: data passed by parent component to child component is received by props.

[0045] slot: slot defined inside the child component, which can be pre-occupied to accept some template fragments passed by the parent component, so that the child component can render these fragments internally.

[0046] templete: template for rendering elements in vue (front-end framework).

[0047] dom: element node on the browser page.

[0048] hex: hexadecimal color value.

[0049] rgb: red, green and blue color mode.

[0050] canvas: a canvas tag provided by HTML5, which can be used to draw images on it using js.

[0051] base64: a coding method for processing binary data.

[0052] The technical scheme of the present application will be described in detail below with reference to the accompanying drawings. Figure 1 is one of the flowcharts of the heat map generation method provided by the present application. The execution subject of each step in the method can be a heat map generation device, which can be realized by software and / or hardware. The device can be integrated in an electronic equipment, which can be a terminal equipment (such as a smart phone, a personal computer, a wearable device, etc.), a server (such as a local server or a cloud server, which can also be a server cluster, etc.), a processor, a chip, etc.

[0053] As shown in the figure, the method can include the following steps: Figure 1

[0054] Step 110, determining the multi-level structure data of the heat map to be generated, and packaging the folding panel component.​

[0055] Specifically, this invention adopts a data-driven view approach. The multi-level structural data to be generated into a heatmap is the data that needs to be displayed in the form of a heatmap. This data contains multiple levels, such as a tree-like hierarchical structure, and each level can contain sub-level data. For example, innovative drugs include small molecule innovative drugs and large molecule innovative drugs. Large molecule innovative drugs include novel antibody drugs, biosimilars, and exosomes. Furthermore, novel antibody drugs include monoclonal antibodies, bispecific antibodies, and antibody-drug conjugates, which will not be listed here.

[0056] The hierarchical structure of the displayed data can be pre-configured, for example, by using a JSON configuration template to configure the hierarchical structure of the displayed data.

[0057] In this embodiment of the invention, the source and type of the multi-level structured data to be used to generate the heatmap are not specifically limited. For example, it can come from database data, historical statistical data, real-time data, etc.; it can also be generated by the backend or defined by the frontend, depending on business requirements. However, the hierarchical structure of the data is a pre-configured data structure.

[0058] After determining the multi-level structural data for generating the heatmap, a collapsible panel component can be encapsulated. The collapsible panel component is the structural component used to visualize the heatmap after the data rendering is complete.

[0059] Understandably, data visualization can typically be presented as pie charts, bar charts, or line charts, etc. For multi-level data, this embodiment of the invention uses a foldable heatmap for display.

[0060] The collapsible panel component can also use collapsible components from common UI (User Interface) component libraries. The collapsible panel component can be divided into two components: a parent component, which is the collapsible body, and a child component, which contains the collapsible options.

[0061] Step 120: Within the folded panel component, the traversal rendering process is executed based on the iterative component, starting from the first level of data in the multi-level structure data, to obtain the heatmap.

[0062] In the traversal rendering process, a folded body is generated based on the current level data and its sub-level data. The folded body is traversed and rendered. The sub-level data is returned as the new current level data for folded body generation and traversal rendering, until the sub-level data is the lowest level data of the multi-level structure data.

[0063] Specifically, after generating multi-level structure data in step 110 and encapsulating the foldable panel component, the data can be traversed and rendered to obtain a heatmap.

[0064] For the traversal rendering process, the generation of the hierarchical dom structure can be realized by encapsulating the iteration component.

[0065] The iteration component receives the multi-level structure data, generates a folding subject based on the current level data and its sub-level data from the first level data (i.e. the uppermost level data) in the multi-level structure data, performs traversal rendering on the folding subject, and returns the sub-level data as new current level data for folding subject generation and traversal rendering until the sub-level data is the bottom level data of the multi-level structure data.

[0066] For example, this level with innovative drugs as the folding subject, the sub-level data of innovative drugs includes small molecule innovative drugs and large molecule innovative drugs. First, generate this level with innovative drugs as the folding subject based on innovative drugs, small molecule innovative drugs and large molecule innovative drugs, wherein small molecule innovative drugs and large molecule innovative drugs are folding options in it.

[0067] At this time, only the traversal rendering of this level with innovative drugs as the folding subject is completed, and there is folding nesting in the folding options, such as large molecule innovative drugs including new antibody drugs, biosimilars and exosomes. Continue to return the sub-level data (such as the sub-level data of innovative drugs: large molecule innovative drugs) as new current level data for folding subject generation and traversal rendering, i.e. generate the traversal rendering of this level with large molecule innovative drugs as the folding subject.

[0068] Further, continue to return the sub-level data (such as the sub-level data of large molecule innovative drugs: new antibody drugs) as new current level data for folding subject generation and traversal rendering, i.e. generate the traversal rendering of this level with new antibody drugs as the folding subject.

[0069] The data of each sub-child is transmitted down as new data to continue to generate new folding subjects. This is because the data structure of each small molecule innovative drug and large molecule innovative drug in the children is actually the same as that of the parent innovative drug.

[0070] It should be noted that in the case where the sub-level data contained in any level data has at least two items, such as the sub-level data of innovative drugs including large molecule innovative drugs and small molecule innovative drugs, the generation and traversal rendering of the folding subject can be performed for each sub-level data, and the order of the generation and traversal rendering of the folding subject is not limited.

[0071] It can be understood that the termination condition of the traversal rendering is that the sub-level data is the bottom level data of the multi-level structure data, i.e. the new current level data does not have sub-level data, which can terminate the rendering, thereby completing the traversal rendering process and obtaining the heat map.

[0072] The method provided by the embodiment of the present application generates multi-level structure data, encapsulates a folding panel component and an iteration component, and performs a traversal rendering process based on the iteration component starting from first level data in the multi-level structure data in the folding panel component to obtain a heat map. Thus, a data processing and component rendering technology is realized, which can automatically generate a hierarchical folding visual heat map table after accepting multi-level data.

[0073] In addition, the method adopts a data-driven view idea, is convenient to use, and can update the rendering of the heat map table only by generating level data according to a preset structure, thereby greatly improving the generation efficiency and reliability of the heat map table.

[0074] Based on the above embodiment, the step 120 of performing the traversal rendering process based on the iteration component starting from the first level data in the multi-level structure data includes the following steps.

[0075] In step 121, the iteration component determines whether the current level data contains child level data.

[0076] In step 122, in the case where the current level data contains child level data, the iteration component generates a child component of the iteration component by referring to itself, and passes the parameters of the iteration component and the child level data to the child component to perform the traversal rendering process.

[0077] Specifically, in the traversal rendering process, the iteration component can start from the first level data, and hand over the received first level data (i.e., the uppermost level data) to the folding panel component for traversal rendering (i.e., object loop in the array generates a corresponding dom structure), wherein the content that needs to be folded can be placed in the slot of the folding option.

[0078] Figure 2 is a flowchart of the heat map generation method provided by the present application, as shown in Figure 2 The iteration component determines the termination condition of rendering, whether the current level data contains child level data, i.e., whether the branch contains children. If there is no children, it means that the current level data does not contain child level data, and the branch node can complete the rendering and end.

[0079] If the current level data contains child level data, i.e., the branch contains children, a template is defined. The function of the template is to perform loop and conditional judgment operations. The elements wrapped in the template can render the structure of the component. The child component of the template is the component itself, the iteration component generates a child component of the iteration component by referring to itself, and passes the parameters of the iteration component to the child component. Since the reference is in the form of a component file, the idea of the component referring to itself is realized.

[0080] Then the data of children is passed to the child component as a new data source, which has the same hierarchical data structure as the parent component. At the same time, all the props accepted by the parent component are passed to the child component. In this way, the child component can traverse and render the received children as new surface data. Thus, the current hierarchical data is recursively judged whether it contains sub-hierarchical data, and finally a hierarchical folding dom structure is generated.

[0081] In some embodiments, the ES module technology of the front end can be used to manage the project in the form of a file. Therefore, the address of the component file can be found in the form of a relative path, so that the component file itself can be introduced in the internal component, thereby realizing the recursive nesting of the component. The beneficial effect is that the depth of the data hierarchy does not need to be concerned, and the recursive iteration of the component is realized by referring to itself.

[0082] The method provided by the embodiment of the application realizes the recursive iteration of the component by iterating the component itself to refer to itself, and can not concern the depth of the data hierarchy, and has strong expansibility.

[0083] Based on any of the above embodiments, the folding panel component includes a folding main body and a folding option, and in step 120, the folding main body is generated based on the current hierarchical data and the sub-hierarchical data thereof, and the folding main body is traversed and rendered, including:

[0084] In step 123, the folding main body is generated based on the current hierarchical data and the sub-hierarchical data thereof, the folding options of the folding main body are generated based on the sub-hierarchical data, and the content of the folding options is determined based on a template;

[0085] In step 124, the folding main body and the folding options are traversed and rendered.

[0086] Specifically, the folding panel component is divided into a parent component and a child component, the parent component is a folding main body, and the child component is a folding option. In a folding main body, each child is a folding option of the folding main body.

[0087] For example, a small molecule innovative drug can be used as a folding option of the folding main body of the innovative drug, and can also be used as a new folding main body. When the small molecule innovative drug is used as a folding main body, the folding options it contains can include PROTAC and molecular glue.

[0088] It can be understood that the folding main body is generated based on the current hierarchical data and the sub-hierarchical data thereof, and the folding options of the folding main body are generated based on the sub-hierarchical data of the current hierarchical data. At different levels, the folding main body and the folding options are different.

[0089] The key value of the folding option activated by the folding main body bidirectional binding is activated, and the content of the folding option can be freely added to the template, and is displayed or hidden according to the user's click.

[0090] Here, the components of the folding panel are encapsulated separately without being mixed with the iteration component, which can effectively decouple the folding component and the iteration component, and make the encapsulation purpose of the component more explicit.

[0091] Based on any of the above embodiments, the multi-level structure data adopts a circular nested structure of arrays and objects, each display data is stored in an object, and the child level data of each display data is stored in the children attribute of the object. The data at the same level is represented in the form of an array.

[0092] Specifically, Figure 3 is a schematic diagram of the multi-level structure data provided by the application, as Figure 3 shown, the multi-level structure adopts a circular nested structure of arrays and objects, the data to be displayed is stored in an object, and the data at the same level is represented in the form of an array. The data at the child level is placed in the children attribute of the object.

[0093] In some embodiments, the attribute of the object in the multi-level structure data includes the current level number. For example, a level attribute can be set in the object to represent the current level number. Since the iteration component is used, if the level is not distinguished, the structures of each child node generated are the same. The addition of level can distinguish different level nodes, thereby better expanding the component.

[0094] The method provided by the embodiment of the application defines the data structure through the circular nested structure of arrays and objects, can realize infinite circular iteration of the component, thereby better expanding the component, and further improves the efficiency of data traversal rendering.

[0095] Based on any of the above embodiments, the iteration component starts to execute the traversal rendering process from the first level data in the multi-level structure data to obtain the heat map, including:

[0096] Determining the color value corresponding to each display data in the multi-level structure data;

[0097] Based on the rendering template and method of the iteration component, the color value corresponding to each display data is applied to generate the heat map.

[0098] Specifically, after completing the traversal rendering of the data, in order to realize the heat map of the visualization, a visualization method can be added in the templete template and method of the component. For example, the color gradient function can first convert the hex color value into an rgb array, then adjust the numerical value of the rgb array according to the deepening or lightening and the degree of the gradient, and then convert the rgb numerical value into a hex color. For another example, the color can be adjusted according to the size of the data value, the larger the data value, the deeper the color, the smaller the data value, the lighter the color, and the like. Since the iteration sub-component transmits the properties of the parent component and has the methods of the parent component, the corresponding color can be generated according to the numerical value, so as to generate the heat map in the folding panel component.

[0099] The method provided by the embodiment of the application can generate a heat map with color through the color value corresponding to each display data.

[0100] Based on any of the above embodiments, the heat map is obtained, and then the following steps are further included.

[0101] In response to an interaction request for the heat map, an operation corresponding to the interaction request is performed on the heat map, and the interaction request includes at least one of folding any folding subject in the heat map, penetrating display data of any folding option, and exporting a heat map image.

[0102] Specifically, after the heat map is generated, the user can perform various interactions on the front-end page based on the heat map, so that the user has an interest in exploration, and the user sees what he gets.

[0103] Figure 4 is a schematic diagram of the heat map provided by the application, as Figure 4 shown, the user can click any folding subject in the folding heat map, penetrate the display data of any folding option, export the heat map image, and the like. The export heat map table into a picture function can generate a canvas from a dom node and then convert it into a base64 picture for output.

[0104] The method provided by the embodiment of the application generates a foldable visualization heat map table for multi-level data, and the interaction functions such as folding, penetrating, and picture exporting facilitate the user to perform business analysis, thereby further improving the user satisfaction.

[0105] Based on any of the above embodiments, a heat map generation method is provided, including:

[0106] Step 1: Generate hierarchical data. The data adopts a cyclic nested structure of array and object, the data to be displayed is stored in the object, the data of the same level is represented in the form of array, and the data of the child level is placed in the children attribute of the object.

[0107] Step two: encapsulate the single folding panel part (also can use the foldable component in the common ui component library). The part is divided into two components of parent and child, the parent component is the folding main body, and the child component is the folding option.

[0108] Step three: encapsulate the iteration component to generate the hierarchical dom structure. The iteration component accepts the first layer data (i.e. the uppermost layer data) and gives it to the folding panel component for traversal rendering (i.e. the object in the array is looped to generate the corresponding dom structure), and the content that needs to be folded can be put into the slot of the folding option. Then judge the termination condition of rendering, that is, whether there is children in the branch. If there is no children, the branch node can complete the rendering and end.

[0109] If there is children, define a template. The child component of the template is the component itself. Since it is referred to in the form of a component file, the idea of referring to itself by the component itself is realized. Then pass the children data as a new data source to the child component, which also has the hierarchical data structure in step one. At the same time, pass all the props accepted by the parent component to the child component. In this way, the child component can traverse and render the received children as new surface data. Thus, step three is looped to generate a hierarchical folding dom structure.

[0110] Step four: realize the function of visualizing the heat map. The function of visualizing the heat map can be added in the templete template and method of the component.

[0111] The method provided by the embodiment of the application is driven by data to view, convenient to use, and only needs to define corresponding hierarchical data to update the view; has strong expansibility, does not need to care about the depth of the data hierarchy, realizes infinite loop iteration of the component by using the component itself to refer to itself, generates a foldable visual heat map table for multi-level data, has functions such as color gradient and exporting the table to facilitate user analysis of business, and folding, penetration and other interactions make the user have the interest of exploration, and what is seen is what is obtained.

[0112] The heat map generation device provided by the application will be described below. The heat map generation device described below can be correspondingly referred to the heat map generation method described above.

[0113] Based on any of the above embodiments, Figure 5 is a structural diagram of the heat map generation device provided by the embodiment of the application, as Figure 5 shown, the heat map generation device includes a data determination unit 510 and a traversal rendering unit 520, wherein:

[0114] The data determination unit 510 is configured to determine the multi-level structure data of the heat map to be generated, and encapsulate a folding panel component.

[0115] The traversal rendering unit 520 is used to execute a traversal rendering process based on the iteration component starting from first level data in the multi-level structure data in the folding panel component to obtain the heat map.

[0116] In the traversal rendering process, a folding body is generated based on the current level data and its child level data, the folding body is subjected to traversal rendering, and the child level data is returned as new current level data for folding body generation and traversal rendering until the child level data is the bottom level data of the multi-level structure data.

[0117] The heat map generation device provided by the embodiment of the application generates multi-level structure data, encapsulates a folding panel component and an iteration component, executes a traversal rendering process based on the iteration component starting from first level data in the multi-level structure data in the folding panel component to obtain a heat map. Thus, a data processing and component rendering technology is realized, which can automatically generate a visual heat map table with level folding after accepting multi-level data.

[0118] In addition, the data-driven view is used, which is convenient and only needs to generate level data according to a preset structure to update the rendering of the heat map table, thereby greatly improving the generation efficiency and reliability of the heat map table.

[0119] Based on any of the above embodiments, the traversal rendering unit is specifically used for:

[0120] The iteration component determines whether the current level data contains child level data.

[0121] In the case where the current level data contains child level data, the iteration component references itself to generate a subcomponent of the iteration component, and passes parameters of the iteration component and the child level data to the subcomponent to execute the traversal rendering process.

[0122] Based on any of the above embodiments, the folding panel component includes a folding body and a folding option, and the traversal rendering unit is further specifically used for:

[0123] The folding body is generated based on the current level data and its child level data, the folding option of the folding body is generated based on the child level data, and the content of the folding option is determined based on a template.

[0124] The folding body and the folding option are subjected to traversal rendering.

[0125] Based on any of the above embodiments, the multi-level structure data adopts a cyclic nested structure of arrays and objects, each display data is stored in an object, child level data of each display data is stored in a children attribute of the object, and data of the same level is represented in an array form.

[0126] Based on any of the above embodiments, in the multi-level structure data, the attributes of the object include the current level number.

[0127] Based on any of the above embodiments, the traversal rendering unit is further specifically used for:

[0128] Determine the color value corresponding to each displayed data in the multi-level structure data;

[0129] Based on the rendering template and method of the iterative component, the heatmap is generated within the folded panel component by applying the color values ​​corresponding to each display data.

[0130] Based on any of the above embodiments, the heat map generation apparatus further includes an interaction unit, used for:

[0131] In response to an interaction request for the heatmap, an operation corresponding to the interaction request is performed on the heatmap, the interaction request including at least one of collapsing any folded subject in the heatmap, penetrating the display data of any folded option, and exporting the heatmap image.

[0132] Figure 6 An example is a schematic diagram of the physical structure of an electronic device, such as... Figure 6 As shown, the electronic device may include: a processor 610, a communication interface 620, a memory 630, and a communication bus 640, wherein the processor 610, the communication interface 620, and the memory 630 communicate with each other via the communication bus 640. The processor 610 can call logical instructions in the memory 630 to execute a heatmap generation method, which includes:

[0133] Determine the multi-level structural data of the heatmap to be generated, and encapsulate the foldable panel component;

[0134] Within the folded panel assembly, a traversal rendering process is executed based on the iterative component, starting from the first level of data in the multi-level structure data, to obtain the heatmap.

[0135] In the traversal rendering process, a folded body is generated based on the current level data and its sub-level data. The folded body is then traversed and rendered. The sub-level data is returned as the new current level data for folded body generation and traversal rendering, until the sub-level data is the lowest level data of the multi-level structure data.

[0136] Further, the logic instructions in the memory 630 described above can be implemented in the form of software functional units and sold or used as independent products, and can be stored in a computer readable storage medium. Based on such understanding, the technical solutions of the present application or parts of the present application that make essential contributions or parts of the technical solutions can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes a number of instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present application. The aforementioned storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), a magnetic disk or an optical disk, and various media that can store program codes.

[0137] In another aspect, the present application also provides a computer program product, which comprises a computer program, the computer program can be stored on a non-transitory computer readable storage medium, and the computer program can be executed by a processor to enable a computer to execute the heat map generation method provided by the above-mentioned methods, the method comprising:

[0138] determining multi-level structure data to be generated for a heat map, and encapsulating a folding panel component;

[0139] in the folding panel component, based on an iterative component, starting from first level data in the multi-level structure data, executing a traversal rendering process to obtain the heat map;

[0140] in the traversal rendering process, generating a folding body based on the current level data and its child level data, performing traversal rendering on the folding body, and returning the child level data as new current level data for folding body generation and traversal rendering, until the child level data is the bottom level data of the multi-level structure data.

[0141] In another aspect, the present application also provides a non-transitory computer readable storage medium, which stores a computer program, and the computer program is executed by a processor to implement the heat map generation method provided by the above-mentioned methods, the method comprising:

[0142] determining multi-level structure data to be generated for a heat map, and encapsulating a folding panel component;

[0143] in the folding panel component, based on an iterative component, starting from first level data in the multi-level structure data, executing a traversal rendering process to obtain the heat map;

[0144] In the traversal rendering procedure, a folding body is generated based on the current hierarchical data and its child hierarchical data, the folding body is traversed and rendered, and the child hierarchical data is returned as new current hierarchical data to generate the folding body and perform the traversal rendering until the child hierarchical data is the bottom hierarchical data of the multi-hierarchical structure data.

[0145] The device embodiments described above are merely illustrative, wherein the units described as separate components can or can not be physically separated, and the components displayed as units can or can not be physical units, i.e., can be located in one place or distributed on multiple network units. Part or all of the modules can be selected to achieve the purpose of the embodiment scheme according to actual needs. Those skilled in the art can understand and implement without creative labor.

[0146] Through the description of the above embodiments, those skilled in the art can clearly understand that the embodiments can be realized by means of software and necessary general hardware platforms, and of course can also be realized by hardware. Based on such understanding, the above technical solutions can be embodied in the form of software products, and the computer software products can be stored in a computer readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and include a plurality of instructions to make a computer device (which can be a personal computer, a server, or a network device, etc.) execute the methods described in each embodiment or some parts of the embodiments.

[0147] Finally, it should be noted that: the above embodiments are only used to illustrate the technical solutions of the present application, and not to limit them; although the present application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that: it can still modify the technical solutions recorded in the foregoing embodiments, or make equivalent replacement to part of the technical features; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present application.

Claims

1. A heat map generation method characterized by, The method comprises the following steps: determining multi-level structure data to be generated into a heat map, and encapsulating a foldable panel component; in the foldable panel component, starting from first level data in the multi-level structure data, an iteration component performs a traversal rendering process to obtain the heat map; in the traversal rendering process, a foldable body is generated based on the current level data and its child level data, the foldable body is traversed and rendered, and the child level data is returned as new current level data to generate the foldable body and perform traversal rendering, until the child level data is the bottom level data of the multi-level structure data; wherein starting from the first level data in the multi-level structure data, the iteration component performs the traversal rendering process, comprising: the iteration component determines whether the current level data contains child level data; in the case that the current level data contains child level data, the iteration component generates a child component of the iteration component by referring to itself, and passes the parameters of the iteration component and the child level data to the child component to perform the traversal rendering process; wherein the foldable panel component comprises a foldable body and a foldable option, and the foldable body is generated based on the current level data and its child level data, and the foldable body is traversed and rendered, comprising: generating the foldable body based on the current level data and its child level data, generating the foldable option of the foldable body based on the child level data, and the content of the foldable option is determined based on a template; traversing and rendering the foldable body and the foldable option; wherein starting from the first level data in the multi-level structure data, the iteration component performs the traversal rendering process to obtain the heat map, comprising: determining color values corresponding to each display data in the multi-level structure data; based on the rendering template and method of the iteration component, applying the color values corresponding to each display data to generate the heat map.

2. The heat map generation method of claim 1, wherein, The multi-level structure data adopts a cyclic nested structure of arrays and objects, each display data is stored in an object, and child level data of each display data is stored in a children attribute of the object. Data at the same level is represented in array form.

3. The heat map generation method of claim 2, wherein, In the multi-level structure data, the attributes of the object include the current level number.

4. The heat map generation method according to any one of claims 1 to 3, characterized by, After obtaining the heat map, the method further comprises the following steps: in response to an interaction request for the heat map, performing an operation corresponding to the interaction request on the heat map, the interaction request comprising at least one of folding any foldable body in the heat map, penetrating display data of any foldable option, and exporting a heat map image.

5. A heat map generation apparatus characterized by comprising: The method comprises the following steps: a data determination unit is configured to determine multi-level structure data to be generated into a heat map, and encapsulate a foldable panel component; a traversal rendering unit is configured to, in the foldable panel component, starting from first level data in the multi-level structure data, an iteration component performs a traversal rendering process to obtain the heat map; In the traversal rendering procedure, a folding body is generated based on the current hierarchical data and its child hierarchical data, the folding body is traversed and rendered, and the child hierarchical data is returned as new current hierarchical data for folding body generation and traversal rendering until the child hierarchical data is the bottom hierarchical data of the multi-hierarchical structure data. The iteration component starts the traversal rendering procedure from the first hierarchical data in the multi-hierarchical structure data, including: The iteration component determines whether the current hierarchical data contains child hierarchical data; In the case that the current hierarchical data contains child hierarchical data, the iteration component references itself to generate a child component of the iteration component, and passes the parameters of the iteration component and the child hierarchical data to the child component to execute the traversal rendering procedure; The folding panel component includes a folding body and a folding option, the folding body is generated based on the current hierarchical data and its child hierarchical data, and the traversal rendering of the folding body includes: The folding body is generated based on the current hierarchical data and its child hierarchical data, the folding option of the folding body is generated based on the child hierarchical data, and the content of the folding option is determined based on a template; The traversal rendering of the folding body and the folding option is performed; The iteration component starts the traversal rendering procedure from the first hierarchical data in the multi-hierarchical structure data, and obtains the heat map, including: Color values corresponding to each display data in the multi-hierarchical structure data are determined; Based on the rendering template and method of the iteration component, the color values corresponding to each display data are applied to generate the heat map.

6. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, The processor executes the program to implement the heat map generation method according to any one of claims 1 to 4.

7. A non-transitory computer-readable storage medium having stored thereon a computer program, characterized in that, The computer program is executed by the processor to implement the heat map generation method according to any one of claims 1 to 4.

Images