Vue实现简单可扩展甘特图的方法详解

目录

• 特点
• 基本使用方法
• 预览
• 更新日志

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)

增加了指定条形图之间最小间隙的道具，以分钟为单位。

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.

到此这篇关于Vue实现简单可扩展甘特图的方法详解的文章就介绍到这了,更多相关Vue甘特图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！