Method for generating Gantt chart based on table
Through the Gantt chart generation method based on table structure, the problem of insufficient support for custom functions and styles in the prior art is solved, and efficient, easy to maintain and expand Gantt chart generation is achieved, enhancing user experience and customization capabilities.
Patent Information
- Application Number
- CN202510071505.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-01-16
- Publication Date
- 2025-05-13
- Estimated Expiration
- 2045-01-16
AI Technical Summary
The existing Gantt chart generation technology has shortcomings in meeting highly customized functions or specific styles. Developers need to invest a lot of time and effort to adjust and optimize. Some solutions rely too much on third-party components, resulting in restrictions when customizing and expanding, increasing development difficulty and cost.
The Gantt chart generation method based on table structure is adopted to render nested tree structures and date ranges through the rendering of table rows and columns, and supports custom fill content, including colors and background patterns, enhancing the customization ability and flexibility of Gantt charts.
Improve development efficiency, simplify data management and operation, enhance user experience, provide high compatibility and flexible customization capabilities, reduce dependence on third-party components, and reduce project costs and risks.
Smart Images

Figure CN119990079A_ABST
Abstract
Description
Technical Field
[0001] The invention belongs to the technical field of Gantt chart generation, and in particular relates to a method for generating a Gantt chart based on a table. Background Art
[0002] At present, the Gantt chart generation technology on the market is mainly implemented in three ways:
[0003] Canvas drawing, drawing charts directly on the Canvas element of the browser. This method has high flexibility but requires high development complexity;
[0004] HTML DIV generation, using HTML DIV elements for layout and CSS for style control, is suitable for rapid development, but may have performance issues in complex scenarios;
[0005] HTML Table generation uses HTML table structure to draw Gantt charts. This method is intuitive and easy to understand, but the support for style customization is relatively limited.
[0006] The above three methods include source code integration, component integration, and page nesting in terms of deployment methods.
[0007] Existing technologies are insufficient in meeting the needs of highly customized functions or specific styles. Developers need to invest a lot of time and energy in adjustments and optimizations. Some solutions rely too much on third-party components, which leads to limitations in customization and expansion, increasing development difficulty and cost. For component-based integrated solutions, the internal structure is often difficult to modify, or the modification process is too complicated, which limits the developer's operating space.
[0008] Based on this, the present invention designs a method for generating a Gantt chart based on a table to solve the above problem. Summary of the invention
[0009] The purpose of the present invention is to solve the problems that the prior art has deficiencies in meeting highly customized functions or specific styles, developers need to invest a lot of time and energy in adjustment and optimization, some solutions are too dependent on third-party components, resulting in limitations in customization and expansion, increasing development difficulty and cost, and for component-based integrated solutions, the internal structure is often difficult to modify, or the modification process is too complicated, which limits the developer's operating space. A method for generating a Gantt chart based on a table is proposed.
[0010] In order to achieve the above object, the present invention adopts the following technical solutions:
[0011] A method for generating a Gantt chart based on a table, and rendering the Gantt chart based on the table structure, the specific steps are as follows:
[0012] Table row generation: Generate corresponding table rows according to the start and end dates of the project. Each row represents a hierarchical node of the project.
[0013] Column rendering: Render the columns of the table according to project requirements. The column data may include task name, person in charge, start date, and end date.
[0014] Nested tree structure: the table row data is a nested tree structure. Each level node corresponds to a row of the table, and the hierarchical relationship is clear.
[0015] Date range rendering: For the date range part, fill the corresponding cells according to the specific attributes of the current row identifier, and display the two time ranges of planned time interval and actual execution time interval;
[0016] Customization of fill content: Customize the fill content of cells according to different types of date ranges. The fill content includes various colors and background patterns to visually display the differences in project progress.
[0017] As a further description of the above technical solution:
[0018] The Gantt chart system implementation method is as follows:
[0019] Determine how to store projects and implementation values in the database. Since there are many time periods for project implementation, it is impossible to create a field for each time period. Therefore, the project information and implementation values at each time end are combined and stored in the database as a string.
[0020] After the tables in the database are used in the program, the fields for each time period are automatically added, which facilitates the interactive processing of the implementation progress in each time period;
[0021] Convert the project information and implementation progress in each record of the data table into the values of the fields in each time period;
[0022] Bind the transformed data table to the data grid control first, and then display the values of each time field as an implementation progress picture;
[0023] Provide a client-side corresponding function for each mouse click time of the progress picture to change the filling content of the picture.
[0024] As a further description of the above technical solution:
[0025] During the project establishment phase, the user can set the project content for the entire period by selecting the start and end dates, and can fine-tune the implementation progress of a certain time period by clicking on it, and cancel or set the plan for that time period.
[0026] As a further description of the above technical solution:
[0027] During the project implementation phase, the user can click on the implementation progress of a certain time period after completing the progress of that time period, so that the implementation bar below the implementation task changes from light color to green, indicating that the tasks of that time period have been implemented.
[0028] As a further description of the above technical solution:
[0029] The separation of the Gantt chart time series data starts from the direction of the time series to be processed, and abstracts each cell into a triple (T, C, D), wherein T represents the time variable, with time as the reference element, C is the data variable, which represents the actual expression content of the data, and D represents the structural variable in the cell storage process, which is used to reflect the structure and properties of the data in the storage process, and the sequence data line is processed by dimensionality reduction, and the structure stored in the cell is ignored.
[0030] As a further description of the above technical solution:
[0031] In the separation of the Gantt chart time series data, the time series can be defined as follows:
[0032] For any D, there is a time series set consisting of N triplets, where N is a finite number;
[0033] M:{T1,C1,D1},{T1,C1,D1},…,{T n ,C n ,D n}, satisfying T i <T i+1 (i=1,2,…,n-1);
[0034] The actual time series data is defined as above. In practical applications, in order to process and use the data, it is necessary to separate the time variable T in the triple (T, C, D), convert it into two-dimensional data that can be stored in the database, and finally display it in the Gantt chart;.
[0035] As a further description of the above technical solution:
[0036] The Gantt chart automatic time matching algorithm defines the data vector X i =(T i ,L i ), where T is the time value of the i-th data, and L is the information of the i-th data. The time value in vector X is converted into a numerical variable. If i exists, then:
[0037]
[0038] Then Xi =X min ;
[0039]
[0040] Then X i =X max .
[0041] Preferably, the rendering of the Gantt chart uses SVG or Canvas to draw the Gantt chart, so as to improve the leading and customizing performance of the Gantt chart.
[0042] Preferably, the Gantt chart data structure adopts a flat structure based on JSON, which is easy to process in certain situations.
[0043] Preferably, a completely customized front-end framework is selected in the Gantt chart component integration to provide higher customization performance and reduce dependencies.
[0044] In summary, due to the adoption of the above technical solution, the beneficial effects of the present invention are:
[0045] 1. In the present invention, the development efficiency is improved, and the table-based Gantt chart rendering method for structured data management makes data management and operation more intuitive. The rows and columns of the table can be directly mapped to the hierarchy and time range of the project tasks, reducing complex logical processing, significantly improving development efficiency, and facilitating maintenance and expansion. Due to the highly modular design, developers can easily modify or expand specific functions without affecting the overall structure, reducing the workload of later maintenance, and can quickly respond to changes in demand in different scenarios.
[0046] 2. In the present invention, the user experience is enhanced and the rendering effect is smooth. By optimizing the logic of table rendering, it can maintain a smooth rendering effect when processing large amounts of data or complex projects, avoiding freezes or page crashes, and directly improving the user experience. It has high compatibility and adopts an HTML table structure to ensure consistent display of the Gantt chart on different browsers and devices. Users do not need to worry about browser compatibility issues and can obtain a consistent user experience on multiple platforms.
[0047] 3. In the present invention, flexible customization capabilities and high customization allow users to flexibly adjust the style and content display of the Gantt chart according to project requirements. Through nested tree structures and customized date rendering logic, users can easily achieve specific display effects to meet the needs of different application scenarios and reduce dependencies. 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.
[0048] 4. In the present invention, the integration process is simplified, modular integration is implemented, and the Gantt chart generation method is easy to integrate with the existing system. Developers can selectively introduce the required modules, which simplifies the integration process and reduces the impact on the existing system.
[0049] 5. In the present invention, the generated double-line Gantt chart expands the usage of the Gantt chart, facilitates intuitive comparison and inspection of plans and implementation status, has good interactive operability, is easy to master and use, is based on general column template technology, and is easy to develop.
[0050] 6. In the present invention, in the double-line Gantt chart, if the project bar is light-colored, it means that there is a plan for the task in that period, and if the implementation bar below is dark-colored, it means that the task in that period has been implemented.
[0051] 7. In the present invention, by storing and displaying the time series data in real time, it is ensured that the required data can be accurately displayed on the page without problems of graphic deviation and time axis uncertainty. BRIEF DESCRIPTION OF THE DRAWINGS
[0052] Figure 1 A schematic diagram of a process of generating a Gantt chart based on a table proposed by the present invention;
[0053] Figure 2 A schematic diagram of a table structure of a method for generating a Gantt chart based on a table proposed by the present invention;
[0054] Figure 3 The invention discloses a double-line Gantt chart of a method for generating a Gantt chart based on a table. DETAILED DESCRIPTION
[0055] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.
[0056] Embodiment 1
[0057] A method for generating a Gantt chart based on a table, and rendering the Gantt chart based on the table structure, the specific steps are as follows:
[0058] Table row generation: Generate corresponding table rows according to the start and end dates of the project. Each row represents a hierarchical node of the project.
[0059] Column rendering: Render the columns of the table according to project requirements. The column data may include task name, person in charge, start date, and end date.
[0060] Nested tree structure: the table row data is a nested tree structure. Each level node corresponds to a row of the table, and the hierarchical relationship is clear.
[0061] Date range rendering: For the date range part, fill the corresponding cells according to the specific attributes of the current row identifier, and display the two time ranges of planned time interval and actual execution time interval;
[0062] Customization of fill content: Customize the fill content of cells according to different types of date ranges. The fill content includes various colors and background patterns to visually display the differences in project progress.
[0063] As a further description of the above technical solution:
[0064] The Gantt chart system implementation method is as follows:
[0065] Determine how to store projects and implementation values in the database. Since there are many time periods for project implementation, it is impossible to create a field for each time period. Therefore, the project information and implementation values at each time end are combined and stored in the database as a string.
[0066] After the tables in the database are used in the program, the fields for each time period are automatically added, which facilitates the interactive processing of the implementation progress in each time period;
[0067] Convert the project information and implementation progress in each record of the data table into the values of the fields in each time period;
[0068] Bind the transformed data table to the data grid control first, and then display the values of each time field as an implementation progress picture;
[0069] Provide a client-side corresponding function for each mouse click time of the progress picture to change the filling content of the picture.
[0070] Specifically, during the project establishment phase, the user can set the project content for the entire period by selecting the start and end dates, and can fine-tune the implementation progress of a certain time period by clicking on it, and cancel or set the plan for that time period.
[0071] Specifically, during the project implementation phase, the user can click on the implementation progress of a certain time period after completing the progress of the time period, so that the implementation bar below the implementation task changes from light color to green, indicating that the tasks of the time period have been implemented.
[0072] Specifically, the separation of the Gantt chart time series data starts from the direction of the time series to be processed, and each cell is abstracted into a triple (T, C, D), wherein T represents the time variable, with time as the reference element, C is the data variable, and represents the actual expression content of the data, and D represents the structural variable in the cell storage process, which is used to reflect the structure and properties of the data in the storage process, and the sequence data line is processed for dimensionality reduction, and the structure stored in the cell is ignored.
[0073] Specifically, in the separation of the Gantt chart time series data, the time series can be defined as follows:
[0074] For any D, there is a time series set consisting of N triplets, where N is a finite number;
[0075] M:{T1,C1,D1},{T1,C1,D1},…,{T n ,C n ,D n}, satisfying T i <T i+1 (i=1,2,…,n-1);
[0076] The actual time series data is defined as above. In practical applications, in order to process and use the data, it is necessary to separate the time variable T in the triple (T, C, D), convert it into two-dimensional data that can be stored in the database, and finally display it in the Gantt chart;.
[0077] Specifically, the Gantt chart automatic time matching algorithm defines a data vector X i =(T i ,L i ), where T is the time value of the i-th data, and L is the information of the i-th data. The time value in vector X is converted into a numerical variable. If i exists, then:
[0078]
[0079] Then X i =X min ;
[0080]
[0081] Then X i =X max .
[0082] Preferably, the rendering of the Gantt chart uses SVG or Canvas to draw the Gantt chart, so as to improve the leading and customizing performance of the Gantt chart.
[0083] Preferably, the Gantt chart data structure adopts a flat structure based on JSON, which is easy to process in certain situations.
[0084] Preferably, a completely customized front-end framework is selected in the Gantt chart component integration to provide higher customization performance and reduce dependencies.
[0085] In this implementation, the project's tasks and date information are displayed in the form of a Gantt chart in a table, which can quickly generate a visual progress chart, making it easier for project managers to schedule tasks and track progress. Figure 2 The components of the table structure and the relationships between the components are shown, such as the mapping relationship between the table rows and the tree structure and the filling method of the date range, which intuitively reflects the technical solution of the present invention.
[0086] Embodiment 2
[0087] A method for generating a Gantt chart based on a table, and rendering the Gantt chart based on the table structure, the specific steps are as follows:
[0088] Table row generation: Generate corresponding table rows according to the start and end dates of the project. Each row represents a hierarchical node of the project.
[0089] Column rendering: Render the columns of the table according to project requirements. For Gantt chart rendering, choose to use SVG or Canvas to draw the Gantt chart to improve the leading and custom performance of the Gantt chart.
[0090] Nested tree structure: the table row data is a nested tree structure. Each level node corresponds to a row of the table, and the hierarchical relationship is clear.
[0091] Date range rendering: For the date range part, fill the corresponding cells according to the specific attributes of the current row identifier, and display the two time ranges of planned time interval and actual execution time interval;
[0092] Customization of fill content: Customize the fill content of cells according to different types of date ranges. The fill content includes various colors and background patterns to visually display the differences in project progress.
[0093] As a further description of the above technical solution:
[0094] The Gantt chart system implementation method is as follows:
[0095] Determine how to store projects and implementation values in the database. Since there are many time periods for project implementation, it is impossible to create a field for each time period. Therefore, the project information and implementation values at each time end are combined and stored in the database as a string.
[0096] After the tables in the database are used in the program, the fields for each time period are automatically added, which facilitates the interactive processing of the implementation progress in each time period;
[0097] Convert the project information and implementation progress in each record of the data table into the values of the fields in each time period;
[0098] Bind the transformed data table to the data grid control first, and then display the values of each time field as an implementation progress picture;
[0099] Provide a client-side corresponding function for each mouse click time of the progress picture to change the filling content of the picture.
[0100] Specifically, during the project establishment phase, the user can set the project content for the entire period by selecting the start and end dates, and can fine-tune the implementation progress of a certain time period by clicking on it, and cancel or set the plan for that time period.
[0101] Specifically, during the project implementation phase, the user can click on the implementation progress of a certain time period after completing the progress of the time period, so that the implementation bar below the implementation task changes from light color to green, indicating that the tasks of the time period have been implemented.
[0102] Specifically, the separation of the Gantt chart time series data starts from the direction of the time series to be processed, and each cell is abstracted into a triple (T, C, D), wherein T represents the time variable, with time as the reference element, C is the data variable, and represents the actual expression content of the data, and D represents the structural variable in the cell storage process, which is used to reflect the structure and properties of the data in the storage process, and the sequence data line is processed for dimensionality reduction, and the structure stored in the cell is ignored.
[0103] Specifically, in the separation of the Gantt chart time series data, the time series can be defined as follows:
[0104] For any D, there is a time series set consisting of N triplets, where N is a finite number;
[0105] M:{T1,C1,D1},{T1,C1,D1},…,{T n ,C n ,D n}, satisfying T i <T i+1 (i=1,2,…,n-1);
[0106] The actual time series data is defined as above. In practical applications, in order to process and use the data, it is necessary to separate the time variable T in the triple (T, C, D), convert it into two-dimensional data that can be stored in the database, and finally display it in the Gantt chart;.
[0107] Specifically, the Gantt chart automatic time matching algorithm defines a data vector X i =(T i ,L i ), where T is the time value of the i-th data, and L is the information of the i-th data. The time value in vector X is converted into a numerical variable. If i exists, then:
[0108]
[0109] Then X i =X min ;
[0110]
[0111] Then X i =X max .
[0112] The specific implementation method of this invention is as follows: In addition to the rendering method based on HTML tables, developers can also choose to use SVG or Canvas to draw Gantt charts. These two methods have certain advantages in flexibility and customization, but their compatibility and performance may not be as good as the table method, and the development complexity is higher.
[0113] Embodiment 3
[0114] A method for generating a Gantt chart based on a table, and rendering the Gantt chart based on the table structure, the specific steps are as follows:
[0115] Table row generation: Generate corresponding table rows according to the start and end dates of the project. Each row represents a hierarchical node of the project.
[0116] Column rendering: Render the columns of the table according to project requirements. The column data may include task name, person in charge, start date, and end date.
[0117] Nested tree structure, using a flat structure based on JSON for easy processing in certain situations;
[0118] Date range rendering: For the date range part, fill the corresponding cells according to the specific attributes of the current row identifier, and display the two time ranges of planned time interval and actual execution time interval;
[0119] Customization of fill content: Customize the fill content of cells according to different types of date ranges. The fill content includes various colors and background patterns to visually display the differences in project progress.
[0120] As a further description of the above technical solution:
[0121] The Gantt chart system implementation method is as follows:
[0122] Determine how to store projects and implementation values in the database. Since there are many time periods for project implementation, it is impossible to create a field for each time period. Therefore, the project information and implementation values at each time end are combined and stored in the database as a string.
[0123] After the tables in the database are used in the program, the fields for each time period are automatically added, which facilitates the interactive processing of the implementation progress in each time period;
[0124] Convert the project information and implementation progress in each record of the data table into the values of the fields in each time period;
[0125] Bind the transformed data table to the data grid control first, and then display the values of each time field as an implementation progress picture;
[0126] Provide a client-side corresponding function for each mouse click time of the progress picture to change the filling content of the picture.
[0127] Specifically, during the project establishment phase, the user can set the project content for the entire period by selecting the start and end dates, and can fine-tune the implementation progress of a certain time period by clicking on it, and cancel or set the plan for that time period.
[0128] Specifically, during the project implementation phase, the user can click on the implementation progress of a certain time period after completing the progress of the time period, so that the implementation bar below the implementation task changes from light color to green, indicating that the tasks of the time period have been implemented.
[0129] Specifically, the separation of the Gantt chart time series data starts from the direction of the time series to be processed, and each cell is abstracted into a triple (T, C, D), wherein T represents the time variable, with time as the reference element, C is the data variable, and represents the actual expression content of the data, and D represents the structural variable in the cell storage process, which is used to reflect the structure and properties of the data in the storage process, and the sequence data line is processed for dimensionality reduction, and the structure stored in the cell is ignored.
[0130] Specifically, in the separation of the Gantt chart time series data, the time series can be defined as follows:
[0131] For any D, there is a time series set consisting of N triplets, where N is a finite number;
[0132] M:{T1,C1,D1},{T1,C1,D1},…,{T n ,C n ,D n}, satisfying T i <T i+1 (i=1,2,…,n-1);
[0133] The actual time series data is defined as above. In practical applications, in order to process and use the data, it is necessary to separate the time variable T in the triple (T, C, D), convert it into two-dimensional data that can be stored in the database, and finally display it in the Gantt chart;.
[0134] Specifically, the Gantt chart automatic time matching algorithm defines a data vector X i =(T i ,L i ), where T is the time value of the i-th data, and L is the information of the i-th data. The time value in vector X is converted into a numerical variable. If i exists, then:
[0135]
[0136] Then X i =X min ;
[0137]
[0138] Then X i =X max .
[0139] The present implementation is specifically as follows: the nested tree structure data used can be replaced with a flat structure based on JSON. The flat structure can be easier to handle in some specific situations, but in the display of multi-level projects, the nested structure is more intuitive and effective.
[0140] Embodiment 4
[0141] A method for generating a Gantt chart based on a table, and rendering the Gantt chart based on the table structure, the specific steps are as follows:
[0142] Table row generation: Generate corresponding table rows according to the start and end dates of the project. Each row represents a hierarchical node of the project.
[0143] Column rendering: Render the columns of the table according to project requirements. The column data may include task name, person in charge, start date, and end date.
[0144] Nested tree structure: the table row data is a nested tree structure. Each level node corresponds to a row of the table, and the hierarchical relationship is clear.
[0145] Date range rendering: For the date range part, fill the corresponding cells according to the specific attributes of the current row identifier, and display the two time ranges of planned time interval and actual execution time interval;
[0146] To customize the filling content, a completely customized front-end framework is selected in the Gantt chart component integration to provide higher customization performance and reduce dependencies.
[0147] As a further description of the above technical solution:
[0148] The Gantt chart system implementation method is as follows:
[0149] Determine how to store projects and implementation values in the database. Since there are many time periods for project implementation, it is impossible to create a field for each time period. Therefore, the project information and implementation values at each time end are combined and stored in the database as a string.
[0150] After the tables in the database are used in the program, the fields for each time period are automatically added, which facilitates the interactive processing of the implementation progress in each time period;
[0151] Convert the project information and implementation progress in each record of the data table into the values of the fields in each time period;
[0152] Bind the transformed data table to the data grid control first, and then display the values of each time field as an implementation progress picture;
[0153] Provide a client-side corresponding function for each mouse click time of the progress picture to change the filling content of the picture.
[0154] Specifically, during the project establishment phase, the user can set the project content for the entire period by selecting the start and end dates, and can fine-tune the implementation progress of a certain time period by clicking on it, and cancel or set the plan for that time period.
[0155] Specifically, during the project implementation phase, the user can click on the implementation progress of a certain time period after completing the progress of the time period, so that the implementation bar below the implementation task changes from light color to green, indicating that the tasks of the time period have been implemented.
[0156] Specifically, the separation of the Gantt chart time series data starts from the direction of the time series to be processed, and each cell is abstracted into a triple (T, C, D), wherein T represents the time variable, with time as the reference element, C is the data variable, and represents the actual expression content of the data, and D represents the structural variable in the cell storage process, which is used to reflect the structure and properties of the data in the storage process, and the sequence data line is processed for dimensionality reduction, and the structure stored in the cell is ignored.
[0157] Specifically, in the separation of the Gantt chart time series data, the time series can be defined as follows:
[0158] For any D, there is a time series set consisting of N triplets, where N is a finite number;
[0159] M:{T1,C1,D1},{T1,C1,D1},…,{T n ,C n ,D n}, satisfying T i <T i+1 (i=1,2,…,n-1);
[0160] The actual time series data is defined as above. In practical applications, in order to process and use the data, it is necessary to separate the time variable T in the triple (T, C, D), convert it into two-dimensional data that can be stored in the database, and finally display it in the Gantt chart;.
[0161] Specifically, the Gantt chart automatic time matching algorithm defines a data vector X i =(T i ,L i ), where T is the time value of the i-th data, and L is the information of the i-th data. The time value in vector X is converted into a numerical variable. If i exists, then:
[0162]
[0163] Then X i =X min ;
[0164]
[0165] Then X i =X max .
[0166] The specific implementation of this embodiment is as follows: if the developer needs higher customization capabilities or reduced dependencies, a completely customized front-end framework can be selected to replace the existing component integration method.
[0167] Although the three implementation schemes of Example 2, Example 3 and Example 4 can achieve similar functions, they may not be as good as the solution of Example 1 in terms of efficiency, compatibility and development cost, so they need to be selected according to actual needs.
[0168] The above description is only a preferred specific implementation manner of the present invention, but the protection scope of the present invention is not limited thereto. Any technician familiar with the technical field can make equivalent replacements or changes according to the technical scheme and inventive concept of the present invention within the technical scope disclosed by the present invention, which should be covered by the protection scope of the present invention.
Claims
1. A method for generating a Gantt chart based on a table, characterized in that: Rendering the Gantt chart based on the table structure, the specific steps are as follows: Table row generation: Generate corresponding table rows according to the start and end dates of the project. Each row represents a hierarchical node of the project. Column rendering: Render the columns of the table according to project requirements. Column data may include task name, person in charge, start date, and end date. Nested tree structure: the table row data is a nested tree structure. Each level node corresponds to a row of the table, and the hierarchical relationship is clear. Date range rendering: For the date range part, fill the corresponding cells according to the specific attributes of the current row identifier, and display the two time ranges of planned time interval and actual execution time interval; Customization of fill content: Customize the fill content of cells according to different types of date ranges. The fill content includes various colors and background patterns to visually display the differences in project progress.
2. The method for generating a Gantt chart based on a table according to claim 1, characterized in that: The Gantt chart system implementation method is as follows: Determine how to store projects and implementation values in the database. Since there are many time periods for project implementation, it is impossible to create a field for each time period. Therefore, the project information and implementation values at each time end are combined and stored in the database as a string. After the table in the database is used in the program, the fields of each time period are automatically added to facilitate interactive processing of the implementation progress in each time period; Convert the project information and implementation progress in each record of the data table into the values of the fields in each time period; Bind the transformed data table to the data grid control first, and then display the values of each time field as an implementation progress picture; Provide a client-side corresponding function for each mouse click time of the progress picture to change the filling content of the picture.
3. The method for generating a Gantt chart based on a table according to claim 2, characterized in that: During the project establishment phase, the user can set the project content for the entire period by selecting the start and end dates, and can fine-tune the implementation progress of a certain time period by clicking on it, and cancel or set the plan for that time period.
4. The method for generating a Gantt chart based on a table according to claim 3, characterized in that: During the project implementation phase, the user can click on the implementation progress of a certain time period after completing the progress of the time period, so that the implementation bar below the implementation task changes from light color to green, indicating that the tasks of the time period have been implemented.
5. The method for generating a Gantt chart based on a table according to claim 4, characterized in that: The separation of the Gantt chart time series data starts from the direction of the time series to be processed, and abstracts each cell into a triple (T, C, D), wherein T represents the time variable, with time as the reference element, C is the data variable, which represents the actual expression content of the data, and D represents the structural variable in the cell storage process, which is used to reflect the structure and properties of the data in the storage process, and the sequence data line is processed for dimensionality reduction, and the structure stored in the cell is ignored.
6. The method for generating a Gantt chart based on a table according to claim 5, characterized in that: In the separation of the Gantt chart time series data, the time series can be defined as follows: For any D, there is a time series set consisting of N triplets, where N is a finite number; M:{T1,C1,D1},{T1,C1,D1},…,{T n ,C n ,D n }, satisfying T i <T i+1 (i=1,2,…,n-1); The actual time series data is defined as above. In practical applications, in order to process and use the data, it is necessary to separate the time variable T in the triple (T, C, D), convert it into two-dimensional data that can be stored in the database, and finally display it in the Gantt chart;.
7. The method for generating a Gantt chart based on a table according to claim 6, characterized in that: The Gantt chart automatic time matching algorithm defines the data vector X i =(T i ,L i ), where T is the time value of the i-th data, and L is the information of the i-th data. The time value in vector X is converted into a numerical variable. If i exists, then: Then X i =X min ; Then X i =X max .
8. The method for generating a Gantt chart based on a table according to claim 1, characterized in that: The rendering of the Gantt chart uses SVG or Canvas to draw the Gantt chart, so as to improve the leading and customizing performance of the Gantt chart.
9. The method for generating a Gantt chart based on a table according to claim 1, characterized in that: The Gantt chart data structure adopts a flat structure based on JSON, which is used for easy processing in certain situations.
10. The method for generating a Gantt chart based on a table according to claim 1, characterized in that: A completely customized front-end framework is selected in the Gantt chart component integration to provide higher customization performance and reduce dependencies.
Citation Information
Patent Citations
Complex data visualization method and equipment based on stacked tree graph
CN102629271A
Data version comparison method used for Excel documents
CN108009264A
Method and component for visual batch scheduling and production scheduling at webpage side
CN116245319A
Method and system for managing process plan, progress performance and productivity using multiviewer gantt chart
JP2005063084A