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)
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)
The postSimple Draggable Gantt Chart For Vue - Ganttasticappeared first onVue Script.