前端常用甘特图

以下是一些常用、好用的 甘特图（Gantt Chart）插件/库，适用于不同前端框架或纯 JS 应用：

✅ 1. Frappe Gantt（轻量、纯 JS）

💡 特点：轻量，易用，SVG 渲染
📦 大小：很小（无依赖）
🧩 适合：React、Vue、原生 JS
📄 License：MIT

npm install frappe-gantt

1 2	npm install frappe-gantt

示例：

import Gantt from 'frappe-gantt';

const tasks = [
  {
    id: 'Task 1',
    name: '设计',
    start: '2025-07-01',
    end: '2025-07-10',
    progress: 30,
  },
];

const gantt = new Gantt('#gantt', tasks);

import Gantt from 'frappe-gantt';

const tasks = [

{

id: 'Task 1',

name: '设计',

start: '2025-07-01',

end: '2025-07-10',

progress: 30,

];

const gantt = new Gantt('#gantt', tasks);

✅ 2. AnyChart Gantt（商业级）

💡 特点：功能非常全，支持依赖、分组、导出等
📦 商业授权（免费版本带水印）
✅ 适合复杂项目

✅ 3. dhtmlxGantt

💡 特点：专业甘特图库，支持任务层级、依赖、进度条、Zoom 等
⚙️ 支持：React/Vue/Angular/Vanilla
📄 License：商业/试用版可用（带水印）

npm install dhtmlx-gantt

1 2	npm install dhtmlx-gantt

React 示例：

import Gantt from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';

import Gantt from 'dhtmlx-gantt';

import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';

✅ 4. DevExtreme Gantt

💡 特点：与 DevExtreme 套件集成，支持 CRUD、依赖线、资源分配
📦 DevExpress 提供，功能强但包体略大
✅ 如果你已经在用 DevExtreme，可以无缝使用

✅ 5. react-gantt

💡 特点：专为 React 设计的开源甘特图
📄 License：MIT
📦 功能相对基础，但可扩展

✅ 6. jsGanttImproved

💡 纯 JavaScript，无需框架，HTML table 渲染
✅ 适合老项目或无需现代框架的项目

🚀 推荐选择参考

场景	推荐插件
快速构建，轻量级	Frappe Gantt ✅
商业系统，功能全面	dhtmlxGantt / DevExtreme Gantt 💼
已在用 DevExtreme	DevExtreme Gantt
React 项目，自由度高	Frappe Gantt / react-gantt
纯 HTML/JS，兼容性好	jsGanttImproved