A method for generating a gantt chart based on a table

Abstract

The application discloses a kind of based on table generation gantt chart method, belong to gantt chart generation technical field, based on table structure carries out the rendering of gantt chart, specific steps are as follows: table row generation, according to the start and end date of project generates corresponding table row, each row represents the hierarchical node of project;Column rendering, render each column of table according to project demand, in the application, structured data management is based on the gantt chart rendering method of table, so that the management and operation of data are more intuitive, the row and column of table can be directly mapped to the hierarchy and time range of project task, reduce complex logic processing, significantly improve development efficiency, easy to maintain and expand, since highly modular design is adopted, developers can easily modify or extend specific functions without affecting the overall structure, reduce the workload of later maintenance, and can quickly respond to demand changes in different scenarios.

Description

TECHNICAL FIELD

[0001] The application belongs to the technical field of Gantt chart generation, and particularly relates to a method for generating a Gantt chart based on a table. BACKGROUND

[0002] Currently, three ways are mainly used to realize the Gantt chart generation technology in the market:

[0003] Canvas drawing, directly drawing a chart on a Canvas element of a browser, which has high flexibility but requires high development complexity;

[0004] HTML DIV generation, using a DIV element of HTML for layout and performing style control through CSS, which is suitable for rapid development but may have performance problems in complex scenarios;

[0005] HTML Table generation, using an HTML table structure to draw a Gantt chart, which is intuitive and easy to understand but has relatively limited support for style customization.

[0006] The above three ways have source code integration, component integration and page embedding in terms of deployment.

[0007] The prior art has deficiencies in meeting highly customized functions or specific styles, and developers need to invest a lot of time and effort to adjust and optimize, some solutions overly rely on third-party components, resulting in limitations in customization and expansion, increasing development difficulty and cost, and for component integration solutions, the internal structure is often difficult to modify or the modification process is too complex, limiting the operation space of developers.

[0008] Therefore, the application designs a method for generating a Gantt chart based on a table to solve the above problems. SUMMARY

[0009] The application aims to solve the problem that the prior art has deficiencies in meeting highly customized functions or specific styles, and developers need to invest a lot of time and effort to adjust and optimize, some solutions overly rely on third-party components, resulting in limitations in customization and expansion, increasing development difficulty and cost, and for component integration solutions, the internal structure is often difficult to modify or the modification process is too complex, limiting the operation space of developers.

[0010] To achieve the above purpose, the application adopts the following technical solutions:

[0011] A method for generating a Gantt chart based on a table, which renders a Gantt chart based on a table structure, and the specific steps are as follows:

[0012] Table row generation, corresponding table rows are generated according to the start and end dates of the project, each row representing a hierarchical node of the project;

[0013] Column rendering, rendering each column of the table according to the project requirements, column data including task name, responsible person, start date and end date;

[0014] Nested tree structure, table row data is a nested tree structure, each hierarchical node corresponds to a row of the table;

[0015] Date range rendering, for the date range part, according to the specific attribute identified by the current row, fill in the corresponding cell, show the planned time interval and the actual execution time interval of two time ranges;

[0016] Customize the filling content, customize the filling content of the cell according to different types of date range, the filling content including color and background pattern.

[0017] As a further description of the above technical solutions:

[0018] The Gantt chart system implementation method is as follows:

[0019] Determine the storage method of the project and the implementation value in the database, combine and store the project information and the implementation value of each time period in the database into a string respectively;

[0020] After the table in the database is taken into the program, the fields of each time period are automatically added;

[0021] Convert the project information and implementation progress in each record of the data table into the value of each time period field;

[0022] Bind the data table to the data grid control first, and then show the value of each time field as an implementation progress picture;

[0023] Provide a client corresponding function for the mouse click time of each implementation progress picture, change the filling content of the picture.

[0024] As a further description of the above technical solutions:

[0025] In the project establishment stage, the user can set the project content for the entire interval by selecting the start and end dates, and can fine-tune, cancel or set the plan for the time period by clicking the implementation progress of the time period.

[0026] As a further description of the above technical solutions:

