彩票走势图

甘特图dhtmlxGantt使用教程:如何在Vue.js框架中使用dhtmlxGantt(上)

翻译|使用教程|编辑:莫成敏|2020-05-09 11:38:47.973|阅读 3334 次

概述:现在,我们将向您展示将js甘特图与Vue.js(渐进式JavaScript框架)结合使用的最简单方法。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:


dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的JavaScript / HTML5甘特图,允许你创建动态甘特图,并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt,你可以显示活动之间的依赖关系,显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。

点击下载dhtmlxGantt正式版

我们的甘特图库(除快速的性能和丰富的功能之外)非常令人赞叹的是,它允许与几乎所有新的流行框架和技术集成。现在,我们将向您展示将js甘特图与Vue.js(渐进式JavaScript框架)结合使用的最简单方法。

因此,请按照以下说明创建Vue.js甘特图,或立即跳转到GitHub上的。

我们如何开始

我们需要做的第一件事是获取应用程序框架。为此,我们将使用vue-cli。

首先,请确保您拥有Node.js和Vue.js的最新稳定版本。您可以在node -v命令的帮助下检查您的Node.js版本,或在网站上下载最新版本。

您可以使用命令(npm install -g @ vue / cli)或使用yarn与节点软件包管理器一起安装vue-cli:

yarn global upgrade --latest @vue/cli
yarn global add @vue/cli

要创建应用,请运行以下命令:

vue create gantt-vue

它将要求一些项目信息。 您可以保留默认答案,然后按每个问题的输入按钮或手动选择功能。

然后,您需要转到应用程序目录,安装依赖项并运行它。

cd gantt-vue

如果使用yarn,则需要调用以下命令:

yarn install
yarn serve

如果使用npm,则需要调用以下命令:

npm install
npm run dev

这些步骤之后,该应用程序应在http:// localhost:8080上运行

vuejs-install

移至甘特图部分

现在我们应该获得dhtmlxGantt代码。 首先,我们需要通过在命令行中按ctrl + c来停止应用程序,以便随后运行以下命令:

yarn add dhtmlx-gantt --save (for yarn)
npm install dhtmlx-gantt --save (for npm)
然后,要将甘特图添加到应用程序中,我们应该创建一个组件。

因此,我们将从为应用程序组件创建文件夹开始。 打开src文件夹并在其中创建组件文件夹。 然后,在components文件夹中创建Gantt.vue文件,并将以下代码放入其中:

{{ src/components/Gantt.vue }}
<template>
  <div ref="gantt"></div>
</template>
 
<script>
import {gantt} from 'dhtmlx-gantt';
export default {
  name: 'gantt',
  props: {
    tasks: {
      type: Object,
      default () {
        return {data: [], links: []}
      }
    }
  },
 
  mounted: function () {
    gantt.config.xml_date = "%Y-%m-%d";
 
    gantt.init(this.$refs.gantt);
    gantt.parse(this.$props.tasks);
  }
}
</script>
 
<style>
    @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>

现在,甘特图组件已准备就绪。 将元素添加到页面后,它将在“ gantt”参考下初始化甘特图。 然后,甘特图将从任务属性中加载数据。

现在是时候将组件添加到我们的应用程序了。

打开App.vue并添加以下代码,而不是我们已经在其中添加的代码。

{{ src/App.vue }}
<template>
  <div class="container">
    <gantt class="left-container" :tasks="tasks"></gantt>
  </div>
</template>
 
<script>
import Gantt from './components/Gantt.vue';
 
export default {
  name: 'app',
  components: {Gantt},
  data () {
    return {
      tasks: {
        data: [
          {id: 1, text: 'Task #1', start_date: '2020-01-17', duration: 3, progress: 0.6},
          {id: 2, text: 'Task #2', start_date: '2020-01-20', duration: 3, progress: 0.4}
        ],
        links: [
          {id: 1, source: 1, target: 2, type: '0'}
        ]
      },
    }
  }
}
</script>

<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .container {
    height: 100%;
    width: 100%;
  }
  .left-container {
    overflow: hidden;
    position: relative;
    height: 100%;
  }
</style>

现在,我们应该在页面上看到带有预定义任务的甘特图。


本文内容尚未完结,敬请期待后续内容~您可以下载dhtmlxGantt试用版免费体验~


想要购买dhtmlxGantt正版授权,或了解更多产品信息请点击



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP