Abstract: This article was originally published on CSDN by the technical team of Grape City. Please indicate the source of the reprint: Grape City official website , Grape City provides developers with professional development tools, solutions and services to empower developers.
The Gantt chart can transform the original tabular data into an intuitive Gantt chart mode for engineering project management, budget execution, production planning, etc. in business scenarios . As a plug-in of the pure front-end table control SpreadJS, the Gantt chart can be integrated into the existing table as a special "Sheet", which is convenient for visual display of data, and can also view the execution of the plan more intuitively, as shown in the following figure:
The SpreadJS Gantt chart plugin has the following functions:
1. Based on the underlying data model of SpreadJS, it can display tree data as Gantt chart tables and charts, and supports ID, Level, Children type data structures
// the id-parentId structure
schema: {
hierarchy: {
type: "Parent",
column: "parentId"
},
columns: {
id: {
isPrimaryKey: true }, // the primary key is required in Id-ParentId type, so that we could build the hierarchy tree nodes
taskNumber: {
dataType: "rowOrder" } // the row order is required in Id-ParentId type, to make sure the you could update the correct data
}
}
// the level structure
schema: {
hierarchy: {
type: "Level",
column: "level"
}
}
// the children tree structure
schema: {
hierarchy: {
type: "ChildrenPath",
column: "children"
}
}
2. Support zooming the chart area
3. Support scrolling in different units
4. Objects in the chart can be customized
5. Configurable calendar
6. Support saving as SSJSON / SJS / Excel / PDF, and support printing function
If you want to participate in the trial version of the Gantt chart, you can visit the following address to obtain it: https://gcdn.grapecity.com.cn/showtopic-180313-1-1.html
The preview product package has the following contents:
- Gantt chart function description document
- 7 plug-in examples: initialize Gantt chart, zoom and scroll, custom style, layout setting, task setting, calendar setting, import and export
Extension link:
Implementing Excel server-side import and export under the Spring Boot framework
Project Combat: Online Quotation Procurement System (React +SpreadJS+Echarts)
Svelte framework combined with SpreadJS to realize pure front-end Excel online report design