[0027] In the project implementation stage, the user can click the implementation progress of a time period after completing the progress of the time period, so that the implementation bar under the implementation task changes from light programming green to indicate that the task of the time period is implemented.

[0028] As a further description of the above technical scheme:

[0029] The separation of Gantt chart time sequence data is carried out from the time sequence direction to be processed, each cell is abstracted as a triple (T, C, D), wherein T represents a time variable, C is a data variable, and D is a structure variable in the storage process of the cell.

[0030] As a further description of the above technical scheme:

[0031] In the separation of the Gantt chart time sequence data, the following definitions can be made for the time sequence:

[0032] For any D, there are n triplets in the time sequence set, wherein n is a finite number;

[0033] satisfies

[0034] , wherein is the time value of the first data;

[0035] The actual time sequence data is the above defined formula, in actual application, in order to make the data can be processed and use, need to separate the time variable T in the triple (T, C, D), and convert it into two-dimensional data that can be stored in the database, and finally displayed in the Gantt chart.

[0036] As a further description of the above technical scheme:

[0037] The Gantt chart automatic matching time algorithm defines a data vector , wherein is the time value of the first data,

[0038] is the information of the first data, the time value in the vector is converted into a numerical variable, if exists, then

[0039]

[0040] then ​​​

[0041]

[0042] Then .

[0043] Preferably, the rendering of the Gantt chart selects the use of SVG or Canvas for the drawing of the Gantt chart.

[0044] Preferably, the Gantt chart data structure adopts a JSON-based flattened structure.

[0045] Preferably, the Gantt chart component integration selects a fully customizable front-end framework.

[0046] In summary, due to the adoption of the above technical solutions, the beneficial effects of the present application are:

[0047] 1、In the present application, the development efficiency is improved, the structured data management is based on the table-based Gantt chart rendering method, which makes the management and operation of data more intuitive, the rows and columns of the table can be directly mapped to the hierarchy and time range of the project task, reduces the complex logic processing, significantly improves the development efficiency, is easy to maintain and expand, since a highly modular design is adopted, the developer can easily modify or expand specific functions without affecting the overall structure, reducing the workload of later maintenance, and quickly responding to changes in demand in different scenarios.

[0048] 2、In the present application, the user experience is enhanced, and the smooth rendering effect is achieved, by optimizing the logic of table rendering, the smooth rendering effect can be maintained when processing a large amount of data or complex projects, avoiding the situation of lag or page crash, directly improving the user experience, having high compatibility, using HTML table structure to ensure the consistency of Gantt chart display on different browsers and devices, users do not need to worry about browser compatibility issues, and consistent user experience can be obtained on multiple platforms.

[0049] 3、In the present application, the flexible customization capability is highly customized, allowing users to flexibly adjust the style and content display of the Gantt chart according to project requirements, through nested tree structure and custom date rendering logic, users can easily achieve specific display effects to meet the needs of different application scenarios, reduce dependence, by reducing dependence on third-party components, developers can fully control the rendering logic of the Gantt chart, which not only reduces project costs, but also improves the security and stability of the system.

[0050] 4、In the present application, the integration process is simplified, and the Gantt chart generation method is easy to integrate with existing systems, developers can selectively introduce the required modules to simplify the integration process and reduce the impact on existing systems.

[0051] 5. In this invention, the generated double-line Gantt chart expands the ways in which Gantt charts can be used, making it easier to intuitively compare and check the plans and implementation status. It has good interactivity, is easy to learn and use, and is easy to develop based on general column template technology.

[0052] 6. In this invention, in a double-line Gantt chart, if the item bar is light-colored, it indicates that there is a plan for that task during that period, and if the implementation bar below is dark-colored, it indicates that the task has been implemented during that period.

[0053] 7. In this invention, by storing and displaying time series data in real time, it is ensured that the required data can be accurately displayed on the page without problems such as graphic deviation and time axis uncertainty. Attached Figure Description

[0054] Figure 1 This is a flowchart illustrating a method for generating Gantt charts based on tables, as proposed in this invention.

[0055] Figure 2 This is a schematic diagram of the table structure for a method of generating Gantt charts based on tables proposed in this invention.

