Kanban visualization application method and system, readable storage medium and computer equipment

Abstract

The invention provides a billboard visualization application method and system, a readable storage medium and computer equipment. The method comprises the following steps: constructing a visualization component; configuring data for a billboard container component in the visual component based on the design area; dragging a container assembly in the visual assembly into the billboard container assembly, and dragging the information content carrier into the container assembly; configuring component data for the container component, and performing data distribution on the information content carrier; and analyzing into a visual report page according to the configuration data, the information content carrier in the container component, the component data and the data distribution. According to the invention, the billboard container component can realize billboards with different functions according to the information content carrier in the container component, so that the visual component can be reused, and the visual component can be freely combined according to data distribution, so that additional investment required for developing a new scene is avoided.

Description

Technical Field

[0001] The present invention relates to the technical field of data visualization application, and in particular to a kanban visualization application method, system, readable storage medium and computer equipment. Background Art

[0002] Information dashboards are widely used in data visualization. In traditional data visualization platforms, only information dashboards with relatively simple content and fixed patterns can be implemented. It is generally difficult to support some relatively complex content dashboard application scenario requirements.

[0003] Among the existing technologies, it is generally difficult to achieve graphical, zero-code flexible configuration of complex information dashboards in traditional data visualization products. Generally, a single-function content dashboard visualization component is customized, and basic visualization components cannot be reused, resulting in repeated functional development. The configuration mode is also relatively fixed, the placement is not flexible enough, and the visualization components cannot be freely combined. When responding to new modification requirements for later visualization application scenarios, developers need to intervene, which requires high labor input and increases the project delivery cycle. Summary of the invention

[0004] Based on this, the purpose of the present invention is to provide a kanban visualization application method, system, readable storage medium and computer device to solve the deficiencies in the above-mentioned prior art.

[0005] In a first aspect, the present invention provides a kanban visualization application method, the method comprising: Building visualization components; Configuring data for a kanban container component in the visualization component based on the design area; Drag the container component in the visualization component into the signboard container component, and drag the information content carrier into the container component; configuring component data for the container component and allocating data to the information content carrier; A visualization report page is generated based on the configuration data, the information content carrier in the container component, the component data, and the data distribution.

[0006] Compared with the prior art, the beneficial effects of the present invention are: by configuring data for the kanban container component in the visualization component, and then dragging the container component into the kanban container component, and dragging the information content carrier into the container component, data is allocated to the information content carrier, so that the kanban container component can realize kanbans with different functions according to the information content carrier in the container component, so as to reuse the visualization component, and can also allocate data so that the visualization components can be freely combined, avoiding the additional investment required for developing new scenarios.

[0007] Furthermore, the visualization component includes a kanban container component, a container component, a text component, a picture component, a digital display component, and a picture carousel component.

[0008] Furthermore, the step of configuring data for the kanban container component in the visualization component based on the design area includes: Drag the kanban container component to the design area, and configure a data source for the kanban container component in the design area to obtain a series of key value information.

[0009] Furthermore, the step of dragging the container component in the visualization component into the kanban container component and dragging the information content carrier into the container component includes: Drag one of the container components into the kanban container component; Drag the image information, text information, digital information and image carousel components into the container component.

[0010] Furthermore, the step of configuring component data for the container component and allocating data to the information content carrier includes: Data model fields are specified for the image information, text information, digital information and image carousel components in the container component to distribute data.

[0011] In a second aspect, the present invention further provides a kanban visualization application system, the system comprising: Building blocks, used to build visualization components; A configuration module, configured to configure data of a kanban container component in the visualization component based on a design area; A loading module, used to drag the container component in the visualization component into the kanban container component, and drag the information content carrier into the container component; An allocation module, used to configure component data for the container component and to allocate data to the information content carrier; The parsing module is used to parse the configuration data, the information content carrier in the container component, the component data and the data distribution into a visual report page.

