目录特点基本使用方法预览更新日志Ganttastic是一个小型的vue.js组件,用于在WEB应用程序上呈现一个可配置的、可拖动的甘特图。 特点 时间网格悬停时突出显示行。显示/隐藏
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.
到此这篇关于Vue实现简单可扩展甘特图的方法详解的文章就介绍到这了,更多相关Vue甘特图内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue实现简单可扩展甘特图的方法详解
本文链接: https://www.lsjlt.com/news/170590.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0