[0056] Figure 3 This invention presents a double-line Gantt chart based on a table-based method for generating Gantt charts. Detailed Implementation

[0057] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention. Example

[0058] A method for generating Gantt charts based on tables, which renders Gantt charts based on table structures, includes the following steps:

[0059] Table row generation: Generate corresponding table rows based on the start and end dates of the project. Each row represents a hierarchical node of the project.

[0060] The column rendering is based on project requirements, rendering each column of the table. Column data includes task name, person in charge, start date, and end date.

[0061] Nested tree structure, the table row data is a nestable tree structure, each level node corresponds to a row of the table;

[0062] Date range rendering, for the date range part, according to the specific attribute identified by the current row, fill in the corresponding cell, show the planned time interval and the actual execution time interval two time ranges;

[0063] Customized filling content, according to different types of date range, customize the filling content of the cell, the filling content includes color and background pattern.

[0064] As a further description of the above technical solutions:

[0065] The gantt chart system implementation method is as follows:

[0066] Determine the storage mode of the project and the implementation value in the database, and store the project information and the implementation value of each time period in the database respectively into a string;

[0067] After the table in the database is taken into the program, the fields of each time period are automatically added;

[0068] Convert the project information and the implementation progress in each record of the data table into the value of each time period field;

[0069] Bind the data table to the data grid control first, and then display the value of each time field as an implementation progress picture;

[0070] Provide a client corresponding function for the mouse click time of each implementation progress picture, and change the filling content of the picture.

[0071] Specifically, in the project establishment stage, the user can set the project content through selecting the start and end dates of the entire interval, and can fine-tune, cancel or set the plan of the time period by clicking the implementation progress of the time period.

[0072] Specifically, in the project implementation stage, the user can click the implementation progress of the time period after completing the progress of the time period, so that the implementation bar under the implementation task changes from light color to green, indicating that the task of the time period has been implemented.

[0073] Specifically, the separation of gantt chart time sequence data, starting from the time sequence direction that needs to be processed, each cell is abstracted as a triple (T, C, D), wherein T represents the time variable, taking time as the reference element, C as the data variable, representing the actual expression content of the data, and D represents the structure variable in the storage process of the cell, used to reflect the structure and nature of the data in the storage process.

[0074] Specifically, in the separation of gantt chart time sequence data, the following definitions can be made for the time sequence:

[0075] For any D, there are n triplets in the time sequence set, where n is a finite number;

[0076] , satisfy

[0077] wherein is the time value of the first data;

[0078] The actual time series data is defined as above, in actual application, in order to make the data be able to be processed and used, the time variable T in the triple (T, C, D) needs to be separated, and converted into two-dimensional data that can be stored by the database, and finally displayed in the Gantt chart.

[0079] As a further description of the above technical solution:

[0080] The Gantt chart automatic matching time algorithm defines the data vector wherein is the time value of the first data,

[0081] is the information of the first data, the time value in the vector is converted into a numerical variable, if exists, then

[0082]

[0083] then

[0084]

[0085] then .

[0086] Preferably, the rendering of the Gantt chart selects SVG or Canvas to draw the Gantt chart.

[0087] Preferably, the Gantt chart data structure adopts a flat structure based on JSON.

[0088] Preferably, the Gantt chart component integration selects a completely customized front-end framework.

[0089] In this embodiment, the project task and date information are displayed in the form of a Gantt chart in the form of a table, which can quickly generate a visual progress chart, and facilitate project managers to schedule tasks and track progress, and the Figure 2 The composition of the table structure and the mutual relationship of each part are shown, such as the mapping relationship between the table row and the tree structure and the filling method of the date range, which directly reflects the technical solution of the application.

[0090] Embodiment two

[0091] A method for generating a Gantt chart based on a table, rendering the Gantt chart based on the table structure, the specific steps are as follows:

[0092] Table row generation, generating corresponding table rows according to the start and end dates of the project, each row representing a hierarchical node of the project;

[0093] Column rendering, rendering each column of the table according to the project requirements, and rendering the Gantt chart using SVG or Canvas to draw the Gantt chart;