[0012] Furthermore, the configuration module includes: The configuration unit is used to drag the kanban container component to the design area and configure a data source for the kanban container component in the design area to obtain a series of key value information.

[0013] Furthermore, the loading module includes: A first loading unit, used for dragging one of the container components into the kanban container component; The second loading unit is used to drag the image information, text information, digital information and image carousel component into the container component.

[0014] In a third aspect, the present invention further provides a readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the above-mentioned kanban visualization application method.

[0015] In a fourth aspect, a computer device includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the above-mentioned kanban visualization application method when executing the computer program. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] Figure 1 is a flow chart of a kanban visualization application method in a first embodiment of the present invention; Figure 2 is a structural block diagram of a kanban visualization application system in a second embodiment of the present invention; Figure 3 It is a structural block diagram of a computer device in the third embodiment of the present invention.

[0017] Description of main component symbols: 11. Build module; 12. Configure module; 13. Load module; 14. Assign module; 15. Parse module; 10. Memory; 20. Processor; 30. Computer program.

[0018] The following specific implementation manner will further illustrate the present invention in conjunction with the above-mentioned drawings. DETAILED DESCRIPTION

[0019] In order to facilitate the understanding of the present invention, the present invention will be described more fully below with reference to the relevant drawings. Several embodiments of the present invention are given in the drawings. However, the present invention can be implemented in many different forms and is not limited to the embodiments described herein. On the contrary, the purpose of providing these embodiments is to make the disclosure of the present invention more thorough and comprehensive.

[0020] It should be noted that when an element is referred to as being "fixed to" another element, it may be directly on the other element or there may be a central element. When an element is considered to be "connected to" another element, it may be directly connected to the other element or there may be a central element at the same time. The terms "vertical", "horizontal", "left", "right" and similar expressions used herein are for illustrative purposes only.

[0021] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by those skilled in the art to which the present invention belongs. The terms used herein in the specification of the present invention are only for the purpose of describing specific embodiments and are not intended to limit the present invention. The term "and / or" used herein includes any and all combinations of one or more of the related listed items.

[0022] Embodiment 1 See also Figure 1 , which shows a kanban visualization application method in a first embodiment of the present invention, and the method includes steps S1 to S5: S1, build visualization components; It needs to be explained that in order to be able to configure data visualization for complex information dashboard application scenarios with zero code and graphics, it is necessary to modularly construct visualization components. Specifically, the visualization components include dashboard container components, container components, text components, image components, digital display components, and image carousel components.

[0023] Kanban container component: Kanban container is a functional component. Its main configuration attributes include the number of rows (columns), row spacing, column spacing, whether to scroll automatically, whether to display, size and position. Data source configuration, and component configuration; Container component: other visual components can be dragged into it and freely configured. The container component is used to load information blocks of other visual configurations. Its main function in the configuration of the information dashboard is to serve as the iteration unit of the information dashboard. Text component: The main function of the component is to display text. The basic attribute configuration includes: 1. Basic text attribute configuration, such as font size, font color, etc.; 2. Data source, which can be used as its content based on the acquired data; 3. Display and hide, which controls the display and hiding of components. Events include: content change, which is triggered when the component content changes, mouse click, etc. Actions include: setting text content, display, hide, data refresh, style setting, etc. Image component: The main function of the component is to display images. The main configurable properties are image URL, component size, whether to display, component position and component style such as rounded corners, tilt direction, tilt angle, etc. Number display component: The main function of the component is to display numbers. The main configurable properties are: the style configuration, prefix, suffix, and whether to assign values ​​to external data sources, etc. Whether to assign values ​​to external data sources is an element of the content of the kanban container, and is assigned by the kanban container to avoid loading default data; Image carousel component: The main function of the component is to display images in a carousel. The main configurable properties are: whether to display in a loop, carousel speed, whether to assign values ​​to external data sources, etc. Whether to assign values ​​to external data sources is to only accept the URL data specified by the carousel container during initialization to avoid loading default data.

