{"id":32956144,"url":"https://github.com/xpyjs/gantt","last_synced_at":"2026-04-08T12:03:56.828Z","repository":{"id":37496006,"uuid":"292741110","full_name":"xpyjs/gantt","owner":"xpyjs","description":"A powerful and flexible Gantt chart component library for developers, written in native JS + Canvas. Supports TypeScript. 中文文档","archived":false,"fork":false,"pushed_at":"2026-01-14T07:09:48.000Z","size":20322,"stargazers_count":332,"open_issues_count":1,"forks_count":52,"subscribers_count":2,"default_branch":"dev","last_synced_at":"2026-04-01T23:44:46.282Z","etag":null,"topics":["gantt","gantt-chart","gantt-diagram","ganttchart","ganttjs","ganttview","react","typescript","vanilla-javascript","vue","vue-gantt","vue3"],"latest_commit_sha":null,"homepage":"https://docs.xiaopangying.com/gantt/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xpyjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2020-09-04T03:37:42.000Z","updated_at":"2026-04-01T01:52:14.000Z","dependencies_parsed_at":"2024-12-05T11:31:42.371Z","dependency_job_id":"1e0fa0e9-8b7e-4dbb-afd0-142555762219","html_url":"https://github.com/xpyjs/gantt","commit_stats":{"total_commits":437,"total_committers":8,"mean_commits":54.625,"dds":0.1578947368421053,"last_synced_commit":"d34f36ab3005d4413da0076d3cebbf994abb6f3e"},"previous_names":["jeremyjone/jz-gantt"],"tags_count":39,"template":false,"template_full_name":null,"purl":"pkg:github/xpyjs/gantt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xpyjs%2Fgantt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xpyjs%2Fgantt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xpyjs%2Fgantt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xpyjs%2Fgantt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xpyjs","download_url":"https://codeload.github.com/xpyjs/gantt/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xpyjs%2Fgantt/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31554120,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T10:21:54.569Z","status":"ssl_error","status_checked_at":"2026-04-08T10:21:38.171Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gantt","gantt-chart","gantt-diagram","ganttchart","ganttjs","ganttview","react","typescript","vanilla-javascript","vue","vue-gantt","vue3"],"created_at":"2025-11-12T23:00:19.020Z","updated_at":"2026-04-08T12:03:56.773Z","avatar_url":"https://github.com/xpyjs.png","language":"TypeScript","funding_links":[],"categories":["Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"# XGantt\n\n![](./logo.png)\n\n[![OSCS Status](https://www.oscs1024.com/platform/badge/xpyjs/gantt.svg?size=small)](https://www.oscs1024.com/project/xpyjs/gantt?ref=badge_small) ![NPM Version](https://img.shields.io/npm/v/@xpyjs/gantt-core.svg) ![NPM Downloads](https://badgen.net/npm/dt/@xpyjs/gantt-core) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/@xpyjs/gantt-core)](https://bundlephobia.com/result?p=@xpyjs/gantt-core) [![TypeScript](https://img.shields.io/github/languages/top/xpyjs/gantt)](https://github.com/xpyjs/gantt) [![codecov](https://codecov.io/gh/xpyjs/gantt/graph/badge.svg?token=JBQD58RXZI)](https://codecov.io/gh/xpyjs/gantt) ![License](https://img.shields.io/npm/l/@xpyjs/gantt-core.svg)\n[![GitHub Release](https://img.shields.io/github/v/release/xpyjs/gantt)](https://github.com/xpyjs/gantt/releases) [![GitHub Pages](https://img.shields.io/github/deployments/xpyjs/gantt/github-pages?label=gh-pages)](https://xpyjs.github.io/gantt/) [![Last Commit](https://img.shields.io/github/last-commit/xpyjs/gantt)](https://github.com/xpyjs/gantt/commits/master) [![Node Version](https://img.shields.io/badge/node-%3E%3D%2018-brightgreen)](https://nodejs.org/) ![GitHub Stars](https://img.shields.io/github/stars/xpyjs/gantt.svg?style=social) ![GitHub Forks](https://shields.io/github/forks/xpyjs/gantt?label=Fork\u0026style=social)\n\n[[中文](./README.md)] [[English](./README_en.md)]\n\n一个功能强大且灵活的甘特图组件库，原生 JS + Canvas 编写，专为现代 Web 应用程序设计，支持 TypeScript。\n\n## 关于版本问题\n\n当前版本是全新开发的，如果您只想使用 `Vue` 版本，我强烈建议您升级到此版本（`@xpyjs/gantt-vue` 适用于 `Vue3`）。\n如果您正在寻找以前的版本，请参考 [origin-vue3 分支](https://github.com/xpyjs/gantt/tree/origin-vue3)。\n\n## 📖 简介\n\n甘特图是一种项目管理工具，用于展示项目进度、任务分配和资源利用情况。它以时间轴为基础，通过条形图的形式展示项目中各个任务的开始时间、结束时间、持续时间以及它们之间的依赖关系。\n\n`XGantt` 是一个基于原生 JavaScript 开发的高性能甘特图组件库。它采用 Canvas 技术构建，提供了流畅的用户体验和丰富的功能特性。\n\n## ✨ 特性\n\n- 🚀 **高性能渲染**：基于 Konva.js 的 Canvas 渲染引擎，支持大量数据的流畅显示\n- 📊 **多层级表头**：支持表头的多层级展示，便于复杂数据的组织和展示\n- ⏱️ **多时间单位**：支持小时、天、周、月、季度等多种时间刻度\n- 🔗 **任务依赖管理**：完整的任务依赖关系创建、编辑和可视化\n- 🎯 **丰富的交互**：拖拽、缩放、选择、右键菜单等交互功能\n- 📅 **多层联动**：支持不同层级之间的数据联动\n- 📏 **基线支持**：提供基线功能，用于跟踪项目进度\n- 🏁 **里程碑**：支持里程碑标记，便于关键节点的跟踪\n- 📊 **虚拟滚动**：支持大数据量的虚拟滚动，保证性能\n- 🔄 **事件系统**：完善的事件监听机制，支持业务逻辑集成\n- 🖌️ **自定义样式**：丰富的样式和主题配置\n- 🛠️ **TypeScript 支持**：完整的类型定义，提供更好的开发体验\n- 📦 **多框架支持**：原生 JavaScript，开箱即用，适配所有框架\n- 🌐 **国际化支持**：支持多语言支持\n- 📚 **全新交互文档**：文档包含详细的教程、API和示例代码 [文档链接](https://docs.xiaopangying.com/gantt/)\n- 🔄 **持续更新**：不定期发布新版本，更新功能，修复已知问题，优化性能等\n\n## 🎯 功能\n\n### 核心功能\n\n- **表格视图**：左侧表格区域，支持自定义合并多行多列\n- **时间轴**：灵活的时间轴配置，支持多种时间单位和自定义时间范围\n- **任务管理**：支持多层级任务结构\n- **依赖关系**：可视化的任务依赖线，支持视图中拖拽添加、删除、管理依赖线\n- **进度显示**：任务进度条显示，支持百分比和自定义样式\n\n### 交互功能\n\n- **拖拽操作**：任务条拖拽移动和调整大小\n- **鼠标操作**：支持行、任务条的点击、双击、右键菜单等操作\n- **依赖线**：支持依赖线的创建、编辑和删除\n\n## 📦 安装\n\n### 安装核心包\n\n```bash\nnpm install @xpyjs/gantt-core\n# 或\nyarn add @xpyjs/gantt-core\n# 或\npnpm add @xpyjs/gantt-core\n```\n\n## 🚀 快速开始\n\n### 1. 基本使用\n\n```typescript\nimport { XGantt } from '@xpyjs/gantt-core';\nimport '@xpyjs/gantt-core/index.css';\n\n// 准备数据\nconst taskData = [\n  {\n    id: 1,\n    name: '项目启动',\n    startTime: '2024-01-01',\n    endTime: '2024-01-05',\n    progress: 100\n  },\n  {\n    id: 2,\n    name: '需求分析',\n    startTime: '2024-01-06',\n    endTime: '2024-01-15',\n    progress: 80\n  },\n  {\n    id: 3,\n    name: '系统设计',\n    startTime: '2024-01-16',\n    endTime: '2024-01-30',\n    progress: 50\n  }\n];\n\n// 创建甘特图实例\nconst gantt = new XGantt('#gantt-container', {\n  data: taskData\n});\n```\n\n### 2. HTML 结构\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eXGantt Demo\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"gantt-container\" style=\"width: 100%; height: 600px;\"\u003e\u003c/div\u003e\n  \u003cscript src=\"your-script.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### 3. 配置选项\n\n```typescript\nconst gantt = new XGantt('#gantt-container', {\n  // 数据配置\n  data: taskData,\n\n  // 时间轴配置\n  unit: 'day', // 'hour' | 'day' | 'week' | 'month' | 'quarter'\n\n  // 依赖关系配置\n  links: {\n    data: [],         // 依赖关系数据\n    key: 'id',        // 指定数据的唯一标识字段\n    show: true,       // 展示依赖关系\n    create: {\n      enabled: true,  // 允许在视图中创建依赖关系\n      mode: 'hover',  // 鼠标悬停在任务条时展示创建点\n      from: true,     // 允许节点作为起始点创建连线\n      to: true        // 允许节点作为终点创建连线\n    }\n  },\n\n  // 日志级别\n  logLevel: 'info' // 'debug' | 'info' | 'warn' | 'error' | 'none',\n\n  // ... 其他配置选项\n});\n```\n\n### 4. 事件监听\n\n```typescript\n// 监听任务选择事件\ngantt.on('select', (data, checked, all) =\u003e {\n  console.log('选中的任务:', data);\n});\n\n// 监听任务点击事件\ngantt.on('click:row', (e, data) =\u003e {\n  console.log('点击了任务行:', data);\n});\n\n// 监听任务条点击事件\ngantt.on('click:slider', (e, data) =\u003e {\n  console.log('点击了任务条:', data);\n});\n\n// 监听任务移动事件\ngantt.on('move', (data) =\u003e {\n  console.log('任务移动:', data);\n});\n```\n\n## 📚 API 参考\n\n### XGantt 类\n\n#### 构造函数\n\n```typescript\nnew XGantt(element: string | HTMLElement, options?: IOptions)\n```\n\n- `element`: 容器元素或选择器\n- `options`: 配置选项\n\n#### 方法\n\n##### update(options: IOptions): void\n\n动态更新甘特图配置选项。\n\n```typescript\ngantt.update({\n  unit: 'month',\n  logLevel: 'debug'\n});\n```\n\n##### render(): void\n\n强制渲染视图。\n\n```typescript\ngantt.render();\n```\n\n##### destroy(): void\n\n销毁甘特图实例并清理所有资源。\n\n```typescript\ngantt.destroy();\n```\n\n##### jumpTo(date?: any): boolean\n\n跳转到指定日期的时间轴位置。\n\n```typescript\ngantt.jumpTo('2024-06-01');\ngantt.jumpTo(new Date());\n```\n\n##### on(event: keyof EventMap, callback: Function): void\n\n注册事件监听器。\n\n```typescript\ngantt.on('select', (data, checked, all) =\u003e {\n  // 处理选择事件\n});\n```\n\n### 配置选项\n\n参考完整的配置选项：[IOptions](./packages/core/src/types/index.d.ts#l7)\n\n### 事件系统\n\n甘特图支持以下事件：\n\n| 事件名称 | 参数 | 描述 |\n|----------|------|------|\n| `error` | `(error: ErrorType)` | 错误处理 |\n| `select` | `(data: any[], checked: boolean, all: any[])` | 任务选择 |\n| `click:row` | `(e: MouseEvent, data: any)` | 行点击 |\n| `dblclick:row` | `(e: MouseEvent, data: any)` | 行双击 |\n| `contextmenu:row` | `(e: MouseEvent, data: any)` | 行右键 |\n| `click:slider` | `(e: MouseEvent, data: any)` | 任务条点击 |\n| `dblclick:slider` | `(e: MouseEvent, data: any)` | 任务条双击 |\n| `contextmenu:slider` | `(e: MouseEvent, data: any)` | 任务条右键 |\n| `move` | `(data: {row: any; old: any}[])` | 任务移动 |\n| `create:link` | `(link: ILink)` | 依赖关系创建 |\n| `update:link` | `(link: ILink)` | 依赖关系更新 |\n| `select:link` | `(add: ILink, cancel: ILink, all: ILink[])` | 依赖关系选择 |\n\n参考完整的事件类型：[EventMap](./packages/core/src/types/event.d.ts#l4)\n\n### 工具函数\n\n同时，XGantt 还提供了一些实用的工具函数，方便开发者进行常见操作。\n\n```typescript\nimport { generateId, dayjs, colorjs } from '@xpyjs/gantt-core';\n\n// 生成唯一 ID\nconst id = generateId();\n\n// 时间处理（就是 dayjs 包，如果不想安装，可以通过导出使用。已经内置了一些插件，如果需要更多，仍需要单独安装使用）\nconst now = dayjs();\nconst formatted = dayjs('2024-01-01').format('YYYY-MM-DD');\n\n// 颜色处理\nconst color = colorjs('#ff0000');\nconst rgb = color.alpha(0.5).toRgb(); // 获取 RGB 颜色值 { r: 255, g: 0, b: 0, a: 0.5 }\n```\n\n## 框架支持\n\nXGantt 本身可以适配多种前端框架。但是我仍然提供了 `Vue` 和 `React` 的适配包，方便在这些框架中使用。\n\n### Vue 版本\n\n`@xpyjs/gantt-vue` 是专为 Vue 3 设计的适配包，提供了更好的集成和使用体验。\n\n#### 安装\n\n```bash\nnpm install @xpyjs/gantt-vue\n# or\nyarn add @xpyjs/gantt-vue\n# or\npnpm add @xpyjs/gantt-vue\n```\n\n#### 使用\n\n```vue\n\u003ctemplate\u003e\n  \u003cXGanttVue :options=\"ganttOptions\" /\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\" setup\u003e\nimport { reactive } from 'vue';\nimport XGanttVue from '@xpyjs/gantt-vue';\nimport '@xpyjs/gantt-vue/style.css';\n\nconst ganttOptions = reactive({\n  data: [\n    {\n      id: 1,\n      name: '项目启动',\n      startTime: '2024-01-01',\n      endTime: '2024-01-05',\n      progress: 100\n    },\n    {\n      id: 2,\n      name: '需求分析',\n      startTime: '2024-01-06',\n      endTime: '2024-01-15',\n      progress: 80\n    },\n    {\n      id: 3,\n      name: '系统设计',\n      startTime: '2024-01-16',\n      endTime: '2024-01-30',\n      progress: 50\n    }\n  ],\n  unit: 'day',\n  table: {\n    columns: [\n      { label: '任务名称', field: 'name' },\n      { label: '开始时间', field: 'startTime' },\n      { label: '结束时间', field: 'endTime' },\n    ]\n  }\n});\n\u003c/script\u003e\n```\n\n`@xpyjs/gantt-vue` 已经适配了响应式，所以直接修改数据，就会触发视图自动更新。\n\n### React 版本\n\n`@xpyjs/gantt-react` 是专为 React 设计的适配包，提供了更好的集成和使用体验。\n\n#### 安装\n\n```bash\nnpm install @xpyjs/gantt-react\n# or\nyarn add @xpyjs/gantt-react\n# or\npnpm add @xpyjs/gantt-react\n```\n\n#### 使用\n\n```jsx\nimport { useState, useCallback, useEffect } from 'react';\nimport { XGanttReact, useXGantt } from '@xpyjs/gantt-react';\nimport '@xpyjs/gantt-react/style.css';\n\nfunction App() {\n  const { ganttRef, jumpTo } = useXGantt();\n\n  const [ganttData, setGanttData] = useState([\n    {\n      id: 1,\n      name: '项目启动',\n      startTime: '2024-01-01',\n      endTime: '2024-01-05',\n      progress: 100\n    },\n    {\n      id: 2,\n      name: '需求分析',\n      startTime: '2024-01-06',\n      endTime: '2024-01-15',\n      progress: 80\n    },\n    {\n      id: 3,\n      name: '系统设计',\n      startTime: '2024-01-16',\n      endTime: '2024-01-30',\n      progress: 50\n    }\n  ]);\n\n  const ganttOptions: IOptions = {\n    data: ganttData,\n    table: {\n      columns: [\n        { label: '任务名称', field: 'name' },\n        { label: '开始时间', field: 'startTime' },\n        { label: '结束时间', field: 'endTime' },\n      ]\n    },\n    unit: 'day',\n  };\n\n  return (\n    \u003cdiv className=\"app\"\u003e\n      \u003cXGanttReact ref={ganttRef} options={ganttOptions} /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n`@xpyjs/gantt-react` 提供了一个 hooks：`useXGantt`，方便在函数组件中使用。\n\n## 🔧 浏览器支持\n\nXGantt 基于 HTML5 Canvas 技术构建，只要浏览器支持 Canvas API 即可正常使用：\n\n- **Chrome** \u003e= 51\n- **Firefox** \u003e= 45\n- **Safari** \u003e= 10\n- **Edge** \u003e= 12\n- **Internet Explorer** \u003e= 9\n\n\u003e **注意**：XGantt 主要依赖 Canvas 2D Context API，在支持 Canvas 的浏览器中都能良好运行。上述版本要求已经覆盖了绝大部分用户场景。\n\n## 📄 许可证\n\nMIT License\n\n## 🤝 贡献\n\n欢迎贡献！请阅读我们的贡献指南以获取更多信息。\n\n## 📞 支持\n\n- [GitHub Issues](https://github.com/xpyjs/gantt/issues)\n- [文档](https://docs.xiaopangying.com/gantt/)\n\n## 🎊 赞助\n\n如果您觉得这个项目不错，可以请作者喝杯咖啡。\n\n现已接入 [爱发电](https://afdian.com/a/xpyjs) 平台，通过该平台可以选择多种方案支持，并可以得到相应回馈。\n\n也可以通过 [Sponsor](./Sponsor.md) 文档了解更多赞助方式。\n\n---\n\nMade with ❤️ by the Jeremy Jone\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxpyjs%2Fgantt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxpyjs%2Fgantt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxpyjs%2Fgantt/lists"}