[0094] Nested tree structure, the table row data is a nested tree structure, and each hierarchical node corresponds to a row of the table;

[0095] Date range rendering, for the date range part, according to the specific attribute identified by the current row, fill in the corresponding cell, and display the planned time interval and the actual execution time interval;

[0096] Customize the content of the filled cell, customize the content of the filled cell according to different types of date ranges, and the filled content includes color and background pattern.

[0097] Further description of the above technical solutions:

[0098] The Gantt chart system implementation method is as follows:

[0099] Determine the storage method of the project and the implementation value in the database, and store the project information and the implementation value of each time period in the database respectively into a string;

[0100] After the table in the database is taken into the program, the fields of each time period are automatically added;

[0101] Convert the project information and implementation progress in each record of the data table into the value of each time period field;

[0102] Bind the data table to the data grid control first, and then display the value of each time field as an implementation progress picture;

[0103] Provide a client corresponding function for the mouse click time of each implementation progress picture, and change the filling content of the picture.

[0104] Specifically, in the project establishment stage, the user can set the project content through selecting the start and end dates of the entire interval, and can fine-tune, cancel or set the plan of the time period by clicking the implementation progress of the time period.

[0105] Specifically, during the project implementation phase, users can click on the implementation progress of a certain time period after completing the progress for that time period. This will change the implementation bar below the implementation task from light to green, indicating that the task for that time period has been implemented.

[0106] Specifically, the time series data of the Gantt chart is separated. Starting from the direction of the time series to be processed, each cell is abstracted into a triple (T, C, D). Here, T represents the time variable, with time as the baseline element, C represents the data variable, which represents the actual content of the data, and D represents the structural variable in the cell storage process, which reflects the structure and properties of the data in the storage process.

[0107] Specifically, in the separation of the Gantt chart time series data, the time series can be defined as follows:

[0108] For any D, there is a time series set consisting of n triples, where n is a finite number;

[0109] ,satisfy

[0110] ,in For the first The time value of each data point;

[0111] The actual time series data is defined as above. In practical applications, in order to process and utilize the data, it is necessary to separate the time variable T from the triple (T, C, D), convert it into two-dimensional data that can be stored in the database, and finally display it in a Gantt chart.

[0112] As a further description of the above technical solution:

[0113] The Gantt chart automatic matching time algorithm defines a data vector. ,in For the first The time value of each data point.

[0114] For the first Information about each data point, in the vector Convert the time values ​​in the data into numerical variables, if they exist. Then we have:

[0115]

[0116] but

[0117]

[0118] but .

[0119] The embodiment is specific: in addition to the rendering mode based on the HTML table, the developer can also choose to use SVG or Canvas for the drawing of the Gantt chart, and these two modes have certain advantages in flexibility and customization, but their compatibility and performance may not be as good as the table mode, and the development complexity is higher.

[0120] Example three

[0121] A method for generating a Gantt chart based on a table, rendering a Gantt chart based on a table structure, the specific steps are as follows:

[0122] Table row generation, generating corresponding table rows according to the start and end dates of the project, each row representing a hierarchical node of the project;

[0123] Column rendering, rendering each column of the table according to project requirements, column data including task name, responsible person, start date and end date;

[0124] Nested tree structure, using a JSON-based flattening structure;

[0125] Date range rendering, for the date range part, according to the specific attributes identified by the current row, fill in the corresponding cells, and display the planned time interval and the actual execution time interval;

[0126] Customize the content of the filled cells, customize the content of the filled cells according to different types of date ranges, and the filled content includes color and background pattern.

[0127] Further description of the above technical solutions:

[0128] The Gantt chart system implementation method is as follows:

[0129] Determine the storage method of the project and the implementation value in the database, and store the project information and the implementation value of each time period in the database respectively into a string;

[0130] After the table in the database is taken into the program, the fields of each time period are automatically added;

[0131] Convert the project information and implementation progress in each record of the data table into the values of the fields of each time period;

[0132] Bind the data table to the data grid control first, and then display the values of each time field as implementation progress pictures;

