如何使用 Excel 绘制甘特图？

Question

想问问各位大佬们，有什么好用的前端方法可以实现Excel中甘特图的方法

Answer 1

您可以下看这里：https://gcdn.grapecity.com.cn/showtopic-180313-1-1.html

甘特图对于业务场景中的工程项目管理、预算执行、生产计划等都能将原有的表格数据，转变为直观的甘特图模式。作为纯前端表格控件SpreadJS 的插件，甘特图可以作为一个特殊的“Sheet”融入已有的表格中，方便进行数据的可视化展示，也能更直观的查看计划执行情况，如下图所示：

编辑切换为居中

添加图片注释，不超过 140 字（可选）

SpreadJS甘特图插件具备以下的功能： 1. 基于 SpreadJS 的底层数据模型，能够将树形数据展示为甘特图表格和图表，支持 ID、Level、Children类型数据结构

// 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. 支持对图表区域进行缩放

编辑切换为居中

添加图片注释，不超过 140 字（可选）

3. 支持按照不同单位进行滚动

编辑切换为居中

添加图片注释，不超过 140 字（可选）

4. 可对图表中的对象进行定制

编辑切换为居中

添加图片注释，不超过 140 字（可选）

5. 可对日历进行配置

编辑切换为居中

添加图片注释，不超过 140 字（可选）

6. 支持保存为 SSJSON / SJS / Excel / PDF，并支持打印功能

编辑切换为居中

添加图片注释，不超过 140 字（可选）

预览版产品包有以下的内容：

• 甘特图功能说明文档
• 7个插件示例：初始化甘特图、缩放及滚动、定制样式、布局设置、任务设置、日历设置、导入导出