gantt-elastic甘特图（增加连接线箭头指向）

最新推荐文章于 2025-11-12 10:11:24 发布
原创 最新推荐文章于 2025-11-12 10:11:24 发布 · 532 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#甘特图

gantt-elastic正常甘特图连接线

优化后甘特图连接线

由于甘特图连接线不带箭头指向样式，所以手动修改node包文件

包的这个文件（node_modules\gantt-elastic\src\components\Chart\DependencyLines.vue）

（懒得标注修改哪了，直接整个文件替换就好）

<!--
/**
 * @fileoverview DependencyLines component
 * @license MIT
 * @author Rafal Pospiech <neuronet.io@gmail.com>
 * @package GanttElastic
 */
-->
<template>
  <svg
    x="0"
    y="0"
    width="100%"
    height="100%"
    class="gantt-elastic__chart-dependency-lines-container"
    :style="{ ...root.style['chart-dependency-lines-container'] }"
  >
    <g v-for="task in dependencyTasks" :key="task.id" :task="task">
      <defs>
        <marker id="markerArrow" markerWidth="8" markerHeight="8" refX="7" refY="5" orient="auto">
          <path d="M2,2 L2,8 L8,5 L2,2" style="fill: rgb(255 129 0)" />
        </marker>
      </defs>
      <path
        class="gantt-elastic__chart-dependency-lines-path"
        style=" marker-end: url(#markerArrow)"
        :style="{
          ...root.style['chart-dependency-lines-path'],
          ...task.style['chart-dependency-lines-path'],
          ...task.style['chart-dependency-lines-path-' + dependencyLine.task_id],
        }"
        v-for="dependencyLine in task.dependencyLines"
        :key="dependencyLine.id"
        :task="task"
        :d="dependencyLine.points"
      ></path>
    </g>
  </svg>
</template>

<script>
export default {
  name: 'DependencyLines',
  inject: ['root'],
  props: ['tasks'],
  data() {
    return {};
  },
  methods: {
    /**
     * Get path points
     *
     * @param {any} fromTaskId
     * @param {any} toTaskId
     * @returns {string}
     */
    getPoints(fromTaskId, toTaskId) {
      const fromTask = this.root.getTask(fromTaskId);
      const toTask = this.root.getTask(toTaskId);
      if (
        fromTask === null ||
        toTask === null ||
        !this.root.isTaskVisible(toTask) ||
        !this.root.isTaskVisible(fromTask)
      ) {
        return null;
      }
      const startX = fromTask.x + fromTask.width;
      const startY = fromTask.y + fromTask.height / 2;
      const stopX = toTask.x;
      const stopY = toTask.y + toTask.height / 2;
      const distanceX = stopX - startX;
      let distanceY;
      let yMultiplier = 1;
      if (stopY >= startY) {
        distanceY = stopY - startY;
      } else {
        distanceY = startY - stopY;
        yMultiplier = -1;
      }
      const offset = 10;
      const roundness = 4;
      const isBefore = distanceX <= offset + roundness;
      let points = `M ${startX} ${startY}
          L ${startX + offset},${startY} `;
      if (isBefore) {
        points += `Q ${startX + offset + roundness},${startY} ${startX + offset + roundness},${
          startY + roundness * yMultiplier
        }
            L ${startX + offset + roundness},${startY + (distanceY * yMultiplier) / 2 - roundness * yMultiplier}
            Q ${startX + offset + roundness},${startY + (distanceY * yMultiplier) / 2} ${startX + offset},${
          startY + (distanceY * yMultiplier) / 2
        }
            L ${startX - offset + distanceX},${startY + (distanceY * yMultiplier) / 2}
            Q ${startX - offset + distanceX - roundness},${startY + (distanceY * yMultiplier) / 2} ${
          startX - offset + distanceX - roundness
        },${startY + (distanceY * yMultiplier) / 2 + roundness * yMultiplier}
            L ${startX - offset + distanceX - roundness},${stopY - roundness * yMultiplier}
            Q ${startX - offset + distanceX - roundness},${stopY} ${startX - offset + distanceX},${stopY}
            L ${stopX},${stopY}`;
      } else {
        points += `L ${startX + distanceX / 2 - roundness},${startY}
            Q ${startX + distanceX / 2},${startY} ${startX + distanceX / 2},${startY + roundness * yMultiplier}
            L ${startX + distanceX / 2},${stopY - roundness * yMultiplier}
            Q ${startX + distanceX / 2},${stopY} ${startX + distanceX / 2 + roundness},${stopY}
            L ${stopX},${stopY}`;
      }
      return points;
    },
  },
  computed: {
    /**
     * Get tasks which are dependent on other tasks
     *
     * @returns {array}
     */
    dependencyTasks() {
      return this.tasks
        .filter((task) => typeof task.dependentOn !== 'undefined')
        .map((task) => {
          task.dependencyLines = task.dependentOn.map((id) => {
            return { points: this.getPoints(id, task.id), task_id: id };
          });
          return task;
        })
        .filter((task) => task.dependencyLines.points !== null);
    },
  },
};
</script>