[0024] S2, configuring data for a kanban container component in the visualization component based on the design area; Specifically, the step S2 includes step S21: S21, drag the kanban container component to the design area, and configure a data source for the kanban container component in the design area to obtain a series of key value information.

[0025] It can be understood that in this embodiment, there are several kanban container components. One of the kanban container components is dragged to the design area, and the data source is configured. After returning, the result obtained is a series of key value information.

[0026] S3, dragging the container component in the visualization component into the kanban container component, and dragging the information content carrier into the container component; Specifically, the step S3 includes step S31 to step S32: S31, dragging one of the container components into the kanban container component; S32, dragging the image information, text information, digital information and the image carousel component into the container component; It can be understood that one of the container components is dragged into the billboard container component, and then the information content carrier, that is, the picture, text, number, and picture carousel component is dragged into the container component.

[0027] S4, configuring component data for the container component and allocating data to the information content carrier; Specifically, the step S4 includes step S41: S41, specifying data model fields for the image information, text information, digital information and image carousel components in the container component to perform data allocation; It can be understood that data is configured for the information carrier component within the container component, and data allocation is performed, and data model fields are specified for the image information, text information, digital information and image carousel components to perform data allocation.

[0028] It should be noted that if the amount of data is large, you can use paging configuration. If it is a custom placement, switch to custom placement mode, copy the container component in the kanban container, and place it to achieve the desired effect.

[0029] S5, parsing into a visual report page according to the configuration data, the information content carrier in the container component, the component data and the data distribution; It should be explained that the visualization report page is parsed according to the configuration. The parsing method is to load the content container content in a loop according to the actual data. If it is a regular placement without paging, it will be loaded until the data is traversed. If it is a regular placement with paging, the content in the board will be loaded in pages. If it is a custom placement, the board content elements will be loaded sparsely or in pages according to the user's predefined placement configuration and data conditions.

[0030] It is worth mentioning that in the specific implementation, first build the kanban information content carrier components: pictures, text, digital display, picture carousel, container visualization components. Usually these visualization components are relatively basic components and can be reused when building other visualization application scenarios. Then build the functional components that implement the content kanban application: kanban container components. The kanban container is responsible for accessing the data source and loading the container components. The container components load content information such as text, pictures, etc. The kanban container will iteratively parse the container components as information units when parsing the application scenario. After the visualization components are constructed, the scene can be built in the visualization designer. The kanban container can access the data source, and the container component is regarded as the smallest unit of information iteration. The data is distributed to each information element in the container component, thereby realizing the iteration of the information kanban element. The pictures, text, numbers, and picture carousels in the container component can be freely dragged and placed. The iterative placement scheme of the container components in the kanban is divided into: regular placement and custom placement. The regular placement scheme is that the user first takes a container as the basis and performs horizontal or vertical iterative placement. If there is a lot of data, it is processed in a paging manner; In addition, the placement rules of the custom scheme are as follows: the user places the information board in a static manner first, and then renders the internal container components according to the actual number during visual analysis. The rendering rules are as follows: if the number of elements does not exceed the number of placements in the user's custom scheme, they are placed evenly. If the number of elements exceeds the number of placements by the user, they are placed according to the user's placement scheme. For the excess, they are placed in pages. If the number of paged content elements is less than the number of placements in the user's custom scheme, they are placed evenly according to the user's placement scheme.

[0031] In summary, the kanban visualization application method in the above-mentioned embodiment of the present invention configures data for the kanban container component in the visualization component, and then drags the container component into the kanban container component, and drags the information content carrier into the container component, and distributes data to the information content carrier, so that the kanban container component can realize kanbans with different functions according to the information content carrier in the container component, so as to reuse the visualization component, and can also allocate data so that the visualization components can be freely combined to avoid the additional investment required for developing new scenarios.

[0032] Embodiment 2 See also Figure 2 , which shows a kanban visualization application system in a second embodiment of the present invention, and the system includes: A construction module 11, used for constructing a visualization component; A configuration module 12, configured to configure data of a kanban container component in the visualization component based on a design area; A loading module 13, used to drag the container component in the visualization component into the kanban container component, and drag the information content carrier into the container component; an allocation module 14, configured to configure component data for the container component and to allocate data to the information content carrier; The parsing module 15 is used to parse the configuration data, the information content carrier in the container component, the component data and the data distribution into a visual report page.

[0033] In some optional embodiments, the configuration module 12 includes: The configuration unit is used to drag the kanban container component to the design area and configure a data source for the kanban container component in the design area to obtain a series of key value information.

[0034] In some optional embodiments, the loading module 13 includes: A first loading unit, used for dragging one of the container components into the kanban container component; The second loading unit is used to drag the image information, text information, digital information and image carousel component into the container component.

[0035] In some optional embodiments, the allocation module 14 includes: The allocation unit is used to specify data model fields for the image information, text information, digital information and image carousel components in the container component to perform data allocation.

[0036] The functions or operation steps implemented when the above modules and units are executed are generally the same as those in the above method embodiments, and will not be repeated here.

[0037] The implementation principle and technical effects of the kanban visualization application system provided in the embodiment of the present invention are the same as those of the aforementioned method embodiment. For the sake of brief description, for matters not mentioned in the system embodiment, reference may be made to the corresponding contents in the aforementioned method embodiment.

[0038] Embodiment 3 The present invention also provides a computer device, see Figure 3 , shown is a computer device in the third embodiment of the present invention, including a memory 10, a processor 20, and a computer program 30 stored in the memory 10 and executable on the processor 20. When the processor 20 executes the computer program 30, the above-mentioned kanban visualization application method is implemented.

[0039] The memory 10 includes at least one type of readable storage medium, and the readable storage medium includes a flash memory, a hard disk, a multimedia card, a card-type memory (for example, an SD or DX memory, etc.), a magnetic memory, a magnetic disk, an optical disk, etc. In some embodiments, the memory 10 may be an internal storage unit of a computer device, such as a hard disk of the computer device. In other embodiments, the memory 10 may also be an external storage device, such as a plug-in hard disk, a smart memory card (Smart MediaCard, SMC), a secure digital (Secure Digital, SD) card, a flash card, etc. Further, the memory 10 may also include both an internal storage unit of a computer device and an external storage device. The memory 10 may be used not only to store application software and various types of data installed in the computer device, but also to temporarily store data that has been output or is to be output.

[0040] Among them, in some embodiments, the processor 20 can be an electronic control unit (Electronic Control Unit, abbreviated as ECU, also known as a vehicle computer), a central processing unit (Central Processing Unit, CPU), a controller, a microcontroller, a microprocessor or other data processing chip, used to run the program code stored in the memory 10 or process data, such as executing access restriction programs, etc.

[0041] It should be pointed out that Figure 3 The structure shown does not constitute a limitation on the computer device. In other embodiments, the computer device may include fewer or more components than shown in the figure, or combine certain components, or arrange the components differently.

[0042] The embodiment of the present invention further provides a readable storage medium on which a computer program is stored. When the program is executed by a processor, the above-mentioned kanban visualization application method is implemented.

[0043] Those skilled in the art will appreciate that the logic and / or steps represented in the flowchart or otherwise described herein, for example, may be considered as an ordered list of executable instructions for implementing logical functions, and may be specifically implemented in any computer-readable medium for use by an instruction execution system, device or apparatus (such as a computer-based system, a system including a processor, or other system that can fetch instructions from an instruction execution system, device or apparatus and execute instructions), or in conjunction with such instruction execution systems, devices or apparatuses. For purposes of this specification, "computer-readable medium" may be any device that can contain, store, communicate, propagate or transmit a program for use by an instruction execution system, device or apparatus, or in conjunction with such instruction execution systems, devices or apparatuses.

