Vue的简单可拖动甘特图– Ganttastic

Vue的简单可拖动甘特图– Ganttastic
插件名称 vue-ganttastic
版本号 v0.9.30
发布时间 2020年6月18日
插件作者 InfectoOne

Ganttastic是一个小的Vue.js组件,用于在Web应用程序上呈现可配置的,可拖动的甘特图。

变更日志:

v0.9.30(01/11/2021)

  • 添加了支持以分钟为单位指定条之间的最小间隙

v0.9.23(2020年2月2日)

  • 修复:带有pushOnOverlap的条:计算拖动限制时不考虑false

v0.9.15(06/16/2020)

  • 修复了固定条距要拖动的条距离0像素时的错误
  • 不动的栏现在也会发出mousedown事件(但无法拖动)
  • 开始在特殊的“阴影”栏上工作
  • 更新了NPM软件包版本

特征:

  • 时间网格
  • 突出显示悬停行。
  • 显示/隐藏时间轴。
  • 自定义样式和主题。

基本用法:

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}

安装和下载:

# NPM
$ npm install vue-ganttastic --save