包的这个文件（node_modules\gantt-elastic\src\components\Chart\Row\Milestone.vue）

<!--
/**
 * @fileoverview Milestone component
 * @license MIT
 * @author Rafal Pospiech <neuronet.io@gmail.com>
 * @package GanttElastic
 */
-->
<template>
  <g
    class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-milestone-wrapper"
    :style="{
      ...root.style['chart-row-bar-wrapper'],
      ...root.style['chart-row-milestone-wrapper'],
      ...task.style['chart-row-bar-wrapper']
    }"
  >
    <foreignObject
      class="gantt-elastic__chart-expander gantt-elastic__chart-expander--milestone"
      :style="{
        ...root.style['chart-expander'],
        ...root.style['chart-expander--milestone'],
        ...task.style['chart-expander']
      }"
      :x="(task.x - root.state.options.chart.expander.offset - root.state.options.chart.expander.size)-11"
      :y="task.y + (root.state.options.row.height - root.state.options.chart.expander.size) / 2"
      :width="root.state.options.chart.expander.size"
      :height="root.state.options.chart.expander.size"
      v-if="displayExpander"
    >
      <expander :tasks="[task]" :options="root.state.options.chart.expander" type="chart"></expander>
    </foreignObject>
    <svg
      class="gantt-elastic__chart-row-bar gantt-elastic__chart-row-milestone"
      :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-milestone'], ...task.style['chart-row-bar'] }"
      :x="task.x"
      :y="task.y"
      :width="task.width"
      :height="task.height"
      :viewBox="`0 0 ${task.width} ${task.height}`"
      @click="emitEvent('click', $event)"
      @mouseenter="emitEvent('mouseenter', $event)"
      @mouseover="emitEvent('mouseover', $event)"
      @mouseout="emitEvent('mouseout', $event)"
      @mousemove="emitEvent('mousemove', $event)"
      @mousedown="emitEvent('mousedown', $event)"
      @mouseup="emitEvent('mouseup', $event)"
      @mousewheel="emitEvent('mousewheel', $event)"
      @touchstart="emitEvent('touchstart', $event)"
      @touchmove="emitEvent('touchmove', $event)"
      @touchend="emitEvent('touchend', $event)"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <clipPath :id="clipPathId">
          <polygon :points="getPoints"></polygon>
        </clipPath>
      </defs>
      <polygon
        class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-milestone-polygon"
        :style="{
          ...root.style['chart-row-bar-polygon'],
          ...root.style['chart-row-milestone-polygon'],
          ...task.style['base'],
          ...task.style['chart-row-bar-polygon']
        }"
        :points="getPoints"
      ></polygon>
      <progress-bar :task="task" :clip-path="'url(#' + clipPathId + ')'"></progress-bar>
    </svg>
    <chart-text :task="task" v-if="root.state.options.chart.text.display"></chart-text>
  </g>
</template>

<script>
import ChartText from '../Text.vue';
import ProgressBar from '../ProgressBar.vue';
import Expander from '../../Expander.vue';
import taskMixin from './Task.mixin.js';
export default {
  name: 'Milestone',
  components: {
    ChartText,
    ProgressBar,
    Expander
  },
  inject: ['root'],
  props: ['task'],
  mixins: [taskMixin],
  data() {
    return {};
  },
  computed: {
    /**
     * Get clip path id
     *
     * @returns {string}
     */
    clipPathId() {
      return 'gantt-elastic__milestone-clip-path-' + this.task.id;
    },

    /**
     * Get points
     *
     * @returns {string}
     */
    getPoints() {
      const task = this.task;
      const fifty = task.height / 2;
      let offset = fifty;
      if (task.width / 2 - offset < 0) {
        offset = task.width / 2;
      }
      return `0,${fifty}
        ${offset},0
        ${task.width - offset},0
        ${task.width},${fifty}
        ${task.width - offset},${task.height}
        ${offset},${task.height}`;
    }
  }
};
</script>

