甘特图dhtmlxGantt使用教程：如何在Vue.js框架中使用dhtmlxGantt（上）

现在，我们将向您展示将js甘特图与Vue.js（渐进式JavaScript框架）结合使用的最简单方法。

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

dhtmlxGantt正式版

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

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

我们如何开始

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

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

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

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

要创建应用，请运行以下命令：

vue create gantt-vue

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

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

cd gantt-vue

如果使用yarn，则需要调用以下命令：

yarn installyarn serve

如果使用npm，则需要调用以下命令：

npm installnpm run dev

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

移至甘特图部分

现在我们应该获得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正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：

来源：慧都