[0133] Provide a client-side corresponding function for the mouse click time of each implementation progress picture to change the filling content of the picture.

[0134] Specifically, in the project establishment stage, the user can set the project content for the whole interval by selecting the start and end dates, and can fine-tune, cancel or set the plan for a certain time period by clicking the implementation progress of the time period.

[0135] Specifically, in the project implementation stage, the user can click the implementation progress of a certain time period after completing the progress of the time period, so that the implementation bar under the implementation task changes from light programming green to indicate that the task of the time period has been implemented.

[0136] Specifically, the separation of Gantt chart time sequence data is made from the direction of time sequence to be processed, and each cell is abstracted into a triple (T, C, D), wherein T represents a time variable, C is a data variable, and D is a structure variable in the storage process of the cell.

[0137] Specifically, in the separation of Gantt chart time sequence data, the following definitions can be made for the time sequence:

[0138] For any D, there are n triplets in the time sequence set, wherein n is a finite number;

[0139] , satisfying

[0140] , wherein is the time value of the first data;

[0141] The actual time sequence data is defined as above. In actual application, in order to process and use the data, the time variable T in the triple (T, C, D) needs to be separated and converted into two-dimensional data that can be stored in a database, and finally displayed on the Gantt chart.

[0142] As a further description of the above technical solution:

[0143] The Gantt chart automatic matching time algorithm defines a data vector , wherein is the time value of the first data,

[0144] is the information of the first data, the time value in the vector is converted into a numerical variable, and if exists, then

[0145]

[0146] then​​​

[0147]

[0148] Then .

[0149] The embodiment is specific: the nested tree structure data used can be replaced by a JSON-based flat structure, which can be easier to handle in some specific cases, but in the display of multi-level projects, the nested structure is more intuitive and effective.

[0150] Example four

[0151] A method for generating a Gantt chart based on a table, which renders the Gantt chart based on the table structure, and the specific steps are as follows:

[0152] Table row generation, generate corresponding table rows according to the start and end dates of the project, and each row represents a hierarchical node of the project;

[0153] Column rendering, render each column of the table according to project requirements, and column data includes task name, responsible person, start date and end date;

[0154] Nested tree structure, the table row data is a nested tree structure, and each hierarchical node corresponds to a row of the table;

[0155] Date range rendering, for the date range part, fill in the corresponding cells according to the specific attributes identified by the current row, and display the planned time interval and the actual execution time interval;

[0156] Customize the content, and the Gantt chart component integrates a completely customizable front-end framework.

[0157] Further description of the above technical solutions:

[0158] The Gantt chart system implementation method is as follows:

[0159] Determine the storage method of the project and the implementation value in the database, and store the project information and the implementation value of each time period in the database respectively into a string;

[0160] After the table in the database is taken into the program, the fields of each time period are automatically added;

[0161] Convert the project information and implementation progress in each record of the data table into the value of each time period field;

[0162] Bind the data table to the data grid control first, and then display the value of each time field as an implementation progress picture;

[0163] Provide a client-side function to respond to mouse clicks on each implementation progress image, changing the image's fill content.

[0164] Specifically, during the project setup phase, users can set the project content for the entire period by selecting start and end dates, and can fine-tune the implementation progress of a specific time period by clicking on it, as well as cancel or set the plan for that time period.

[0165] Specifically, during the project implementation phase, users can click on the implementation progress of a certain time period after completing the progress for that time period. This will change the implementation bar below the implementation task from light to green, indicating that the task for that time period has been implemented.

[0166] Specifically, the time series data of the Gantt chart is separated. Starting from the direction of the time series to be processed, each cell is abstracted into a triple (T, C, D). Here, T represents the time variable, with time as the baseline element, C represents the data variable, which represents the actual content of the data, and D represents the structural variable in the cell storage process, which reflects the structure and properties of the data in the storage process.

[0167] Specifically, in the separation of the Gantt chart time series data, the time series can be defined as follows:

[0168] For any D, there is a time series set consisting of n triples, where n is a finite number;

[0169] ,satisfy

[0170] ,in For the first The time value of each data point;