包的这个文件（node_modules\gantt-elastic\src\components\Chart\Row\Project.vue）

<!--
/**
 * @fileoverview Project component
 * @license MIT
 * @author Rafal Pospiech <neuronet.io@gmail.com>
 * @package GanttElastic
 */
-->
<template>
  <g
    class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-project-wrapper"
    :style="{
      ...root.style['chart-row-bar-wrapper'],
      ...root.style['chart-row-project-wrapper'],
      ...task.style['chart-row-bar-wrapper']
    }"
  >
    <foreignObject
      class="gantt-elastic__chart-expander gantt-elastic__chart-expander--project"
      :style="{
        ...root.style['chart-expander'],
        ...root.style['chart-expander--project'],
        ...task.style['chart-expander']
      }"
      :x="(task.x - root.state.options.chart.expander.offset - root.state.options.chart.expander.size)-11"
      :y="task.y + (root.state.options.row.height - root.state.options.chart.expander.size) / 2"
      :width="root.state.options.chart.expander.size"
      :height="root.state.options.chart.expander.size"
      v-if="displayExpander"
    >
      <expander :tasks="[task]" :options="root.state.options.chart.expander" type="chart"></expander>
    </foreignObject>
    <svg
      class="gantt-elastic__chart-row-bar gantt-elastic__chart-row-project"
      :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-project'], ...task.style['chart-row-bar'] }"
      :x="task.x"
      :y="task.y"
      :width="task.width"
      :height="task.height"
      :viewBox="`0 0 ${task.width} ${task.height}`"
      @click="emitEvent('click', $event)"
      @mouseenter="emitEvent('mouseenter', $event)"
      @mouseover="emitEvent('mouseover', $event)"
      @mouseout="emitEvent('mouseout', $event)"
      @mousemove="emitEvent('mousemove', $event)"
      @mousedown="emitEvent('mousedown', $event)"
      @mouseup="emitEvent('mouseup', $event)"
      @mousewheel="emitEvent('mousewheel', $event)"
      @touchstart="emitEvent('touchstart', $event)"
      @touchmove="emitEvent('touchmove', $event)"
      @touchend="emitEvent('touchend', $event)"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <clipPath :id="clipPathId">
          <path :d="getPoints"></path>
        </clipPath>
      </defs>
      <path
        class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-project-polygon"
        :style="{
          ...root.style['chart-row-bar-polygon'],
          ...root.style['chart-row-project-polygon'],
          ...task.style['base'],
          ...task.style['chart-row-bar-polygon']
        }"
        :d="getPoints"
      ></path>
      <progress-bar :task="task" :clip-path="'url(#' + clipPathId + ')'"></progress-bar>
    </svg>
    <chart-text :task="task" v-if="root.state.options.chart.text.display"></chart-text>
  </g>
</template>

<script>
import ChartText from '../Text.vue';
import ProgressBar from '../ProgressBar.vue';
import Expander from '../../Expander.vue';
import taskMixin from './Task.mixin.js';
export default {
  name: 'Project',
  components: {
    ChartText,
    ProgressBar,
    Expander
  },
  inject: ['root'],
  props: ['task'],
  mixins: [taskMixin],
  data() {
    return {};
  },
  computed: {
    /**
     * Get clip path id
     *
     * @returns {string}
     */
    clipPathId() {
      return 'gantt-elastic__project-clip-path-' + this.task.id;
    },

    /**
     * Get points
     *
     * @returns {string}
     */
    getPoints() {
      const task = this.task;
      const bottom = task.height - task.height / 4;
      const corner = task.height / 6;
      const smallCorner = task.height / 8;
      return `M ${smallCorner},0
                L ${task.width - smallCorner} 0
                L ${task.width} ${smallCorner}
                L ${task.width} ${bottom}
                L ${task.width - corner} ${task.height}
                L ${task.width - corner * 2} ${bottom}
                L ${corner * 2} ${bottom}
                L ${corner} ${task.height}
                L 0 ${bottom}
                L 0 ${smallCorner}
                Z
        `;
    },

    /**
     * Should we display expander?
     *
     * @returns {boolean}
     */
    displayExpander() {
      const expander = this.root.state.options.chart.expander;
      return expander.display || (expander.displayIfTaskListHidden && !this.root.state.options.taskList.display);
    }
  }
};
</script>

包的这个文件（node_modules\gantt-elastic\src\components\Chart\Row\Task.vue）

