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上運行

移至甘特圖部分

現在我們應該獲得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試用版免費體驗~