Vue的简单可扩展甘特图 - Ganttastic
Ganttastic是一个小型的Vue.js组件，用于在Web应用程序上呈现一个可配置的、可拖动的甘特图。
特点。
- 时间网格
- 悬停时突出显示行。
- 显示/隐藏时间轴。
- 自定义样式和主题。
基本使用方法。
1.安装后导入Ganttastic组件。
import {GGanttChart, GGanttBar} from 'vue-ganttastic'
2.将该组件添加到模板中，并为甘特图定义你的数据。
``` <g-gantt-chart chart-start="2020-03-01 00:00" chart-end="2020-03-03 00:00"
... ```
export default {
...
components:{
GGanttChart,
GGanttBar
},
data(){
return{
myChartStart: "2020-03-01 00:00"
myChartEnd: "2020-03-02 00:00"
myBars: [
{
myBarStart: "2020-03-01 01:30",
myBarEnd: "2020-03-01 06:00"
},
{
myBarStart: "2020-03-01 15:10",
myBarEnd: "2020-03-01 20:00"
}
]
}
}
...
}
3.可用道具来配置甘特图。
``` // start date chartStart: {type: String, default: moment().startOf("day").format("YYYY-MM-DD HH:mm:ss")},
// end date chartEnd: {type: String, default: moment().startOf("day").add(12,"hours").format("YYYY-MM-DD HH:mm:ss")},
// hide or show time axis hideTimeaxis: Boolean,
// width of row labels rowLabelWidth: {type: String, default: "10%"},
// row height rowHeight: {type: Number, default: 40},
// local locale: {type: String, default: "en"},
// theme name theme: String,
// show or hide time grid grid: Boolean,
// an array of highlighted hours highlightedHours: {type: Array, default: () => []},
// the total width of the entire ganttastic component in % width: {type: String, default: "100%"},
// pusn on overlap pushOnOverlap: {type: Boolean},
// snap background on overlap snapBackOnOverlap: {type: Boolean},
// minimum gap between bars minGapBetweenBars: { type: Number, default: 0 } ```
预览。
更新日志。
v2.1.1 (09/21/2022)
- 为图书馆用户提供了公开的类型
- 用新的可组合的 "useContext "提供上下文
- 修正了一些小的类型问题
- 更新了样式。
- 对范围值使用了正确的字体字符
- 使用数字字体变体，使日期总是占用相同的宽度
- 调整了getRowsInChart和getChartRows的措辞
v2.0.5 (07/24/2022)
- 增加了 "点击栏 "事件
v2.0.4 (05/08/2022)
- 错误修正
v2.0.2 (02/05/2022)
- 错误修正
v2.0.1 (01/08/2022)
- 修复：当chartart/chartEnd改变时，条形图重新定位
v2.0.0 (01/05/2022)
- 添加vue 3支持。
v0.9.32 (01/13/2021)
- 当在甘特图行上拖动一个HTML元素时，悬停时的高亮效果。
v0.9.30 (01/11/2021)
- 增加了指定条形图之间最小间隙的道具，以分钟为单位。
v0.9.23 (07/02/2020)
- 修复：计算拖动限制时不考虑pushOnOverlap: false的条形图
v0.9.15 (06/16/2020)
- 修正了当不动条与即将被拖动的条的距离为0像素时的错误
- 不动条现在也会发出mousedown事件（但它们不能被拖动）。
- 开始处理特殊的 "阴影 "条
- 更新了NPM包的版本
The postSimple Draggable Gantt Chart For Vue - Ganttasticappeared first onVue Script.