<!--
/**
 * @fileoverview Task component
 * @license MIT
 * @author Rafal Pospiech <neuronet.io@gmail.com>
 * @package GanttElastic
 */
-->
<template>
  <g
    class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-task-wrapper"
    :style="{
      ...root.style['chart-row-bar-wrapper'],
      ...root.style['chart-row-task-wrapper'],
      ...task.style['chart-row-bar-wrapper']
    }"
  >
    <foreignObject
      class="gantt-elastic__chart-expander gantt-elastic__chart-expander--task"
      :style="{
        ...root.style['chart-expander'],
        ...root.style['chart-expander--task'],
        ...task.style['chart-expander']
      }"
      :x="(task.x - root.state.options.chart.expander.offset - root.state.options.chart.expander.size)-11"
      :y="task.y + (root.state.options.row.height - root.state.options.chart.expander.size) / 2"
      :width="root.state.options.chart.expander.size"
      :height="root.state.options.chart.expander.size"
      v-if="displayExpander"
    >
      <expander :tasks="[task]" :options="root.state.options.chart.expander" type="chart"></expander>
    </foreignObject>
    <svg
      class="gantt-elastic__chart-row-bar gantt-elastic__chart-row-task"
      :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-task'], ...task.style['chart-row-bar'] }"
      :x="task.x"
      :y="task.y"
      :width="task.width"
      :height="task.height"
      :viewBox="`0 0 ${task.width} ${task.height}`"
      @click="emitEvent('click', $event)"
      @mouseenter="emitEvent('mouseenter', $event)"
      @mouseover="emitEvent('mouseover', $event)"
      @mouseout="emitEvent('mouseout', $event)"
      @mousemove="emitEvent('mousemove', $event)"
      @mousedown="emitEvent('mousedown', $event)"
      @mouseup="emitEvent('mouseup', $event)"
      @mousewheel="emitEvent('mousewheel', $event)"
      @touchstart="emitEvent('touchstart', $event)"
      @touchmove="emitEvent('touchmove', $event)"
      @touchend="emitEvent('touchend', $event)"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <clipPath :id="clipPathId">
          <polygon :points="getPoints"></polygon>
        </clipPath>
      </defs>
      <polygon
        class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-task-polygon"
        :style="{
          ...root.style['chart-row-bar-polygon'],
          ...root.style['chart-row-task-polygon'],
          ...task.style['base'],
          ...task.style['chart-row-bar-polygon']
        }"
        :points="getPoints"
      ></polygon>
      <progress-bar :task="task" :clip-path="'url(#' + clipPathId + ')'"></progress-bar>
    </svg>
    <chart-text :task="task" v-if="root.state.options.chart.text.display"></chart-text>
  </g>
</template>

<script>
import ChartText from '../Text.vue';
import ProgressBar from '../ProgressBar.vue';
import Expander from '../../Expander.vue';
import taskMixin from './Task.mixin.js';
export default {
  name: 'Task',
  components: {
    ChartText,
    ProgressBar,
    Expander
  },
  inject: ['root'],
  props: ['task'],
  mixins: [taskMixin],
  data() {
    return {};
  },
  computed: {
    /**
     * Get clip path id
     *
     * @returns {string}
     */
    clipPathId() {
      return 'gantt-elastic__task-clip-path-' + this.task.id;
    },

    /**
     * Get points
     *
     * @returns {string}
     */
    getPoints() {
      const task = this.task;
      return `0,0 ${task.width},0 ${task.width},${task.height} 0,${task.height}`;
    }
  }
};
</script>

替换完记得重启项目

