Vue實現(xiàn)簡單可擴展甘特圖的方法詳解

更新時間：2022年11月02日 10:44:50 作者：Jovie

Ganttastic是一個小型的Vue.js組件，用于在Web應(yīng)用程序上呈現(xiàn)一個可配置的、可拖動的甘特圖。本文就將用它來實現(xiàn)簡單可擴展的甘特圖，感興趣的可以嘗試一下

特點

時間網(wǎng)格
懸停時突出顯示行。
顯示/隱藏時間軸。
自定義樣式和主題。

基本使用方法

1.安裝后導(dǎo)入Ganttastic組件。

import {GGanttChart, GGanttBar} from 'vue-ganttastic'

2.將該組件添加到模板中，并為甘特圖定義你的數(shù)據(jù)。

<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
}