[0044] More specific examples of computer-readable media (a non-exhaustive list) include the following: an electrical connection with one or more wires (electronic device), a portable computer disk case (magnetic device), a random access memory (RAM), a read-only memory (ROM), an erasable and programmable read-only memory (EPROM or flash memory), an optical fiber device, and a portable compact disk read-only memory (CDROM). In addition, the computer-readable medium may even be a paper or other suitable medium on which the program is printed, since the program may be obtained electronically, for example, by optically scanning the paper or other medium, followed by editing, deciphering or, if necessary, processing in another suitable manner, and then stored in a computer memory.

[0045] It should be understood that the various parts of the present invention can be implemented by hardware, software, firmware or a combination thereof. In the above-mentioned embodiments, multiple steps or methods can be implemented by software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented by hardware, as in another embodiment, it can be implemented by any one of the following technologies known in the art or a combination thereof: a discrete logic circuit having a logic gate circuit for implementing a logic function for a data signal, a dedicated integrated circuit having a suitable combination of logic gate circuits, a programmable gate array (PGA), a field programmable gate array (FPGA), etc.

[0046] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "examples", "specific examples", or "some examples" means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present invention. In this specification, the schematic representation of the above terms does not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner.

[0047] The above-mentioned embodiments only express several implementation methods of the present invention, and the description thereof is relatively specific and detailed, but it cannot be understood as limiting the scope of the patent of the present invention. It should be pointed out that, for ordinary technicians in this field, several variations and improvements can be made without departing from the concept of the present invention, which all belong to the protection scope of the present invention. Therefore, the protection scope of the patent of the present invention shall be subject to the attached claims.

Claims

1. A kanban visualization application method, characterized in that: The method comprises: Building visualization components; Configuring data for a kanban container component in the visualization component based on the design area; Drag the container component in the visualization component into the signboard container component, and drag the information content carrier into the container component; configuring component data for the container component and allocating data to the information content carrier; A visualization report page is generated based on the configuration data, the information content carrier in the container component, the component data, and the data distribution.

2. The method for applying the kanban visualization according to claim 1, characterized in that: The visualization components include a signboard container component, a container component, a text component, a picture component, a digital display component, and a picture carousel component.

3. The method for applying the kanban visualization according to claim 1, characterized in that: The step of configuring data for the kanban container component in the visualization component based on the design area includes: Drag the kanban container component to the design area, and configure a data source for the kanban container component in the design area to obtain a series of key value information.

4. The method for applying a kanban visualization according to claim 1, characterized in that: The step of dragging the container component in the visualization component into the signboard container component and dragging the information content carrier into the container component comprises: Drag one of the container components into the kanban container component; Drag the image information, text information, digital information and image carousel components into the container component.

5. The method for applying a kanban visualization according to claim 1, characterized in that: The step of configuring component data for the container component and allocating data to the information content carrier comprises: Data model fields are specified for the image information, text information, digital information and image carousel components in the container component to distribute data.

6. A kanban visualization application system, characterized in that: The system comprises: Building blocks, used to construct visualization components; A configuration module, configured to configure data of a kanban container component in the visualization component based on a design area; A loading module, used to drag the container component in the visualization component into the kanban container component, and drag the information content carrier into the container component; An allocation module, used to configure component data for the container component and to allocate data to the information content carrier; The parsing module is used to parse the configuration data, the information content carrier in the container component, the component data and the data distribution into a visual report page.

7. The kanban visualization application system according to claim 6, characterized in that: The configuration module includes: The configuration unit is used to drag the kanban container component to the design area and configure a data source for the kanban container component in the design area to obtain a series of key value information.

8. The kanban visualization application system according to claim 6, characterized in that: The loading module comprises: A first loading unit, used for dragging one of the container components into the kanban container component; The second loading unit is used to drag the image information, text information, digital information and image carousel component into the container component.

9. A readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the kanban visualization application method as described in any one of claims 1 to 5 is implemented.

10. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the kanban visualization application method according to any one of claims 1 to 5 is implemented.

Images