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"
>
<g-gantt-row label="My row #1"/>
<g-gantt-row label="My row #2"/>
<g-gantt-row label="My row #3"/>
...
</g-gantt-chart>
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)
- 增强了特定柱形图中间最小间隙的游戏道具，以min为基准。
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.