Gantt chart processing method and device, computer program product and electronic equipment
By simulating the virtual cells of the Gantt chart and using orthogonal cross lines to form visual cells, the performance problem caused by excessive number of objects during Gantt chart rendering is solved, the browser rendering performance is optimized, the risk of crash is reduced, and the user experience is improved.
Patent Information
- Application Number
- CN202510629598.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-05-15
- Publication Date
- 2025-08-19
AI Technical Summary
In the prior art, Gantt chart rendering requires creating a large number of grid objects, which leads to reduced page rendering performance and may even cause browser crashes and affect user experience.
By simulating the virtual cells of the Gantt chart, using orthogonal crossed lines to form visual cells, reducing the number of objects that the browser needs to create, reducing the complexity of cell drawing, and optimizing browser rendering performance.
In the Gantt chart processing scenario of large-scale task data, the number of object creation is reduced, the risk of browser crashes is reduced, and the rendering performance and user experience is improved.
Smart Images

Figure CN120508344A_ABST
Abstract
Description
Technical Field
[0001] The present disclosure relates to the field of data processing technology, and in particular to a Gantt chart processing method, a Gantt chart processing device, a computer program product, and an electronic device. Background Art
[0002] The Gantt chart is a project management tool that displays the time schedule and dependencies of tasks in the form of a bar chart. It is suitable for scenarios such as task planning, progress tracking, and team communication, and is an important means to improve project management efficiency.
[0003] In related technologies, when rendering a Gantt chart through a browser rendering engine, a grid object needs to be created for each virtual cell for interaction. Each grid object is an element instance, including attributes such as position, size, style, and data related to tasks and dates. Faced with the complex and lengthy task list in the Gantt chart and the large-scale time span, a huge number of grid objects need to be created. When the page is loaded, these grid objects will consume a large amount of CPU (Central Processing Unit) resources, causing a surge in memory usage, slow rendering process, and in extreme cases, causing the browser to be overwhelmed and crash, thus affecting the user experience.
[0004] It should be noted that the information disclosed in the above background technology section is only used to enhance the understanding of the background of the present disclosure, and therefore may include information that does not constitute prior art known to ordinary technicians in the field. Summary of the Invention
[0005] The present disclosure provides a Gantt chart processing method, a Gantt chart processing device, a computer program product, and an electronic device, which at least to some extent solve the problem in the related art that a large number of grid objects need to be created when rendering a Gantt chart, resulting in reduced page rendering performance.
[0006] According to a first aspect of the present disclosure, a Gantt chart processing method is provided, the method comprising: determining cell space information and cell content information corresponding to the Gantt chart based on task information of the Gantt chart to be drawn; determining horizontal grid line attributes and vertical grid line attributes based on the cell space information, and drawing horizontal grid lines and vertical grid lines in a cross-arrangement according to the horizontal grid line attributes and the vertical grid line attributes to form visual cells, wherein the visual cells are used to simulate virtual cells of the Gantt chart; and controlling the cell content information to be displayed at corresponding positions of the visual cells based on the cell space information.
[0007] According to a second aspect of the present disclosure, a Gantt chart processing device is provided, the device comprising: an information determination module for determining, based on task information of the Gantt chart to be drawn, cell space information and cell content information corresponding to the Gantt chart; a grid line drawing module for determining, based on the cell space information, horizontal grid line attributes and vertical grid line attributes, and drawing, based on the horizontal grid line attributes and the vertical grid line attributes, horizontal grid lines and vertical grid lines in a cross-arrangement to form visual cells, the visual cells being used to simulate virtual cells of the Gantt chart; and a display control module for controlling, based on the cell space information, the display of the cell content information at the corresponding position of the visual cell.
[0008] According to a third aspect of the present disclosure, a computer program product is provided, including a computer program. When the computer program is executed by a processor, the Gantt chart processing method of the first aspect and possible implementation thereof are implemented.
[0009] According to a fourth aspect of the present disclosure, an electronic device is provided, comprising: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to execute the Gantt chart processing method of the first aspect and its possible implementation manner by executing the executable instructions.
[0010] The technical solution disclosed in this disclosure has the following beneficial effects:
[0011] During the above-mentioned Gantt chart processing, the cell space information and cell content information corresponding to the Gantt chart are determined according to the task information of the Gantt chart to be drawn; according to the cell space information, the horizontal grid line attributes and the vertical grid line attributes are determined, and according to the horizontal grid line attributes and the vertical grid line attributes, the horizontal grid lines and the vertical grid lines are drawn in a cross-arranged form to form visual cells, which are used to simulate the virtual cells of the Gantt chart; according to the cell space information, the cell content information is controlled to be displayed in the corresponding position of the visual cell. In the present disclosure, the use of orthogonal crossing lines to simulate the virtual cells in the Gantt chart can reduce the number of objects that the browser needs to create to a certain extent, reduce the complexity of cell drawing, and thus optimize the browser's rendering performance and reduce the risk of crashes. It can be well applied to Gantt chart processing scenarios for large-scale task data. BRIEF DESCRIPTION OF THE DRAWINGS
[0012] Figure 1 A flow chart showing a Gantt chart processing method in this exemplary embodiment is shown;
[0013] Figure 2 A flowchart of performing mouse hover interaction in this exemplary embodiment is shown;
[0014] Figure 3 A diagram showing an object pool data structure in this exemplary embodiment is shown;
[0015] Figure 4 An interactive Gantt chart drawing method in this exemplary embodiment is shown;
[0016] Figure 5 A structural block diagram of a Gantt chart processing device according to this exemplary embodiment is shown;
[0017] Figure 6 An electronic device for implementing the Gantt chart processing method in this exemplary embodiment is shown. DETAILED DESCRIPTION
[0018] Exemplary embodiments of the present disclosure will be described more fully hereinafter with reference to the accompanying drawings.
[0019] The accompanying drawings are schematic illustrations of the present disclosure and are not necessarily drawn to scale. Some of the block diagrams shown in the accompanying drawings may be functional entities and do not necessarily correspond to physically or logically independent entities. These functional entities can be implemented in software, or in hardware modules or integrated circuits, or in networks, processors or microcontrollers. The embodiments can be implemented in various forms and should not be construed as being limited to the examples set forth herein. The features, structures or characteristics described in the present disclosure may be combined in one or more embodiments in any suitable manner. In the description below, many specific details are provided to provide a full description of the embodiments of the present disclosure. However, those skilled in the art will appreciate that one or more specific details may be omitted when implementing the technical solution of the present disclosure, or that other methods, components, devices, steps, etc. may be used to replace one or more specific details.
[0020] In related technologies, when rendering a Gantt chart through a browser rendering engine, it is necessary to create a grid object for each virtual cell for interaction. Each grid object is an element instance, including attributes such as position, size, style, and data related to tasks and dates. Faced with the complex and lengthy task list in the Gantt chart and the large-scale time span, a huge number of grid objects need to be created. For example, when the number of tasks and the date span both reach 400, about 160,000 grid objects need to be drawn. When the page is loaded, these grid objects will consume a large amount of processor resources, causing a surge in memory usage, slow rendering process, and in extreme cases, the browser will be overwhelmed and crash, thus affecting the user experience.
[0021] In view of one or more of the above problems, exemplary embodiments of the present disclosure provide a Gantt chart processing method, a Gantt chart processing apparatus, a computer program product, and an electronic device.
[0022] In an optional embodiment, referring to Figure 1 As shown, a flowchart of a Gantt chart processing method is provided, which may specifically include the following steps S110 to S130:
[0023] Step S110, determining the cell space information and cell content information corresponding to the Gantt chart according to the task information of the Gantt chart to be drawn;
[0024] Step S120, determining horizontal grid line attributes and vertical grid line attributes based on the cell space information, and drawing horizontal grid lines and vertical grid lines in a cross-arranged manner based on the horizontal grid line attributes and the vertical grid line attributes to form visual cells, which are used to simulate virtual cells of the Gantt chart;
[0025] Step S130 , controlling the cell content information to be displayed at a corresponding position of the visual cell according to the cell space information.
[0026] Figure 1 In the method shown, orthogonal crossing lines are used to simulate virtual cells in the Gantt chart, which can reduce the number of objects that the browser needs to create to a certain extent, reduce the complexity of cell drawing, and thus optimize the browser's rendering performance and reduce the risk of crashes. It is well suited for Gantt chart processing scenarios of large-scale task data.
[0027] Below Figure 1 Provide detailed instructions for each step.
[0028] In step S110 , the cell space information and cell content information corresponding to the Gantt chart are determined according to the task information of the Gantt chart to be drawn.
[0029] The task information for the Gantt chart to be drawn may include, but is not limited to, task items, task times, and other information. This information may be uploaded or input by the user, or obtained through the server, and this disclosure does not specifically limit this. It should be noted that before obtaining the task data corresponding to the task to be drawn through the server, the server may pre-collect task data corresponding to various project tasks for use.
[0030] Among them, cell space information is used to represent the cell space layout, which may include but is not limited to cell position, size and other information, such as canvas coordinate system positioning data and cell width, height and other information; cell content information is used to represent the specific task details of the cell binding, such as original business data.
[0031] Optionally, the number of tasks, task time span, and task details can be determined based on the task information of the Gantt chart to be drawn; the cell space information corresponding to each virtual cell of the Gantt chart can be determined based on the number of tasks and the task time span; and the cell content information corresponding to each virtual cell of the Gantt chart can be determined based on the task details.
[0032] In an optional implementation, after determining the cell space information and cell content information corresponding to the Gantt chart, the following steps may be performed: storing the cell space information and cell content information corresponding to the Gantt chart in an array format.
[0033] For example, you can define the VirtualCell interface to describe the logical information of a cell, namely, cell space information and cell content information, including but not limited to position (left, top), size (width, height), and task data (data). You can also implement the CanvasService class and maintain the virtualCells array in the CanvasService to store the logical information of all virtual cells. Among them, (left, top) can represent the canvas coordinate system positioning data; (width, height) can represent the cell width and height data.
[0034] In the present disclosure, a virtual cell data structure is constructed in the form of an array, which only stores necessary cell space information and cell content information rather than a complete canvas object, thereby achieving lightweight storage and reducing memory usage and system resource consumption.
[0035] In step S120, the horizontal grid line attributes and the vertical grid line attributes are determined according to the cell space information, and the horizontal grid lines and the vertical grid lines are drawn in a cross-arrangement according to the horizontal grid line attributes and the vertical grid line attributes to form visual cells. The visual cells are used to simulate the virtual cells of the Gantt chart.
[0036] The horizontal grid line attributes refer to the attribute information of the horizontally arranged lines, which may include but are not limited to the attribute information such as the number of horizontal lines and the position of horizontal lines.
[0037] The vertical grid line attributes refer to the attribute information of the vertically arranged lines, which may include but are not limited to the attribute information such as the number of vertical lines and the position of vertical lines.
[0038] By drawing horizontal and vertical grid lines in a cross-wise arrangement, they can be crisscrossed like a tic-tac-toe chessboard to form visual cells, thereby simulating the virtual cells of a Gantt chart, rather than drawing physical cells one by one. A visual cell is a grid formed visually by the intersection of horizontal and vertical lines, while a virtual cell represents a cell without a physical object. Each visual cell has a corresponding virtual cell.
[0039] The present disclosure forms a visual grid effect by drawing horizontal and vertical lines, and no longer creates a physical object for each grid, which can improve the cell drawing effect to a certain extent.
[0040] Optionally, after determining the horizontal grid line attributes and the vertical grid line attributes, line objects can be created based on the horizontal grid line attributes and the vertical grid line attributes. Based on the line attribute information corresponding to each line object, such as the horizontal and vertical attributes, position attributes, and other information of the line, the horizontal grid lines and the vertical grid lines can be drawn in a cross-arranged manner on the Gantt chart canvas.
[0041] Optionally, the created line object may not be destroyed after use, but may be put back into the line object pool for subsequent reuse.
[0042] For example, when the number of tasks and the date span both reach 400, only 401 horizontal grid lines and 401 vertical grid lines need to be drawn, that is, a total of 802 line objects, which is a reduction of 99.5% compared to the 160,000 grid objects in the related art, reducing the complexity from O (row × column) to O (row + column).
[0043] In an optional embodiment, the above-mentioned drawing of horizontal grid lines and vertical grid lines in a cross arrangement according to the horizontal grid line attributes and the vertical grid line attributes to form visual cells can be achieved by the following steps: according to the visible area of the Gantt chart, obtaining multiple pre-created line objects from the line object pool; wherein the line objects are created according to the horizontal grid line attributes and the vertical grid line attributes; according to the line attribute information corresponding to each line object, drawing horizontal grid lines and vertical grid lines in a cross arrangement in the Gantt chart canvas to form visual cells.
[0044] Specifically, based on the visible area of the Gantt chart, line objects that need to be rendered in the Gantt chart canvas can be obtained from the line object pool; and based on the line attribute information corresponding to each line object, such as the horizontal and vertical attributes, position attributes and other information of the line, horizontal grid lines and vertical grid lines are drawn in a cross-arranged manner in the Gantt chart canvas to form visual cells, thereby simulating the drawing effect of virtual cells.
[0045] For example, when implementing a Gantt chart component based on a canvas, the renderGridLines method can be used to draw horizontal and vertical grid lines on the Gantt chart canvas to form visual cells, thereby simulating the virtual cells of the Gantt chart. Specifically, a CanvasService can be created during component initialization and the renderGridLines method can be called to draw the grid lines. The CanvasService is a business implementation class used to create and initialize a Gantt chart. Optionally, the CanvasService can include a canvas for creating a header and a canvas for the Gantt chart body, used to draw different parts of the Gantt chart. The renderGridLines method can accept dates and tasks as parameters to draw horizontal and vertical grid lines. Specifically, in the renderGridLines method, based on the received parameters, the data structure of all virtual cells can be created and stored in a virtual cell array, but no actual canvas object is created. For example, a line object can be obtained from the line object pool and its position attribute can be set to draw vertical grid lines; a line object can be obtained from the line object pool and its position attribute can be set to draw horizontal grid lines, thereby reducing the number of objects created and improving rendering performance.
[0046] According to the visible area of the Gantt chart, the line objects that need to be rendered in the Gantt chart canvas are obtained from the line object pool, which can realize partial rendering of the Gantt chart and improve rendering efficiency to a certain extent.
[0047] In an optional embodiment, when obtaining multiple line objects from the line object pool, if the line object pool is empty, line objects can be created according to the horizontal grid line attributes and the vertical grid line attributes, and the created line objects are added to the line object pool for use.
[0048] For example, the number of line objects to be created and their horizontal and vertical attributes may be determined according to the number of horizontal lines and the number of vertical lines in the Gantt chart.
[0049] For example, the position attribute of the created line object may be determined according to the horizontal line position and the vertical line position of the Gantt chart.
[0050] The line object pool manages the line objects in the Gantt chart. These line objects can be used to draw the horizontal and vertical lines of the grid, forming a table structure. In actual application, when drawing a Gantt chart grid, there is no need to create a new line object. Instead, you can directly retrieve an existing line object from the line object pool, set its position and style, and use it. After use, these line objects are not destroyed and can be returned to the line object pool for next use. This way, even if the Gantt chart has hundreds or thousands of grid lines, frequent object creation and destruction is avoided, greatly improving rendering performance.
[0051] In step S130 , the cell content information is controlled to be displayed at a corresponding position of the visual cell according to the cell space information.
[0052] Specifically, the cell content mapping can be controlled and displayed in the visual cell according to the cell space information to ensure that the display position of the grid content in the visual cell meets the layout requirements, achieve the accuracy and visualization effect of data presentation, and enable users to view the Gantt chart conveniently and efficiently.
[0053] In an optional embodiment, the following steps may also be performed: obtaining a pre-created text object from a text object pool according to the visible area of the Gantt chart; creating the text object according to the text attribute information of the text element in the Gantt chart; and controlling the display of the text element in the Gantt chart according to the text attribute information corresponding to the text object.
[0054] The text object pool is used to manage text elements in the Gantt chart. For example, the text elements may include any one or more of the following: date, task name, Gantt chart description, etc.
[0055] The text attribute information may include but is not limited to: text display position, text display content, text display style and other attribute information.
[0056] For example, when a Gantt chart needs to display text, it can retrieve a pre-created text object from the text object pool, set its content, position, and style attributes, and use it directly. This text object reuse mechanism is particularly effective for frequently updated content (for example, a date label that needs to be constantly updated as the user scrolls the Gantt chart). It reduces garbage collection pressure caused by frequent object creation and destruction, improves rendering performance and scrolling smoothness, and reduces lag.
[0057] In an optional embodiment, as Figure 2 As shown, you can also perform the following steps to interact with the mouse:
[0058] Step S210, in response to the mouse marker hovering over a cell area of the Gantt chart, determining the visual cell where the mouse marker is hovering based on the position information of the mouse marker;
[0059] Step S220, obtaining a target interactive control object, and determining spatial display information of the target interactive control object based on cell space information of a virtual cell corresponding to a visual cell where the mouse marker is hovering;
[0060] Step S230 : According to the spatial display information of the target interactive control object, the target interactive control object is controlled to be displayed on the webpage in a first state, so that the target interactive control object is suspended on the visual cell where the mouse marker is hovering.
[0061] Among them, the mouse identifier refers to the mouse pointer, which is a visual element used to indicate position and perform operations in a computer graphical user interface.
[0062] The cell area refers to a virtual cell interface display area simulated by horizontal grid lines and vertical grid lines.
[0063] Optionally, when the mouse pointer is positioned over a cell area, the mouse pointer's position information can be collected, and based on the mouse pointer's position information and the cell space information, the virtual cell corresponding to the visual cell where the mouse pointer is positioned can be determined. For example, the findVirtualCellAt method can be implemented to calculate the virtual cell corresponding to the visual cell over which the mouse pointer is hovering.
[0064] After determining the virtual cell corresponding to the visual cell where the mouse identifier is hovering, the target interactive control object can be obtained. According to the cell space information of the virtual cell corresponding to the visual cell where the mouse identifier is hovering, the spatial display information of the target interactive control object, such as the display position and display size, can be determined, so that the target interactive control object is suspended on the virtual cell where the mouse identifier is hovering, thereby achieving the mouse hovering effect.
[0065] The first state may be a preset display state of the interactive control object when the mouse is hovering, such as a highlighted state, which is not specifically limited in the present disclosure.
[0066] The interactive control object may be an object pre-created based on a cell type, and may serve as a medium for user interaction between the virtual cell simulated by the horizontal and vertical grid lines. For example, the interactive control object may retrieve data stored in the memory of the corresponding virtual cell.
[0067] Figure 2 In the steps shown, a single interactive control object is used to implement the mouse hover effect, without creating a cell instance for each virtual cell. This can improve the browser's rendering performance while ensuring the user interaction experience.
[0068] In an optional embodiment, the above-mentioned acquisition of the target interactive control object can be achieved through the following steps: according to the cell type corresponding to the visual cell on which the mouse identifier is hovering, the target interactive control object is obtained from the interactive control object pool, and the target interactive control object is controlled to extract the cell content information of the virtual cell corresponding to the visual cell on which the mouse identifier is hovering; the interactive control object pool includes multiple interactive control objects pre-created based on the cell type.
[0069] The interactive control object pool manages various interactive control objects, including background color blocks, task bars, and other interactive objects. Interactive control objects are frequently used in Gantt charts, especially when drawing task progress bars and background color blocks. By pre-creating a batch of interactive control objects and reusing them, the performance burden of creating a large number of them can be greatly reduced.
[0070] The target interactive control object can be used to achieve a mouse hover effect. For example, the target interactive control object can be configured to be in a highlighted state to mark the position of the visual cell where the mouse is hovering.
[0071] For example, in an actual development process, the absolute positioning attribute absolutePositioned of the target interactive control object may be set to “true” to enable the target interactive control object to float above other content.
[0072] Optionally, when the mouse is hovering, the target interaction control object may extract cell content information of a virtual cell corresponding to the visual cell where the mouse marker is hovering, and temporarily perform visual interaction with the user on behalf of the corresponding virtual cell.
[0073] In an optional embodiment, the following steps may also be performed: if movement of the mouse marker is detected, updated position information of the mouse marker is collected, and the visual cell where the target interactive control object is suspended is updated based on the updated position information of the mouse marker.
[0074] For example, if the mouse marker moves, the mouse marker's position information can be collected based on a configured preset update period rather than a real-time collection period. This can avoid some redundant hovering processing caused by the user's rapid mouse movement and improve rendering performance to a certain extent. The preset update period refers to a pre-set period for controlling the collection of mouse marker position information, and this disclosure does not specifically limit this.
[0075] For example, during the movement of the mouse marker, the position of the target interactive control object can be dynamically updated according to the visual cell where the mouse marker is hovering. The hover effect is achieved by dynamically changing the position of a single object, rather than creating a hover state for each virtual cell separately. The visual performance and logical data of the cell are separated, and there is no need to modify the underlying grid object. This can reduce unnecessary state changes and rendering overhead, significantly reduce memory usage and the number of objects created, and avoid binding event handlers for each cell, reducing memory consumption and event propagation overhead.
[0076] It should be noted that when the mouse pointer moves, the position of the target interactive control object displayed on the page is updated. The position of each visual cell corresponds to a virtual cell that does not render, does not create objects, and does not consume CPU (Central Processing Unit) and GPU (Graphics Processing Unit) resources. It corresponds to the cell content information retained in the memory, which can improve the user interaction experience and mouse movement response speed.
[0077] In an optional embodiment, the following steps can also be performed: in response to a click event generated based on the mouse identifier, if the target interactive control object is suspended in the first state over the visual cell where the mouse identifier is hovering, control the target interactive control object to switch to the second state; pass the cell content information of the virtual cell corresponding to the visual cell where the mouse identifier is hovering to the target interactive control object, so as to control the interaction between the virtual cell corresponding to the visual cell where the mouse identifier is hovering and the user through the target interactive control object.
[0078] The second state may be a pre-set display state of the interactive control object when the mouse is clicked, which may be different from the first state and is not specifically limited in this disclosure. In response to a click event generated based on the mouse identifier, the target interactive control object is controlled to switch to the second state, so as to intuitively prompt the user of the current interaction progress.
[0079] When a mouse click event is triggered, the cell content information of the virtual cell corresponding to the visual cell where the mouse identifier is hovering can be passed to the target interactive control object, so as to control the interaction between the virtual cell corresponding to the visual cell where the mouse identifier is hovering and the user through the target interactive control object. It should be noted that when the target interactive control object stays at the position of a certain visual cell, it can accept the properties of the corresponding virtual cell (position, content, etc.). After the target interactive control object accepts the properties of the corresponding virtual cell (position, content, etc.), it can execute the interactive event on behalf of the corresponding virtual cell and transmit the data content of the corresponding virtual cell to ensure the user interaction experience and page response speed.
[0080] In an optional embodiment, the Gantt chart includes an interactive mode and a read-only mode. In the interactive mode, the user is allowed to interact with the content or functions of the Gantt chart; in the read-only mode, the user can view the relevant content of the Gantt chart but cannot perform any interactive operations. The user can switch between the interactive mode and the read-only mode as needed, and this disclosure does not specifically limit this.
[0081] In an optional embodiment, in response to the Gantt chart being in interactive mode, the control target interactive control object may be displayed on the web page; in response to the Gantt chart being in read-only mode, the control target interactive control object may be hidden on the web page.
[0082] When switching the Gantt chart mode, visual consistency can be ensured by handling the display and hiding of target interaction control objects.
[0083] Optionally, during the Gantt chart drawing process, you can set an event listener for the canvas used to host the elements drawing the Gantt chart by implementing the bindEvents method; you can use the throttle function and debounce function to control the rendering and redrawing frequency of the Gantt chart to achieve delayed rendering, thereby improving the response efficiency of the main thread, reducing UI (User Interface) blocking, avoiding screen flickering and unnecessary page refreshes, and ensuring smoothness under high-frequency operations. Among them, the throttle function pre-sets an execution cycle, executes the action when the time of calling the action is greater than or equal to the execution cycle, and then enters the next new cycle; the debounce function delays the execution of the function after the event is triggered.
[0084] Optionally, during the Gantt drawing process, you can configure canvas rendering optimizations. For example, you can set the parameter renderOnAddRemove:false in the initCanvas method to avoid triggering re-rendering every time a new object is added to the canvas. The initCanvas method is mainly used to initialize the canvas, and the renderOnAddRemove parameter is used to control the rendering behavior when canvas objects are added or removed. When renderOnAddRemove is set to false, the canvas is not rendered immediately when objects are added or removed, which can improve performance, especially when operating on a large number of objects.
[0085] In an optional embodiment, a visible area of the Gantt chart may be determined, and a target rendering object may be determined from a candidate object pool of the Gantt chart based on the visible area of the Gantt chart; and a local area of the Gantt chart may be rendered in the web page based on the target rendering object.
[0086] The visible area of the Gantt chart refers to the area of the Gantt chart that can be displayed on the display screen.
[0087] The target rendering object may be an object selected from a candidate object pool that falls within the visible area of the Gantt chart. Specifically, based on the visible area of the Gantt chart, a candidate object may be extracted from the candidate object pool of the Gantt chart as the target rendering object, and based on the selected target rendering object, a local area of the Gantt chart may be rendered on the webpage to reduce rendering overhead.
[0088] For example, you can set the parameter skipOffscreen:true to skip rendering of objects outside the viewport, improving rendering efficiency. The skipOffscreen parameter is mainly used to control whether the rendering behavior skips off-screen elements or areas. When the skipOffscreen parameter is set to true, the rendering behavior skips off-screen elements or areas.
[0089] Optionally, the candidate object pool includes any one or more of the following: line object pool, text object pool, interactive control object pool, such as Figure 3 The object pool data structure diagram in is shown in the figure. These three object pools manage different types of objects respectively, and each stores objects of a specific type so that they can be retrieved and recycled at any time.
[0090] By preparing all line objects, text objects, interactive control objects, etc. in memory in advance and then rendering the Gantt chart canvas through a one-time call, batch processing of objects can be achieved, thereby reducing the number of browser rendering times.
[0091] In an optional embodiment, the following steps may also be performed: in response to a change in the visible area of the Gantt chart, updating the visible area of the Gantt chart; based on the updated visible area of the Gantt chart, determining a new rendering object from the candidate object pool of the Gantt chart, and determining an object to be released from the target rendering object; updating a local area of the Gantt chart rendered in the web page based on the new rendering object and other objects in the target rendering object except the object to be released; and storing the object to be released back into the candidate object pool.
[0092] Among them, the newly added rendering objects refer to the rendering objects that need to be newly added in the updated visible area compared with the visible area before the update; the objects to be released refer to the objects that no longer need to be rendered in the updated visible area compared with the visible area before the update.
[0093] For example, the current visible area of the Gantt chart may be updated in response to a user's virtual scrolling operation on a browser page, adjusting the size of a browser window, or dragging an area dividing line in the window, so that the visible area of the Gantt chart changes.
[0094] When the visible area of the Gantt chart changes, the rendering objects will also change accordingly. By extracting the candidate objects that need to be used from the candidate object pool as rendering objects for rendering, and recycling the unused objects (i.e., objects to be released) into the corresponding candidate object pool, the memory allocation and garbage collection pressure caused by frequent creation and destruction of objects can be reduced to a certain extent, significantly reducing memory usage and system resource consumption.
[0095] For example, object management capabilities can be provided by defining a general ObjectPool class; the corresponding candidate object can be obtained from the corresponding candidate object pool by implementing the get() method, and if the candidate object pool is empty, a new object can be created for use; the object can be recycled to the pool for subsequent reuse by implementing the release(obj) method; three dedicated candidate object pools can be initialized through the CanvasService constructor: line object pool, text object pool, and interactive control object pool, to manage lines, text, and interactive control objects respectively; the object recycling logic can be implemented through the clear method, and the used candidate objects are put back into the corresponding candidate object pool instead of being destroyed.
[0096] Optionally, you can also centrally manage mouse styles by implementing the getCursorStyle and updateCursorStyle methods. You can centrally handle interaction state changes, including but not limited to changes in canvas, mouse style, and other interaction states, through the updateCellsEventState method to simplify the complexity of switching between interactive mode and read-only mode, thereby improving code maintainability.
[0097] For example, the interactive state of the canvas can be changed by: changing the cell size to make the task bar wider or narrower; adjusting the grid line color from the default light gray to a darker color to make the grid more visible; and setting the background color and border color of the target interactive control object so that when the user hovers the mouse over a visual cell, the target interactive control object is highlighted in that color. It should be noted that the interactive state changes of the canvas provided here are merely illustrative examples and are not specifically limited in this disclosure.
[0098] For example, when the Gantt chart is in interactive mode, the mouse pointer may be a hand-shaped pointer when passing over a cell area, prompting the user to click. When the Gantt chart is set to read-only mode, the mouse pointer may be a normal arrow shape to prompt the user that interactive operations are not currently supported. When the mouse pointer is over a cell corresponding to a specific task, a cross arrow may be used to prompt the user to drag and adjust the corresponding task. It should be noted that the mouse-style interactive state changes provided here are merely illustrative examples and are not specifically limited in this disclosure.
[0099] Through flexible adjustment of canvas configuration and mouse style, the Gantt chart can provide users with an intuitive and friendly operation experience while maintaining high performance, making complex project schedule management clearer and easier to use.
[0100] Optionally, during the interactive adjustment process of the Gantt chart, you can wait until a certain type of adjustment is completed before redrawing it all at once to avoid frequent calculation and rendering during the adjustment process. This ensures visual feedback while avoiding lag caused by excessive rendering.
[0101] For example, Figure 4 As shown, an interactive Gantt chart drawing method is provided, which may include the following steps:
[0102] Step S401, determining the cell space information and cell content information corresponding to the Gantt chart according to the task information of the Gantt chart to be drawn;
[0103] Step S402: Determine horizontal gridline attributes and vertical gridline attributes based on the cell space information, and draw horizontal gridlines and vertical gridlines in a cross-arranged manner based on the horizontal gridline attributes and vertical gridline attributes to form visual cells. The visual cells are used to simulate virtual cells of the Gantt chart.
[0104] Step S403, controlling the cell content information to be displayed at the corresponding position of the visual cell according to the cell space information;
[0105] Step S404, in response to the mouse marker hovering over the cell area of the Gantt chart, determining the visual cell where the mouse marker is hovering according to the position information of the mouse marker;
[0106] Step S405: acquiring a target interactive control object, and determining spatial display information of the target interactive control object based on cell space information of a virtual cell corresponding to a visual cell where the mouse marker is hovering;
[0107] Step S406: When the Gantt chart is in the interactive mode, the target interactive control object is controlled to be displayed in a first state on the webpage according to the spatial display information of the target interactive control object, so that the target interactive control object is suspended over the visual cell where the mouse marker is hovering;
[0108] Step S407 , in response to a click event generated based on the mouse marker, if the target interactive control object is suspended in the first state over the visual cell where the mouse marker is hovering, controlling the target interactive control object to switch to the second state;
[0109] Step S408: delivering the cell content information of the virtual cell corresponding to the visual cell where the mouse marker is hovering to the target interaction control object, so as to control the interaction between the virtual cell corresponding to the visual cell where the mouse marker is hovering and the user through the target interaction control object.
[0110] Figure 4 The steps shown can be implemented based on the front-end Vuejs framework. Through line virtual grid technology, grid drawing and content rendering are separated, visual performance and interactive experience are balanced, and the complexity of cell drawing is reduced to O (rows + columns). This can greatly reduce the object creation and management overhead, reduce rendering time, and greatly improve the rendering performance of large-scale Gantt charts; it can reduce the burden on the browser rendering engine, realize the usability of Gantt charts in big data scenarios, and reduce the risk of browser crashes under large data volumes; it can support high-frequency mouse events without lag; maintain a stable frame rate in large-scale Gantt chart dragging, scaling, and dynamic update scenarios, and obtain a smooth experience even on low-performance devices; it has strong system stability and browser compatibility.
[0111] The exemplary embodiment of the present disclosure further provides a Gantt chart processing device, referring to Figure 5 As shown, the Gantt chart processing device 500 may include the following program modules:
[0112] An information determination module 510 is used to determine the cell space information and cell content information corresponding to the Gantt chart according to the task information of the Gantt chart to be drawn;
[0113] A grid line drawing module 520 is configured to determine horizontal and vertical grid line attributes based on cell space information, and to draw horizontal and vertical grid lines in a cross-arranged manner based on the horizontal and vertical grid line attributes to form visual cells. The visual cells are used to simulate virtual cells of a Gantt chart.
[0114] The display control module 530 is used to control the cell content information to be displayed at the corresponding position of the visual cell according to the cell space information.
[0115] In an optional embodiment, based on the above solution, after determining the cell space information and cell content information corresponding to the Gantt chart, the Gantt chart processing device 500 further includes: an information storage module for storing the cell space information and cell content information corresponding to the Gantt chart in an array form.
[0116] In an optional embodiment, based on the aforementioned solution, the grid line drawing module 520 can be configured as follows: according to the visible area of the Gantt chart, obtain multiple pre-created line objects from the line object pool; wherein the line objects are created according to the horizontal grid line attributes and the vertical grid line attributes; according to the line attribute information corresponding to each line object, draw the horizontal grid lines and the vertical grid lines in the Gantt chart canvas in a cross-arranged manner to form visual cells.
[0117] In an optional embodiment, based on the above-mentioned solution, the Gantt chart processing device 500 further includes: a line object pool construction module, which is used to create a line object according to the horizontal grid line attributes and the vertical grid line attributes if the line object pool is empty, and add the created line object to the line object pool.
[0118] In an optional embodiment, based on the aforementioned solution, the Gantt chart processing device 500 further includes: a text object acquisition module, configured to acquire a pre-created text object from a text object pool according to a visible area of the Gantt chart; the text object is created according to text attribute information of a text element in the Gantt chart; and a text element display module, configured to control the display of the text element in the Gantt chart according to the text attribute information corresponding to the text object.
[0119] In an optional implementation, based on the above solution, the text element includes any one or more of the following: date, task name, Gantt chart description.
[0120] In an optional embodiment, based on the above solution, the Gantt chart processing device 500 further includes a mouse hovering interaction control module. The mouse hovering interaction control module can be configured to: in response to a mouse marker hovering over a cell area of the Gantt chart, determine the visual cell where the mouse marker is hovering based on the position information of the mouse marker; obtain a target interactive control object, and determine spatial display information of the target interactive control object based on the cell space information of the virtual cell corresponding to the visual cell where the mouse marker is hovering; and control the target interactive control object to be displayed on the webpage in a first state based on the spatial display information of the target interactive control object, so that the target interactive control object is suspended over the visual cell where the mouse marker is hovering.
[0121] In an optional embodiment, based on the aforementioned scheme, the mouse hover interaction control module also includes: an interaction control object acquisition module, used to obtain the target interaction control object, which can be configured as: according to the cell type corresponding to the visual cell where the mouse identifier is hovering, obtaining the target interaction control object from the interaction control object pool, and controlling the target interaction control object to extract the cell content information of the virtual cell corresponding to the visual cell where the mouse identifier is hovering; the interaction control object pool includes multiple interaction control objects pre-created based on the cell type.
[0122] In an optional embodiment, based on the aforementioned solution, the Gantt chart processing device 500 further includes: a mouse hover update module, which is used to collect updated position information of the mouse identifier if movement of the mouse identifier is detected, and update the visual cell where the target interactive control object is suspended according to the updated position information of the mouse identifier.
[0123] In an optional embodiment, based on the aforementioned scheme, the Gantt chart processing device 500 also includes: a mouse click trigger event: used to respond to a click event generated based on a mouse identifier, if the target interactive control object is suspended in a first state on the visual cell where the mouse identifier is hovering, control the target interactive control object to switch to a second state; a data transmission module, used to transmit the cell content information of the virtual cell corresponding to the visual cell where the mouse identifier is hovering to the target interactive control object, so as to control the interaction between the virtual cell corresponding to the visual cell where the mouse identifier is hovering and the user through the target interactive control object.
[0124] In an optional embodiment, based on the aforementioned solution, the Gantt chart includes an interactive mode and a read-only mode, and the Gantt chart processing device 500 further includes: an interactive control object display control module, which can be configured to: in response to the Gantt chart being in the interactive mode, control the target interactive control object to be displayed on the web page; in response to the Gantt chart being in the read-only mode, control the target interactive control object to be hidden on the web page.
[0125] In an optional embodiment, based on the above solution, the Gantt chart processing device 500 further includes a local rendering module. The local rendering module can be configured to: determine a visible area of the Gantt chart, and based on the visible area of the Gantt chart, determine a target rendering object from a pool of candidate objects of the Gantt chart; and render the local area of the Gantt chart on the webpage based on the target rendering object.
[0126] In an optional implementation, based on the above solution, the candidate object pool includes any one or more of the following: a line object pool, a text object pool, and an interactive control object pool.
[0127] In an optional embodiment, based on the above solution, the Gantt chart processing device 500 further includes a rendering update module. The rendering update module may be configured to: update the visible area of the Gantt chart in response to a change in the visible area of the Gantt chart; determine, based on the updated visible area of the Gantt chart, a new rendering object from a candidate object pool of the Gantt chart and an object to be released from a target rendering object; update a local area of the Gantt chart rendered on the webpage based on the new rendering object and other objects in the target rendering object except the object to be released; and restore the object to be released to the candidate object pool.
[0128] The specific details of each part of the above-mentioned device have been described in detail in the implementation method part. The undisclosed details can be found in the implementation method part, so they will not be repeated here.
[0129] The exemplary embodiments of the present disclosure further provide a computer program product, which includes a computer program, and when the computer program is executed by a processor, implements the Gantt chart processing method.
[0130] In one embodiment, a computer program product may be a tangible product containing a computer program, such as a computer-readable storage medium storing the computer program. The computer-readable storage medium may be a storage medium based on electrical, magnetic, optical, electromagnetic, infrared, or other signals, including but not limited to random access memory (RAM), read-only memory (ROM), magnetic tape, floppy disk, flash memory (Flash), mechanical hard disk drive (HDD), solid-state drive (SSD), and the like. Exemplarily, the computer program product may be implemented as a non-volatile storage medium storing the computer program, such as a read-only memory, NAND flash memory, and the like.
[0131] In one embodiment, the computer program product may be an intangible product containing a computer program. For example, the computer program product may be implemented as a virtual digital product, such as a digital file such as an executable file or installation package storing the computer program.
[0132] The code of the computer program can be written in one or more programming languages. Programming languages include C, Java, C++, etc. The program code can be executed entirely on the user computing device, partially on the user computing device, or as a separate software package, partially on the user computing device and partially on a remote computing device, or entirely on a remote computing device or server. In the case of a remote computing device, the remote computing device can be connected to the user computing device via any type of network, such as a local area network (LAN), a wide area network (WAN), etc., or can be connected to an external computing device (e.g., via an Internet connection provided by a carrier).
[0133] Computer programs can be carried or transmitted via electrical, magnetic, optical, electromagnetic, infrared, or other signals. Electronic devices can convert signals carrying computer programs into digital signals, thereby running the computer programs. When a computer program is run on an electronic device, its code is used to cause the electronic device to execute (more specifically, to cause the processor of the electronic device to execute) the method steps of various exemplary embodiments of the present disclosure. For example, the following steps may be included:
[0134] According to the task information of the Gantt chart to be drawn, determine the cell space information and cell content information corresponding to the Gantt chart;
[0135] Determine horizontal grid line attributes and vertical grid line attributes according to cell space information, and draw horizontal grid lines and vertical grid lines in a cross-arranged manner according to the horizontal grid line attributes and the vertical grid line attributes to form visual cells, wherein the visual cells are used to simulate virtual cells of a Gantt chart;
[0136] According to the cell space information, the cell content information is controlled to be displayed at the corresponding position of the visual cell.
[0137] In an optional implementation, based on the above solution, after determining the cell space information and cell content information corresponding to the Gantt chart, the following steps may be performed: storing the cell space information and cell content information corresponding to the Gantt chart in an array format.
[0138] In an optional embodiment, based on the aforementioned scheme, the above-mentioned drawing of horizontal grid lines and vertical grid lines in a cross-arrangement according to the horizontal grid line attributes and the vertical grid line attributes to form visual cells can be achieved by the following steps: according to the visible area of the Gantt chart, obtaining multiple pre-created line objects from the line object pool; wherein the line objects are created according to the horizontal grid line attributes and the vertical grid line attributes; according to the line attribute information corresponding to each line object, drawing horizontal grid lines and vertical grid lines in a cross-arrangement in the Gantt chart canvas to form visual cells.
[0139] In an optional implementation, based on the above solution, the following steps may be performed: if the line object pool is empty, create a line object according to the horizontal grid line attributes and the vertical grid line attributes, and add the created line object to the line object pool.
[0140] In an optional embodiment, based on the aforementioned solution, the following steps may also be performed: obtaining a pre-created text object from a text object pool according to the visible area of the Gantt chart; creating the text object according to the text attribute information of the text element in the Gantt chart; and controlling the display of the text element in the Gantt chart according to the text attribute information corresponding to the text object.
[0141] In an optional implementation, based on the above solution, the text element includes any one or more of the following: date, task name, Gantt chart description.
[0142] In an optional embodiment, based on the aforementioned scheme, the following steps may also be performed: in response to the mouse identifier hovering over a cell area of the Gantt chart, determining the visual cell where the mouse identifier is hovering based on the position information of the mouse identifier; obtaining the target interactive control object, and determining the spatial display information of the target interactive control object based on the cell space information of the virtual cell corresponding to the visual cell where the mouse identifier is hovering; and controlling the target interactive control object to be displayed on the web page in a first state based on the spatial display information of the target interactive control object, so that the target interactive control object floats over the visual cell where the mouse identifier is hovering.
[0143] In an optional embodiment, based on the aforementioned scheme, the above-mentioned acquisition of the target interactive control object can be achieved through the following steps: according to the cell type corresponding to the visual cell on which the mouse identifier is hovering, the target interactive control object is obtained from the interactive control object pool, and the target interactive control object is controlled to extract the cell content information of the virtual cell corresponding to the visual cell on which the mouse identifier is hovering; the interactive control object pool includes multiple interactive control objects pre-created based on the cell type.
[0144] In an optional embodiment, based on the above-mentioned scheme, the following steps can also be performed: if the position of the mouse marker is detected to have moved, the updated position information of the mouse marker is collected, and the visual cell where the target interactive control object is suspended is updated according to the updated position information of the mouse marker.
[0145] In an optional embodiment, based on the aforementioned scheme, the following steps may also be performed: in response to a click event generated based on a mouse identifier, if the target interactive control object is suspended in a first state over the visual cell where the mouse identifier is hovering, the target interactive control object is controlled to switch to a second state; the cell content information of the virtual cell corresponding to the visual cell where the mouse identifier is hovering is passed to the target interactive control object, so as to control the interaction between the virtual cell corresponding to the visual cell where the mouse identifier is hovering and the user through the target interactive control object.
[0146] In an optional embodiment, based on the aforementioned scheme, the Gantt chart includes an interactive mode and a read-only mode, and the following steps can also be performed: in response to the Gantt chart being in the interactive mode, the target interactive control object is controlled to be displayed on the web page; in response to the Gantt chart being in the read-only mode, the target interactive control object is controlled to be hidden on the web page.
[0147] In an optional embodiment, based on the aforementioned solution, the following steps may also be performed: determining a visible area of the Gantt chart, and determining a target rendering object from a candidate object pool of the Gantt chart based on the visible area of the Gantt chart; and rendering a local area of the Gantt chart in the web page based on the target rendering object.
[0148] In an optional implementation, based on the above solution, the candidate object pool includes any one or more of the following: a line object pool, a text object pool, and an interactive control object pool.
[0149] In an optional embodiment, based on the aforementioned scheme, the following steps may also be performed: in response to a change in the visible area of the Gantt chart, updating the visible area of the Gantt chart; based on the updated visible area of the Gantt chart, determining a new rendering object from the candidate object pool of the Gantt chart, and determining an object to be released from the target rendering object; updating a local area of the Gantt chart rendered in the web page based on the new rendering object and other objects in the target rendering object except the object to be released; and storing the object to be released back into the candidate object pool.
[0150] In the above steps, using orthogonal crossing lines to simulate virtual cells in the Gantt chart can reduce the number of objects that the browser needs to create to a certain extent, reduce the complexity of cell drawing, and thus optimize the browser's rendering performance and reduce the risk of crashes. It is well suited for Gantt chart processing scenarios of large-scale task data.
[0151] The exemplary embodiments of the present disclosure also provide an electronic device capable of implementing the aforementioned Gantt chart processing method. The electronic device may include a processor and a memory. The memory stores executable instructions for the processor, such as program code. The processor executes the executable instructions to perform the method of this exemplary embodiment. Furthermore, the electronic device may include a display for displaying a graphical user interface.
[0152] Reference below Figure 6 , the electronic device is exemplarily described in the form of a general-purpose computing device. It should be understood that Figure 6 The electronic device 600 shown is merely an example and should not limit the functions and scope of use of the embodiments of the present disclosure.
[0153] like Figure 6 As shown, the electronic device 600 may include a processor 610 , a memory 620 , a bus 630 , an I / O (input / output) interface 640 , a network adapter 650 , and a display 660 .
[0154] The memory 620 may include volatile memory, such as RAM 621 and cache unit 622, and may also include non-volatile memory, such as ROM 623. The memory 620 may also include one or more program modules 624. Such program modules 624 include, but are not limited to, an operating system, one or more application programs, other program modules, and program data. Each or some combination of these examples may include an implementation of a network environment. For example, the program modules 624 may include the modules in the aforementioned devices.
[0155] The processor 610 may include one or more processing units, for example: the processor 610 may include an AP (Application Processor), a modem processor, a GPU (Graphics Processing Unit), an ISP (Image Signal Processor), a controller, an encoder, a decoder, a DSP (Digital Signal Processor), a baseband processor and / or an NPU (Neural-Network Processing Unit), etc.
[0156] The processor 610 may be configured to execute executable instructions stored in the memory 620 , such as executing any one or more method steps in this exemplary embodiment.
[0157] Exemplarily, the processor 610 may perform the following steps:
[0158] According to the task information of the Gantt chart to be drawn, determine the cell space information and cell content information corresponding to the Gantt chart;
[0159] Determine horizontal grid line attributes and vertical grid line attributes according to cell space information, and draw horizontal grid lines and vertical grid lines in a cross-arranged manner according to the horizontal grid line attributes and the vertical grid line attributes to form visual cells, wherein the visual cells are used to simulate virtual cells of a Gantt chart;
[0160] According to the cell space information, the cell content information is controlled to be displayed at the corresponding position of the visual cell.
[0161] In an optional implementation, based on the above solution, after determining the cell space information and cell content information corresponding to the Gantt chart, the following steps may be performed: storing the cell space information and cell content information corresponding to the Gantt chart in an array format.
[0162] In an optional embodiment, based on the aforementioned scheme, the above-mentioned drawing of horizontal grid lines and vertical grid lines in a cross-arrangement according to the horizontal grid line attributes and the vertical grid line attributes to form visual cells can be achieved by the following steps: according to the visible area of the Gantt chart, obtaining multiple pre-created line objects from the line object pool; wherein the line objects are created according to the horizontal grid line attributes and the vertical grid line attributes; according to the line attribute information corresponding to each line object, drawing horizontal grid lines and vertical grid lines in a cross-arrangement in the Gantt chart canvas to form visual cells.
[0163] In an optional implementation, based on the above solution, the following steps may be performed: if the line object pool is empty, create a line object according to the horizontal grid line attributes and the vertical grid line attributes, and add the created line object to the line object pool.
[0164] In an optional embodiment, based on the aforementioned solution, the following steps may also be performed: obtaining a pre-created text object from a text object pool according to the visible area of the Gantt chart; creating the text object according to the text attribute information of the text element in the Gantt chart; and controlling the display of the text element in the Gantt chart according to the text attribute information corresponding to the text object.
[0165] In an optional implementation, based on the above solution, the text element includes any one or more of the following: date, task name, Gantt chart description.
[0166] In an optional embodiment, based on the aforementioned scheme, the following steps may also be performed: in response to the mouse identifier hovering over a cell area of the Gantt chart, determining the visual cell where the mouse identifier is hovering based on the position information of the mouse identifier; obtaining the target interactive control object, and determining the spatial display information of the target interactive control object based on the cell space information of the virtual cell corresponding to the visual cell where the mouse identifier is hovering; and controlling the target interactive control object to be displayed on the web page in a first state based on the spatial display information of the target interactive control object, so that the target interactive control object floats over the visual cell where the mouse identifier is hovering.
[0167] In an optional embodiment, based on the aforementioned scheme, the above-mentioned acquisition of the target interactive control object can be achieved through the following steps: according to the cell type corresponding to the visual cell on which the mouse identifier is hovering, the target interactive control object is obtained from the interactive control object pool, and the target interactive control object is controlled to extract the cell content information of the virtual cell corresponding to the visual cell on which the mouse identifier is hovering; the interactive control object pool includes multiple interactive control objects pre-created based on the cell type.
[0168] In an optional embodiment, based on the above-mentioned scheme, the following steps can also be performed: if the position of the mouse marker is detected to have moved, the updated position information of the mouse marker is collected, and the visual cell where the target interactive control object is suspended is updated according to the updated position information of the mouse marker.
[0169] In an optional embodiment, based on the aforementioned scheme, the following steps may also be performed: in response to a click event generated based on a mouse identifier, if the target interactive control object is suspended in a first state over the visual cell where the mouse identifier is hovering, the target interactive control object is controlled to switch to a second state; the cell content information of the virtual cell corresponding to the visual cell where the mouse identifier is hovering is passed to the target interactive control object, so as to control the interaction between the virtual cell corresponding to the visual cell where the mouse identifier is hovering and the user through the target interactive control object.
[0170] In an optional embodiment, based on the aforementioned scheme, the Gantt chart includes an interactive mode and a read-only mode, and the following steps can also be performed: in response to the Gantt chart being in the interactive mode, the target interactive control object is controlled to be displayed on the web page; in response to the Gantt chart being in the read-only mode, the target interactive control object is controlled to be hidden on the web page.
[0171] In an optional embodiment, based on the aforementioned solution, the following steps may also be performed: determining a visible area of the Gantt chart, and determining a target rendering object from a candidate object pool of the Gantt chart based on the visible area of the Gantt chart; and rendering a local area of the Gantt chart in the web page based on the target rendering object.
[0172] In an optional implementation, based on the above solution, the candidate object pool includes any one or more of the following: a line object pool, a text object pool, and an interactive control object pool.
[0173] In an optional embodiment, based on the aforementioned scheme, the following steps may also be performed: in response to a change in the visible area of the Gantt chart, updating the visible area of the Gantt chart; based on the updated visible area of the Gantt chart, determining a new rendering object from the candidate object pool of the Gantt chart, and determining an object to be released from the target rendering object; updating a local area of the Gantt chart rendered in the web page based on the new rendering object and other objects in the target rendering object except the object to be released; and storing the object to be released back into the candidate object pool.
[0174] In the above steps, using orthogonal crossing lines to simulate virtual cells in the Gantt chart can reduce the number of objects that the browser needs to create to a certain extent, reduce the complexity of cell drawing, and thus optimize the browser's rendering performance and reduce the risk of crashes. It is well suited for Gantt chart processing scenarios of large-scale task data.
[0175] The bus 630 is used to realize the connection between different components of the electronic device 600 and may include a data bus, an address bus, and a control bus.
[0176] The electronic device 600 can communicate with one or more external devices 700 (eg, a keyboard, a mouse, an external controller, etc.) through the I / O interface 640 .
[0177] The electronic device 600 can communicate with one or more networks via the network adapter 650. For example, the network adapter 650 can provide mobile communication solutions such as 3G / 4G / 5G, or wireless communication solutions such as wireless LAN, Bluetooth, and near-field communication. The network adapter 650 can communicate with other modules of the electronic device 600 via the bus 630.
[0178] The electronic device 600 may display a graphical user interface, etc., through the display 660 .
[0179] although Figure 6 Not shown, other hardware and / or software modules may also be provided in the electronic device 600, including but not limited to: a display, a microcode, a device driver, a redundant processor, an external disk drive array, a RAID (Redundant Arrays of Independent Disks) system, a tape drive, and a data backup storage system.
[0180] It should be noted that although several modules or units of the device for action execution are mentioned in the above detailed description, this division is not mandatory. In fact, according to the exemplary embodiments of the present disclosure, the features and functions of two or more modules or units described above can be concretized in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided into multiple modules or units to be concretized.
[0181] It will be appreciated by those skilled in the art that various aspects of the present disclosure may be implemented as a system, method or program product. Therefore, various aspects of the present disclosure may be specifically implemented as the following forms, namely: a complete hardware implementation, a complete software implementation (including firmware, microcode, etc.), or an implementation combining hardware and software, which may be collectively referred to herein as a "circuit", "module" or "system". Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. This application is intended to cover any variations, uses or adaptations of the present disclosure, which follow the general principles of the present disclosure and include common knowledge or customary technical means in the art that are not disclosed in the present disclosure. The specification and implementation are intended to be exemplary only, and the true scope and spirit of the present disclosure are indicated by the claims.
[0182] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.
Claims
1. A Gantt chart processing method, characterized in that: The method comprises: Determine cell space information and cell content information corresponding to the Gantt chart according to task information of the Gantt chart to be drawn; Determining horizontal grid line attributes and vertical grid line attributes according to the cell space information, and drawing horizontal grid lines and vertical grid lines in a cross-arranged manner according to the horizontal grid line attributes and the vertical grid line attributes to form visual cells, wherein the visual cells are used to simulate virtual cells of the Gantt chart; According to the cell space information, the cell content information is controlled to be displayed at a corresponding position of the visual cell.
2. The method according to claim 1, characterized in that After determining the cell space information and cell content information corresponding to the Gantt chart, the method further includes: The cell space information and cell content information corresponding to the Gantt chart are stored in array form.
3. The method according to claim 1, characterized in that Drawing horizontal grid lines and vertical grid lines in a cross-arranged manner according to the horizontal grid line attributes and the vertical grid line attributes to form visual cells includes: According to the visible area of the Gantt chart, a plurality of pre-created line objects are acquired from a line object pool; wherein the line objects are created according to the horizontal grid line attributes and the vertical grid line attributes; According to the line attribute information corresponding to each of the line objects, horizontal grid lines and vertical grid lines are drawn in a cross-arranged manner on the Gantt chart canvas to form visual cells.
4. The method according to claim 3, characterized in that The method further comprises: If the line object pool is empty, a line object is created according to the horizontal grid line attributes and the vertical grid line attributes, and the created line object is added to the line object pool.
5. The method according to claim 1, wherein The method further comprises: According to the visible area of the Gantt chart, a pre-created text object is obtained from a text object pool; the text object is created according to text attribute information of the text element in the Gantt chart; Controlling display of text elements in the Gantt chart according to text attribute information corresponding to the text object.
6. The method according to claim 5, characterized in that The text elements include any one or more of the following: Date, task name, Gantt chart description.
7. The method according to claim 1, characterized in that The method further comprises: In response to a mouse marker hovering over a cell area of the Gantt chart, determining a visual cell on which the mouse marker is hovering according to position information of the mouse marker; Acquire a target interactive control object, and determine spatial display information of the target interactive control object based on cell space information of a virtual cell corresponding to a visual cell on which the mouse marker is hovering; According to the spatial display information of the target interactive control object, the target interactive control object is controlled to be displayed in a first state on the webpage, so that the target interactive control object is suspended on the visual cell where the mouse marker is hovering.
8. The method according to claim 7, characterized in that The acquiring the target interactive control object includes: According to the cell type corresponding to the visual cell on which the mouse identifier is hovering, a target interactive control object is obtained from the interactive control object pool, and the target interactive control object is controlled to extract the cell content information of the virtual cell corresponding to the visual cell on which the mouse identifier is hovering; the interactive control object pool includes multiple interactive control objects pre-created based on the cell type.
9. The method according to claim 7, characterized in that The method comprises: If it is detected that the position of the mouse marker has moved, the updated position information of the mouse marker is collected, and the visual cell where the target interactive control object is suspended is updated according to the updated position information of the mouse marker.
10. The method according to claim 7, characterized in that The method further comprises: In response to a click event generated based on the mouse marker, if the target interactive control object is suspended in a first state over the visual cell where the mouse marker is hovering, controlling the target interactive control object to switch to a second state; The cell content information of the virtual cell corresponding to the visual cell where the mouse marker is hovering is passed to the target interaction control object, so that the target interaction control object controls the interaction between the virtual cell corresponding to the visual cell where the mouse marker is hovering and the user.
11. The method according to any one of claims 7 to 10, characterized in that The Gantt chart includes an interactive mode and a read-only mode, and the method further includes: In response to the Gantt chart being in an interactive mode, controlling the target interactive control object to be displayed on the webpage; In response to the Gantt chart being in read-only mode, the target interactive control object is controlled to be hidden in the webpage.
12. The method according to claim 1, characterized in that The method comprises: Determining a visible area of a Gantt chart, and determining a target rendering object from a candidate object pool of the Gantt chart according to the visible area of the Gantt chart; Based on the target rendering object, a local area of the Gantt chart is rendered in the webpage.
13. The method according to claim 12, characterized in that The candidate object pool includes any one or more of the following: a line object pool, a text object pool, and an interactive control object pool.
14. The method according to claim 12, characterized in that The method further comprises: In response to a change in the visible area of the Gantt chart, updating the visible area of the Gantt chart; Based on the updated visible area of the Gantt chart, determining a new rendering object from the candidate object pool of the Gantt chart, and determining an object to be released from the target rendering object; updating a local area of the Gantt chart rendered in the webpage according to the newly added rendering object and other objects in the target rendering object except the object to be released; The object to be released is stored again in the candidate object pool.
15. A Gantt chart processing device, characterized in that: The device comprises: An information determination module, configured to determine cell space information and cell content information corresponding to the Gantt chart according to task information of the Gantt chart to be drawn; a grid line drawing module, configured to determine horizontal grid line attributes and vertical grid line attributes based on the cell space information, and draw horizontal grid lines and vertical grid lines in a cross-arranged manner based on the horizontal grid line attributes and the vertical grid line attributes to form visual cells, wherein the visual cells are used to simulate virtual cells of the Gantt chart; A display control module is used to control the cell content information to be displayed at a corresponding position of the visual cell according to the cell space information.
16. A computer program product comprising a computer program, characterized in that When the computer program is executed by a processor, the method according to any one of claims 1 to 14 is implemented.
17. An electronic device, characterized in that: include: processor; as well as a memory for storing executable instructions of the processor; The processor is configured to perform the method according to any one of claims 1 to 14 by executing the executable instructions.