代码拉取完成，页面将自动刷新
English | 简体中文
oh-my-gantt 是一个简易的甘特图表格工具，不依赖于第三方框架，可与主流的Javascript框架集成使用。
npm install oh-my-gantt -S
# or
yarn add oh-my-gantt
// import to your js or ts
import 'oh-my-gantt/dist/index.css'
import { OhMyGantt } from 'oh-my-gantt'
<link rel="stylesheet" href="https://unpkg.com/oh-my-gantt@1.2.7/dist/index.css" />
<script src="https://unpkg.com/oh-my-gantt@1.2.7/dist/index.umd.js"></script>
<script>
var OhMyGantt = OMG.OhMyGantt
<script>
HTML
<div id="gantt-box"></div>
JavaScript
const data = [
{
name: 'Task 1',
timebar: [
{
from: '2021-12-01',
to: '2021-12-03',
desc: 'Task 1',
},
]
},
{
name: 'Task 2',
timebar: [
{
from: '2021-12-04',
to: '2021-12-05',
desc: 'Task 2',
__config: { style: { backgroundColor: 'rgb(36, 112, 122)' } }
},
]
},
]
const gantt = new OhMyGantt('#gantt-box', {
from: '2021-12-01',
to: '2021-12-31',
timeInterval: 'day',
timeCellWidth: 120,
columns: [
{
name: 'name',
label: 'Task Name',
width: 140,
}
],
data
})
- 参考
docs/examples/advanced.html, 可画出类似上图所示的效果。- 图片指示了
dataGrid,timeGrid,markLine,timebar等各元素。
OhMyGantt 构造函数包含两个参数：element 和 Options
const myGanttInstacne = new OhMyGantt(element, {
// ...Options
})
提供一个在页面上已存在的 DOM 元素作为 OhMyGantt 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
| 设置项名称 | 描述 | 类型 | 默认值 / 参数 | 返回 |
|---|---|---|---|---|
| from | 设置甘特图表显示的开始时间 | Date | string | ||
| to | 设置甘特图表显示的结束时间 | Date | string | ||
| timeInterval | 设置时间列的时间间隔 | 'day' |'hour' | 'week' | 'month' | 'year' | number | 'day' | |
| dataGridWidth | 数据表格（左则表格）的宽度设置. The width setting of the data table (the table on the left) | number | 240 | |
| timeCellWidth | 时间表格每栏宽度 | number | 120 | |
| timebarHeight | 时间条的高度 | number | 32 | |
| timebarDraggable | 时间条是否允许拖动 | boolean | false | |
| columns | 数据表格的字段设置 | ColumnItem[] | ||
| data | 用于展示的数据内容 | MyGanttDataItem[] | ||
| timebarRenderer | 用于自定义timebar所渲染内容的函数 | (TimebarData, OhMyGantt) | string or HTMLElement or null | |
| timeGridCellRenderer | 用于自定义时间表格单元格所渲染内容的函数 |
(data: ColumnItem, columnIndex: number, ctx: OhMyGantt) | ||
| timeLabelRenderer | 用于自定义时间表格表头单元格子内容所渲染内容的函数 |
(data: ColumnItem, columnIndex: number, ctx: OhMyGantt) | string or HTMLElement or null | |
| onClickTimebar | 点击Timebar时触发的事件 | (TimebarData, Event) | ||
| onMouseoverTimebar | 鼠标经过Timebar时触发的事件 | (TimebarData, Event) | ||
| onMouseleaveTimebar | 鼠标离开Timebar时触发的事件 | (TimebarData, Event) | ||
| onDragTimebar | 拖动timebar时触发的事件 | (TimebarData, Event) | ||
| onDragstartTimebar | 开始拖动timebar时触发的事件 | (TimebarData, Event) | ||
| onDragendTimebar | 结束拖动timebar时触发的事件 | (TimebarData, Event) | ||
| onClickCell | 点击单元格时触发的事件 | ( CellData, Event) | ||
| onDropCell | 把timebar拖放到单元格时触发的事件 | (CellData, Event) | ||
| onDragoverCell | 把timebar拖动经过单元格时触发的事件 | (CellData, Event) | ||
| onDragenterCell | 把timebar拖动进入单元格时触发的事件 | (CellData, Event) | ||
| onDragleaveCell | 把timebar拖离单元格时触发的事件 | (CellData, Event) | ||
| onScroll | 表格滚动时触发的事件 | (GridScrollData, Event) | ||
| onCreated | 即行执行 new OhMyGantt(Element, Options) 后触发的事件 |
(OhMyGantt) | ||
| onRendered | 执行渲染表格后所触发的事件 | (OhMyGantt) |
| 属性/方法 | 描述 | Type | Return |
|---|---|---|---|
| element | 创建实例时挂载的目标Dom | Element | |
| data | 创建实例时所设置的数据 | MyGanttDataItem[] | |
| timeList | 时间表格中所有时间的时间列表 | Date[] | |
| from | 时间表格的时始时间 | Date | |
| to | 时间表格的结束时间 | Date | |
| options | 创建实例时的设置项 | Options | |
| $elements | 创建实例后存放数据表格和时间格的HTMLElement对象的对象 | { dataGrid: HTMLElement | null, timeGrid: HTMLElement | null } |
|
| renderDataGrid | 方法:渲染左则的数据表格（Data grid） | ()=>[HTMLElement, number] | |
| 返回数据表格的HTMLElement及其宽度 | |||
| renderTimeGrid | 方法:渲染右则的时间表格 (Time grid) | ()=>[HTMLElement, number] | |
| 返回时间表格的HTMLElement及其宽度 | |||
| render | 方法:渲染表格 （会执行renderDataGrid和renderTimeGrid） | ()=>void | |
| getScrollTop | 方法:取得纵向滚动的上滚高度 | () => number | 返回上滚高度 |
| getRowDataByIndex | 通过行的索引值取得该行数据 | (index: number) => MyGanttDataItem | null | 返回该行数据 |
| getRowDataById | 通过行的索引值取得该行数据 | (index: number) => MyGanttDataItem | null | 返回该行数据 |
| setMarkLine | 设置标记线（MarkLine） | (markLine: MarkLine)=> void | |
| removeMarkLine | 移除标记线（MarkLine） | (markLine: MarkLine)=> void | |
| scrollToTime | 时间表格横向滚动到指定时间 | (time: Date | string)=> void |
| setScrollTop | 使表格滚动到指定高度 | (top: number)=> void | |
| scrollToRow | 通过行的id或索引值使表格滚动到指定行 | ({index: number})=> void | ({id: string | number })=> void |
| 属性 | 描述 | 类型 | 是否必填 |
|---|---|---|---|
| timebar | timebar设置 | TimebarSetting[] | |
| __config | 该行的相关设置 | { height?: number, [key: string]: any} | |
| [key: string] | 数据表格有其它任意数据 | any |
| 属性 | 描述 | 类型 | 是否必填 |
|---|---|---|---|
| from | timebar起始时间 | Date | string | Yes |
| to | timebar结束时间 | Date | string | Yes |
| __config | 该timebar的相关设置 | { style?: number, [key: string]: any} |
| 属性 | 描述 | 类型 | 是否必填 |
|---|---|---|---|
| name | 栏名称 | string | Yes |
| label | 该栏显示在表头的内容 | string | Yes |
| width | 设定列的宽度 | number | |
| sourceData | 自定义的数据内容 （如果在时间表格，则自动生成，其值为该栏时间的时间戳） | any |
| 属性 | 描述 | 类型 |
|---|---|---|
| rowData | 当前行的数据 | any |
| $target | 当前单元格的Dom对象 | HTMLElement |
| rowIndex | 当前行的索引值 | number |
| value | 当前单元格的值 | any |
| columnIndex | 当前栏的索引值 | number |
| columnName | 当前栏的名称 | any |
| 属性 | 描述 | 类型 |
|---|---|---|
| rowData | 当前行的数据 | any |
| $target | 当前timebar起始单元格的Dom对象 | HTMLElement |
| rowIndex | 当前timebar所在行的索引值 | number |
| value | 当前timebar起始单元格的值（一般为该列时间的时间戳） | string |
| columnIndex | 当前timebar起始单元格的索引值 | any |
| timeColumnsIndex | 当前timebar占用栏位的索引 | number[] |
| timebarItemData | 当前timebar的相关设置 | TimebarSetting |
import { MarkLine } from 'oh-my-gantt'
const markLineInstance = new MarkLine({
// ...MarkLine Options
})
// add a markLine
myGanttInstacne.setMarkLine(markLineInstance)
// remove markLine
myGanttInstacne.removeMarkLine(markLineInstance)
| 设置项 | 描述 | 类型 | Default | 是否必填 |
|---|---|---|---|---|
| time | 时间表格所对应的时间 | date | string | Yes | |
| label | 标记线label所显示的文字内容 | string | Yes | |
| color | 颜色 | string | '#0086d4' | |
| lineStyle | 线风格 | 'solid' | 'dashed' | 'dotted' | 'solid' | |
| lineWidth | 线宽 | number | 1 |
| 属性 | 描述 | 类型 |
|---|---|---|
| options | 创建MarkLine时的设置项 | MarkLineOptions |
| id | 创建MarkLine时生成的唯一ID | string |
| $element | 创建MarkLine时生成的HTMLElement | HTMLElement |
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