[0171] The actual time series data is defined as above. In practical applications, in order to process and utilize the data, it is necessary to separate the time variable T from the triple (T, C, D), convert it into two-dimensional data that can be stored in the database, and finally display it in a Gantt chart.

[0172] As a further description of the above technical solution:

[0173] The Gantt chart automatic matching time algorithm defines a data vector. ,in For the first The time value of each data point.

[0174] For the first Information about each data point, in the vector Convert the time values ​​in the data into numerical variables, if they exist. Then we have:

[0175]

[0176] then

[0177]

[0178] then .

[0179] The embodiment is specific: if the developer needs higher customization capability or reduces dependence, a completely customized front-end framework can be selected to replace the existing component integration mode.

[0180] Although the three embodiments of the second embodiment, the third embodiment and the fourth embodiment can realize similar functions, the scheme of the first embodiment may be better than the schemes of the second embodiment, the third embodiment and the fourth embodiment in terms of efficiency, compatibility and development cost, and therefore, the selection needs to be made according to actual needs.

[0181] The above merely describes the preferred embodiments of the present application, but the protection scope of the present application is not limited thereto, and any person skilled in the art, according to the technical scheme and the inventive concept of the present application, makes equivalent replacement or change within the technical range disclosed by the present application, should be covered within the protection scope of the present application.

Claims

1. A method for generating a Gantt chart based on a table, characterized by, The Gantt chart rendering is based on a table structure, and the specific steps are as follows: Table row generation: generate corresponding table rows according to the start and end dates of the project, and each row represents a hierarchical node of the project; Column rendering: render each column of the table according to the project requirements, and the column data includes task name, responsible person, start date and end date; Nested tree structure: the table row data is a nested tree structure, and each hierarchical node corresponds to a row of the table; Date range rendering: for the date range part, fill in the corresponding cells according to the specific attributes identified by the current row, and display the planned time interval and the actual execution time interval; Customize the content filling: customize the filling content of the cell according to different types of date range, which includes color and background pattern; The Gantt chart system implementation method is as follows: Determine the storage method of the project and the implementation value in the database, and store the project information and the implementation value of each time period in the database respectively into a string; After the table in the database is taken into the program, the fields of each time period are automatically added; Convert the project information and implementation progress in each record of the data table into the values of the time period fields; Bind the data table to the data grid control first, and then display the values of each time field as implementation progress pictures; Provide a client-side function for each implementation progress picture mouse click time to change the filling content of the picture; In the project establishment stage, the user can set the project content for the entire interval by selecting the start and end dates, and can fine-tune, cancel or set the plan for a certain time period by clicking the implementation progress of that time period; In the project implementation stage, the user can click the implementation progress of a certain time period after completing the progress of that time period, so that the implementation bar under the implementation task changes from light programming green to dark programming green, indicating that the task of that time period has been implemented; The separation of Gantt chart time series data starts from the time series direction that needs to be processed, and each cell is abstracted as a triple (T, C, D), where T represents the time variable, C represents the data variable, and D represents the structure variable in the storage process.

2. The method for generating a Gantt chart based on a table according to claim 1, wherein, In the separation of Gantt chart time series data, the following definitions can be made for the time series: For any D, there are n triplets in the time series set, where n is a finite number; , meet wherein is the time value of the th data; The actual time series data is defined as above. In practical applications, in order to process and use the data, the time variable T in the triple (T, C, D) needs to be separated and converted into two-dimensional data that can be stored in the database, and finally displayed in the Gantt chart.

3. The method for generating a Gantt chart based on a table according to claim 2, wherein, The Gantt chart automatic matching time algorithm, define data vector , For the information of the 1st data, the time value in the vector is converted into a numerical variable, if there is then: then then .

4. The method for generating a Gantt chart based on a table according to claim 1, wherein, The Gantt chart rendering selects SVG or Canvas for Gantt chart drawing.

5. The method for generating a Gantt chart based on a table according to claim 1, wherein, The Gantt chart data structure uses a flat structure based on JSON.

6. The method for generating a Gantt chart based on a table according to claim 1, wherein, In the Gantt chart component integration, a completely customized front-end framework is selected.

Images