顾尘眠
关注
甘特图gantt-elastic
bbkhhvv的博客
10-30 1120
前提需要先下载gantt-elastic，gantt-elastic-header这个可用可不用，最后展示的效果是这样的，想要的效果是这种，找了很多有关甘特图的插件，终于找到了一个可以看懂的插件，下面是代码，看着更简化和使用。
vue甘特图(内网引入gantt-elastic以及源码扩展)
qq_36566924的博客
06-15 3758
前言：项目要求用甘特图展示计划的实施过程。之前用过dhtmlx，用着不是很舒服。又在网上看了jQueryGantt-master，wl-gantt-mater，gantt-elastic的大概源码，最后选定gantt-elastic(源码相对简单，易扩展开发，没选用他的进阶版本gantt-schedule-timeline-calendar-master的原因是这个要收费) 1.外网开发，直接去github上npm install就好，我是内网开发，在github上install下来，然后把下下来的nod
甘特弹性：甘特图[javascript甘特图，甘特组件，vue甘特图，vue甘特图，响应式甘特图，项目经理，vue项目]
02-04
甘特弹性-Javascript甘特图（可编辑，响应式） 适用于vue，jquery，vanilla js和其他框架的Javascript Gantt Chart 项目已作为下一个主要版本移至 甘特弹性 是vue组件，但可以在其他框架中使用，甚至可以与jQuery一起使用（vue是一种弹性轻量级的框架）。 安装 npm install --save gantt-elastic或从github /克隆仓库下载zip 并且如果您想要默认标题 npm install --save gantt-elastic-header 用法 <!DOCTYPE html > < html charset ="
gantt-elastic（vue甘特图）
zero_er的博客
11-07 530
【代码】gantt-elastic（vue甘特图）
vue.js中使用甘特图（gantt-elastic）的使用
s_156的博客
06-03 3819
公司要使用甘特图插件来跟踪任务的进度 ，在使用这个插件的过程中踩了太多的坑了，很多配置都没有文档的 连英文文档都没有，然后就看了源码研究了下具体的配置，具体的配置我都在下面的文章中截图有备注了。//这个根据需求引入。1.要 import GanttElastic from “gantt-elastic”;gantt-elastic-header 这个可以按照需求安装。4、options设置。
利用gantt-elastic 实现简易项目甘特图
coderNoWhy的博客
03-02 3583
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 年初回来公司计划做一个目标管理系统（类似禅道）用于后期项目、人员各自工作计划管理，其中有个需求项目阶段目标甘特图方式展示，起初对甘特图是啥都不太清楚，后了解到甘特图与燃尽图、鱼骨图为项目"三大图"，其中甘特图一般可以直观的看到每个任务完成的进度时间、完成情况。抱着好奇找到如何实现甘特图呈现的方法，其中包括High.
精选资源
react-gantt-schedule-timeline-calendar:React Gantt ScheduleTimeline Calendar组件包装，用于Gantt-schedule-timeline-calendar [react gantt，gantt，react甘特图，react Schedule，React时间线，React日历，gantt，日程表，Scheduler，时间线，日历，React gantt图表]
03-10
总之，虽然`react-gantt-schedule-timeline-calendar`组件包装已被废弃，但React开发者依然可以利用`gantt-schedule-timeline-calendar`库直接在React项目中创建强大的甘特图、时间线和日历功能。这需要对库的API有...
内网引入gantt-elastic依赖包
01-14
gantt-elastic需要的依赖包6个 dayjs gantt-elastic gantt-elastic-header resize-observe-polyfill vue-slider-component ...与本人这篇文章关联: improve-gantt-elastic（vue2中甘特图实现与引入） ...
improve-gantt-elastic（vue2中甘特图实现与引入）
岂不闻
01-14 3287
gantt-elastic（vue2中甘特图实现与引入）
Js甘特图Gantt
04-22
此甘特图Js是我从国外一网站上找的一段代码,但真用起来后发现有很多问题,因此又进行了大量的改造(包括新功能的添加,代码的完善,Bug的修复及注释的汉化完善等),才感觉能用,使用简单方便快捷
js版gantt甘特图控件
01-23
包含js_dhtmlxGantt、js_FreeGantt、js_jquery.ganttView-v.0.7、js_SIcon Gantt Chart、js_TreeGridEval、js_TreeTable+++Gantt等等13个js甘特图控件
【亲测免费】 探索Gantt-Elastic：一个基于Elasticsearch的敏捷项目管理工具
gitblog_00019的博客
03-26 1097
是一个创新的、开源的项目管理解决方案，它利用强大的Elasticsearch搜索引擎作为其数据存储后端。这个项目旨在提供一种灵活且高效的手段，用于跟踪和规划敏捷开发中的任务和里程碑，让你能够以实时的方式洞察项目进度。 ## 技术分析 ### Elasticsearch集成 Gantt-Elastic的核心是与Elasticsearch的深度集成。Elasticsearch是一个分布式、 RES...
**探索高效项目管理新境界：Gantt-Elastic 开源甘特图组件**
最新发布
gitblog_00282的博客
11-12 775
在数字化时代，项目管理和时间线规划变得日益重要。今天，我们向您推荐一个功能强大的JavaScript库——**Gantt-Elastic**，一款旨在简化您的项目计划过程的可编辑、响应式甘特图组件。尽管它不适用于生产环境中的大型项目，但它的轻量级和灵活性让它成为小型项目或原型设计的理想选择。对于追求更高性能的应用场景，请留意其进化版——[gantt-schedule-timeline-calend
【亲测免费】 推荐开源项目：Vue-Gantt-Elastic - 弹性可扩展的甘特图组件
gitblog_00064的博客
06-17 1158
推荐开源项目：Vue-Gantt-Elastic - 弹性可扩展的甘特图组件 1、项目介绍 vue-gantt-elastic 是一款基于 Vue.js 的高效、轻量级的甘特图组件，它旨在帮助开发者轻松地在web应用中展示和管理任务进度。该项目提供了一套简洁的API，使得自定义配置和集成到现有项目变得简单易行。 通过快速设置和运行，你可以立即启动开发环境并体验 vue-gantt-elastic ...
vue中使用gantt-elastic实现可拖拽甘特图
蜗牛~~
07-07 7475
gantt-elastic插件在vue中的使用
GanttElastic的使用
weixin_47180815的博客
12-15 5279
https://blog.youkuaiyun.com/yangxiaoman123/article/details/107855727 <template> <!-- <q-page class="q-pa-sm"> --> <div v-if="tasks.length > 0"> <gantt-elastic :options="options" :tasks="tasks" @tasks-change
Gantt-Elastic 开源项目教程
gitblog_00741的博客
08-08 855
Gantt-Elastic 是一个用于 Vue.js 的 JavaScript 甘特图组件，它支持响应式设计和可编辑功能。该项目已经被重写并作为 gantt-schedule-timeline-calendar 的新版本发布，以提供更高的性能。尽管 Gantt-Elastic 最初是为 Vue.js 设计的，但它也可以与其他框架（如 jQuery）一起使用。 ## 项目快速启动 ### 安装 ...
vue.js 甘特图_带有vue.js的弹性甘特图
cuk5340的博客
07-28 4514
vue.js 甘特图 甘特弹性 (gantt-elastic) Elastic javascript Gantt Chart. 弹性javascript甘特图。 Gantt-elastic is a vue component but it could be used in other frameworks or even with jQuery (vue is kind of elastic...
甘特图（gantt-elastic）的使用
08-15
### 创建和处理甘特图 #### 初始化项目 要使用 `gantt-elastic` 库来创建甘特图，首先需要安装必要的依赖。可以通过以下命令安装 `gantt-elastic` 和 `gantt-elastic-header`： ```bash npm install --save gantt-elastic npm install --save gantt-elastic-header ``` 如果项目中没有安装 `dayjs`，还需要安装它，因为 `gantt-elastic` 的一些示例中可能会用到： ```bash npm install dayjs --save ``` #### 基本配置 在 Vue 项目中使用 `gantt-elastic` 时，需要引入并注册组件。以下是一个简单的示例，展示如何在 Vue 组件中使用 `gantt-elastic`： ```vue <template> <div> <gantt-elastic :tasks="tasks" :options="options"></gantt-elastic> </div> </template> <script> import GanttElastic from 'gantt-elastic'; import 'gantt-elastic/build/gantt-elastic.css'; export default { components: { GanttElastic }, data() { return { tasks: [ { id: 1, name: 'Task 1', start: '2023-01-01', end: '2023-01-05', progress: 50 }, { id: 2, name: 'Task 2', start: '2023-01-06', end: '2023-01-10', progress: 0 } ], options: { // 配置项 header: { show: true }, grid: { show: true }, tooltip: { show: true } } }; } }; </script> ``` #### 数据模型 `gantt-elastic` 的核心数据模型是任务（tasks），每个任务需要包含以下基本信息： - `id`: 任务的唯一标识符。 - `name`: 任务的名称。 - `start`: 任务的开始时间。 - `end`: 任务的结束时间。 - `progress`: 任务的进度，范围是 0 到 100。 #### 配置选项 `gantt-elastic` 提供了丰富的配置选项，可以通过 `options` 对象进行设置。常见的配置包括： - `header`: 控制是否显示表头。 - `grid`: 控制是否显示网格线。 - `tooltip`: 控制是否显示提示信息。 #### 高级功能 `gantt-elastic` 还支持一些高级功能，如任务的拖放、缩放、依赖关系等。这些功能可以通过扩展配置来实现。 ```javascript options: { draggable: true, resizable: true, zoom: { enabled: true, min: 0.5, max: 2 }, dependencies: { enabled: true } } ``` 通过这些配置，可以实现更加复杂的甘特图功能，满足不同项目管理需求。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值