成人乱码在线,97麻豆国产传媒一

一、甘特圖組件庫

1. DHTMLX Gantt

特點(diǎn)與優(yōu)勢(shì)：

功能全面：提供完整的甘特圖功能，包括任務(wù)管理、依賴關(guān)系顯示、進(jìn)度可視化等。
高度可配置：允許開發(fā)者根據(jù)項(xiàng)目需求進(jìn)行定制，包括外觀、交互方式等。
跨平臺(tái)兼容性：支持多種瀏覽器和平臺(tái)，確保在不同環(huán)境下的穩(wěn)定性。

適用場景：

適用于需要高度定制化和擴(kuò)展性的項(xiàng)目管理場景。
適用于基于不同服務(wù)器端技術(shù)和框架的Web開發(fā)項(xiàng)目。

使用注意事項(xiàng)：

需手動(dòng)漢化，可能增加一定的工作量。
最新版本的部分內(nèi)容收費(fèi)，需考慮成本因素。

github地址：GitHub - DHTMLX/gantt: GPL version of Javascript Gantt Chart

官網(wǎng)：DHTMLX JS Library | JavaScript/HTML5 UI Framework | JavaScript UI Library

定價(jià)：DHTMLX 許可條款、定價(jià)和支持計(jì)劃

DHX Pro版定價(jià).png

Demo圖片示例：

DHTMLX.png

數(shù)據(jù)加載：數(shù)據(jù)加載甘特圖文檔 (dhtmlx.com)

數(shù)據(jù)格式文檔地址：探索支持的數(shù)據(jù)格式甘特圖文檔 (dhtmlx.com)

數(shù)據(jù)格式：

{
    "tasks":[
        {"id":"1", "text":"Project #2", "start_date":"01-04-2020", "duration":18,
            "progress":0.4, "open": true},
        {"id":"2", "text":"Task #1", "start_date":"02-04-2020", "duration":8,
            "progress":0.6, "parent":"1"},
        {"id":"3", "text":"Task #2", "start_date":"11-04-2020", "duration":8,
            "progress":0.6, "parent":"1"}
    ],
    "links":[
        {"id":"1", "source":"1", "target":"2", "type":"1"},
        {"id":"2", "source":"2", "target":"3", "type":"0"},
        {"id":"3", "source":"3", "target":"4", "type":"0"},
        {"id":"4", "source":"2", "target":"5", "type":"2"}
    ]
}

2. Bryntum Gantt

特點(diǎn)與優(yōu)勢(shì)：

基于現(xiàn)代Web技術(shù)：采用ES 2020編寫，與現(xiàn)代Web開發(fā)技術(shù)無縫集成。
無縫集成：能夠輕松集成到基于Vue.js或其他流行框架的項(xiàng)目中。
專業(yè)支持：提供付費(fèi)的專業(yè)支持和服務(wù)，確保項(xiàng)目的順利進(jìn)行。

適用場景：

適用于使用Vue.js等現(xiàn)代框架進(jìn)行Web開發(fā)的項(xiàng)目。
適用于需要高級(jí)甘特圖功能和專業(yè)支持的項(xiàng)目管理場景。

使用注意事項(xiàng)：

需要付費(fèi)購買，需考慮預(yù)算因素。
可能需要一定的學(xué)習(xí)成本來掌握其高級(jí)功能。

github地址：GitHub - bryntum/chronograph: A reactive state management system with novel and unique properties

官網(wǎng)：用于項(xiàng)目管理的高性能 Web 組件 (bryntum.com)

定價(jià)：購買 Bryntum Gantt - Bryntum

bry定價(jià).png

Demo圖片示例：

Bryntum.png

Vue集成文檔：Getting Started with Bryntum Gantt in Vue | Bryntum Gantt

數(shù)據(jù)格式文檔地址：TaskStore | Bryntum Gantt

任務(wù)數(shù)數(shù)據(jù)格式：

const taskStore = new TaskStore({
    data : [
        {
            "id"           : 1000,
            "name"         : "Cool project",
            "percentDone"  : 50,
            "startDate"    : "2019-01-02",
            "expanded"     : true,
            "children"     : [
                {
                    "id"           : 1,
                    "name"         : "A leaf node",
                    "startDate"    : "2019-01-02",
                    "percentDone"  : 50,
                    "duration"     : 10,
                }
            ]
        }
    ]
});

3. Syncfusion Vue Gantt

特點(diǎn)與優(yōu)勢(shì)：

與Vue集成良好：與Vue框架深度集成，提供流暢的開發(fā)體驗(yàn)。
直觀易用：通過直觀的甘特圖UI，方便處理任務(wù)、依賴項(xiàng)和進(jìn)度。
功能豐富：提供多種甘特圖視圖、任務(wù)分組、篩選等功能。

適用場景：

適用于基于Vue的Web項(xiàng)目管理應(yīng)用。
適用于需要結(jié)構(gòu)化和可視化管理任務(wù)的項(xiàng)目。

使用注意事項(xiàng)：

收費(fèi)產(chǎn)品，需考慮成本因素。
在集成和定制過程中可能需要一定的技術(shù)支持。

github地址：GitHub - syncfusion/ej2-javascript-ui-controls: Syncfusion JavaScript UI controls library offer more than 50+ cross-browser, responsive, and lightweight HTML5 UI controls for building modern web applications.

官網(wǎng)地址：JavaScript 甘特圖 |時(shí)間軸圖 |同步 (syncfusion.com)

定價(jià)：Team license for Syncfusion products

Sync定價(jià).png

Demo圖片示例：

Syncfusion.png

Vue集成文檔：Getting started with Vue Gantt component | Syncfusion

數(shù)據(jù)格式文檔地址：Data binding in Vue Gantt component | Syncfusion

數(shù)據(jù)格式：

<template>
     <div>
        <ejs-gantt ref='gantt' :dataSource="data"></ejs-gantt>
    </div>
</template>
<script>
import { GanttComponent } from "@syncfusion/ej2-vue-gantt";
export default {
  components: {
    'ejs-gantt': GanttComponent
  },
  data: function() {
      return{
            data: [
            {
                TaskID: 1,
                TaskName: 'Project Initiation',
                StartDate: new Date('04/02/2019'),
                EndDate: new Date('04/21/2019'),
                subtasks: [
                    {  TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
                    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50  },
                    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
                ]
            },
            {
                TaskID: 5,
                TaskName: 'Project Estimation',
                StartDate: new Date('04/02/2019'),
                EndDate: new Date('04/21/2019'),
                subtasks: [
                    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
                    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
                    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
                ]
            },
        ],
        };
  },
};
</script>

4. GSTC Gantt

特點(diǎn)與優(yōu)勢(shì)：

綜合管理工具：不僅提供甘特圖功能，還整合了時(shí)間表、日歷等其他管理工具。
靈活適用：適用于多種使用場景，如項(xiàng)目規(guī)劃、活動(dòng)組織等。
易于使用：提供直觀的用戶界面和交互方式，降低使用門檻。

適用場景：

適用于需要綜合時(shí)間管理和調(diào)度功能的項(xiàng)目，如預(yù)訂系統(tǒng)、活動(dòng)安排等。
適用于需要靈活性和多功能性的項(xiàng)目管理場景。

使用注意事項(xiàng)：

可擴(kuò)展性可能相對(duì)有限，需根據(jù)具體需求評(píng)估是否滿足要求。
在面對(duì)復(fù)雜項(xiàng)目或大規(guī)模數(shù)據(jù)時(shí)，可能需要優(yōu)化性能。

地址：Home gantt-schedule-timeline-calendar javascript (typescript) component (neuronet.io)

定價(jià)：Pricing gantt-schedule-timeline-calendar javascript (typescript) component (neuronet.io)

GSTC定價(jià).png

Demo圖片示例：

GSTC.png

數(shù)據(jù)格式文檔地址：Getting started gantt-schedule-timeline-calendar javascript (typescript) component (neuronet.io)

數(shù)據(jù)格式：

const itemsFromDB = [{
    id: "1",
    label: "Item 1",
    rowId: "1",
    time: {
      start: GSTC.api.date("2020-01-01").startOf("day").valueOf(),
      end: GSTC.api.date("2020-01-02").endOf("day").valueOf(),
    },
  },
  {
    id: "2",
    label: "Item 2",
    rowId: "1",
    time: {
      start: GSTC.api.date("2020-02-01").startOf("day").valueOf(),
      end: GSTC.api.date("2020-02-02").endOf("day").valueOf(),
    },
  },
  {
    id: "3",
    label: "Item 3",
    rowId: "2",
    time: {
      start: GSTC.api.date("2020-01-15").startOf("day").valueOf(),
      end: GSTC.api.date("2020-01-20").endOf("day").valueOf(),
    },
  },]

5. vue-ganttastic

特點(diǎn)與優(yōu)勢(shì)：

輕量級(jí)組件：基于Vue3的輕量級(jí)甘特圖組件，易于集成和部署。
簡單易用：提供簡潔明了的API和文檔，降低開發(fā)難度。
良好的展示效果：能夠以圖形化的方式清晰地展示項(xiàng)目進(jìn)度和任務(wù)狀態(tài)。

適用場景：

適用于簡單的項(xiàng)目管理和任務(wù)展示需求。
適用于需要快速集成甘特圖功能的Web應(yīng)用。

使用注意事項(xiàng)：

可擴(kuò)展性相對(duì)較弱，可能不適合復(fù)雜的項(xiàng)目管理需求。
在面對(duì)大規(guī)模數(shù)據(jù)或復(fù)雜交互時(shí)，可能需要額外的優(yōu)化工作。

地址：Live Demos | Vue-Ganttastic (zunnzunn.github.io)

Demo圖片示例：

vue-ganttastic.png

VUE集成文檔：Getting started | Vue-Ganttastic (zunnzunn.github.io)

數(shù)據(jù)格式：

<template>
  <g-gantt-chart
    chart-start="2021-07-12 12:00"
    chart-end="2021-07-14 12:00"
    precision="hour"
    bar-start="myBeginDate"
    bar-end="myEndDate"
  >
    <g-gantt-row label="My row 1" :bars="row1BarList" />
    <g-gantt-row label="My row 2" :bars="row2BarList" />
  </g-gantt-chart>
</template>

<script setup>
import { ref } from "vue"

const row1BarList = ref([
  {
    myBeginDate: "2021-07-13 13:00",
    myEndDate: "2021-07-13 19:00",
    ganttBarConfig: {
      // each bar must have a nested ganttBarConfig object ...
      id: "unique-id-1", // ... and a unique "id" property
      label: "Lorem ipsum dolor"
    }
  }
])
const row2BarList = ref([
  {
    myBeginDate: "2021-07-13 00:00",
    myEndDate: "2021-07-14 02:00",
    ganttBarConfig: {
      id: "another-unique-id-2",
      hasHandles: true,
      label: "Hey, look at me",
      style: {
        // arbitrary CSS styling for your bar
        background: "#e09b69",
        borderRadius: "20px",
        color: "black"
      }
    }
  }
])
</script>

二、結(jié)論

不付費(fèi)使用：DHTMLX Gantt

DHTMLX Gantt作為一款功能全面的甘特圖工具，在不付費(fèi)的情況下即可使用其大部分核心功能，包括任務(wù)管理、依賴關(guān)系顯示和進(jìn)度可視化等。此外，DHTMLX Gantt提供了高度定制性，允許開發(fā)者根據(jù)項(xiàng)目需求調(diào)整外觀和交互方式，從而滿足各種特定的業(yè)務(wù)場景。同時(shí)，其良好的跨平臺(tái)兼容性確保了在不同環(huán)境下的穩(wěn)定運(yùn)行，進(jìn)一步增強(qiáng)了其實(shí)用性。

付費(fèi)使用：Syncfusion Vue Gantt

Syncfusion Vue Gantt是一款與Vue框架深度集成的甘特圖工具，提供流暢的開發(fā)體驗(yàn)和直觀易用的界面。它具備豐富的功能，如多種甘特圖視圖、任務(wù)分組和篩選等，能夠輕松應(yīng)對(duì)復(fù)雜的任務(wù)、依賴項(xiàng)和進(jìn)度管理需求，同時(shí)文檔內(nèi)容清晰。

三、DHTMLX Gantt Demo實(shí)現(xiàn)流程

1.引入

//7.0不支持中文
npm i dhtmlx-gantt@6  -s

2.封裝組件gantt

<template>
    <div ref="gantt"></div>
</template>
 
<script>
import { gantt } from 'dhtmlx-gantt';
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
import moment from "moment";
    
export default {
  name: 'gantt',
  props: {
    tasks: {
      type: Object,
      default () {
        return { data: [], links: [] }
      }
    }
  },

  mounted: function () {
    //日期格式化
    gantt.config.xml_date = "%Y-%m";

    gantt.config.scale_unit = "year";   //按月顯示
    gantt.config.date_scale = "1";      //設(shè)置時(shí)間刻度的格式（X軸） 多個(gè)尺度

    gantt.config.scale_height = 50; //設(shè)置時(shí)間刻度的高度和網(wǎng)格的標(biāo)題

    gantt.config.subscales = [
      { unit: "month", step: 1, date: "%M" }
    ];          //指定第二個(gè)時(shí)間刻度

    //左側(cè)是否自適應(yīng)
    gantt.config.autofit = true;
    //左側(cè)寬
    gantt.config.grid_width = 200;
    //取消連線
    gantt.config.drag_links = false;
    //只讀
    gantt.config.readonly = false;
    //右側(cè)顯示列名
    gantt.config.date_scale = "%Y-%m-%d";
    //自動(dòng)調(diào)整圖表坐標(biāo)軸區(qū)間用于適配task的長度
    gantt.config.fit_tasks = true;
    //彈窗寬
    gantt.config.wide_form = false;
    //漢化
    gantt.locale = {
      date: {
        month_full: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
        month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
        day_short: ["日", "一", "二", "三", "四", "五", "六"]
      },
      labels: {
        dhx_cal_today_button: "今天",
        day_tab: "日",
        week_tab: "周",
        month_tab: "月",
        new_event: "新建日程",
        icon_save: "保存",
        icon_cancel: "關(guān)閉",
        icon_details: "詳細(xì)",
        icon_edit: "編輯",
        icon_delete: "刪除",
        confirm_closing: "請(qǐng)確認(rèn)是否撤銷修改!", //Your changes will be lost, are your sure?
        confirm_deleting: "是否刪除計(jì)劃?",
        section_description: "任務(wù)內(nèi)容:",
        section_time: "時(shí)間范圍:",
        section_type: "類型",
        section_text: "任務(wù)名稱:",
        section_color: "顏色:",

        /* grid columns */

        column_text: "項(xiàng)目節(jié)點(diǎn)名稱",
        column_start_date: "開始時(shí)間",
        column_duration: "持續(xù)時(shí)間",
        column_add: "",

        /* link confirmation */

        link: "關(guān)聯(lián)",
        confirm_link_deleting: "將被刪除",
        link_start: " (開始)",
        link_end: " (結(jié)束)",

        type_task: "任務(wù)",
        type_project: "項(xiàng)目",
        type_milestone: "里程碑",

        minutes: "分鐘",
        hours: "小時(shí)",
        days: "天",
        weeks: "周",
        months: "月",
        years: "年"
      }
    }
    //左側(cè)顯示列名
    gantt.config.columns = [
      { name: "text", label: "任務(wù)名稱", tree: true, width: '*' },
      // { name: "start_date", label: "開始時(shí)間", align: "center" },
      // { name: "end_date", label: "結(jié)束時(shí)間", align: "center" },
      // {
      //   name: "progress", label: "進(jìn)度", align: "center",
      //   template: function (obj) {
      //     return (Math.floor(obj.progress * 100)).toString() + '%'
      //   }
      // },
      // { name: "add", label: "" },
    ];
    //彈出層
    gantt.config.lightbox.sections = [
      { name: "text", height: 70, map_to: "text", type: "textarea", focus: true, width: 200 },
      { name: "time", height: 30, map_to: "auto", type: "time", time_format: ["%Y", "%m", "%d"] },
      {
        name: "color", height: 30, map_to: "color", type: "select", options: [
          { key: "#3db9d3", label: "藍(lán)色" },
          { key: "#33cc33", label: "綠色" },
          { key: "#FF8247", label: "橙色" },
          { key: "#ff6633", label: "紅色" }
        ]
      },
      { name: "description", height: 70, map_to: "description", type: "textarea" }
    ];
    //彈窗標(biāo)題 日期范圍
    gantt.templates.task_time = function (start, end, task) {
      return moment(start).format('YYYY-MM-DD') + " - " + moment(end).format('YYYY-MM-DD');
    };
    //彈窗標(biāo)題 計(jì)劃名稱
    gantt.templates.task_text = function (start, end, task) {
      return task.text;
    };
    gantt.init(this.$refs.gantt);
    gantt.parse(this.$props.tasks);
    let this_ = this
    //添加后觸發(fā)
    gantt.attachEvent("onAfterTaskAdd", function (id, item) {
      console.log("添加后觸發(fā)");
      this_.changeTask();
    });
    //移動(dòng)進(jìn)度后觸發(fā)
    gantt.attachEvent("onAfterTaskDrag", function (id, mode, e) {
      console.log("移動(dòng)進(jìn)度后觸發(fā)");
      this_.changeTask();
    });
    //移動(dòng)任務(wù)后觸發(fā)
    gantt.attachEvent("onAfterTaskMove", function (id, parent, tindex) {
      console.log("移動(dòng)任務(wù)后觸發(fā)");
      this_.changeTask();
    });
    //刪除任務(wù)后觸發(fā)
    gantt.attachEvent("onAfterTaskDelete", function (id, item) {
      console.log("刪除任務(wù)后觸發(fā)");
      this_.changeTask();
    });
    //修改任務(wù)后觸發(fā)
    gantt.attachEvent("onAfterTaskUpdate", function (id, item) {
      console.log("修改任務(wù)后觸發(fā)");
      this_.changeTask();
    })
    //保存驗(yàn)證
    gantt.attachEvent("onLightboxSave", function (id, item) {
      if (!item.text) {
        gantt.message({ type: "error", text: "請(qǐng)?zhí)顚懭蝿?wù)名稱!" });
        return false;
      }
      return true;
    });
  }
}
</script>

3.使用甘特圖插件gantt

<template>
    <div class="container">
        <gantt class="left-container" :tasks="tasks"></gantt>
    </div>
</template>
 
<script>
import Gantt from '@/components/Gantt.vue';
// 中文引入
// import "dhtmlx-gantt/codebase/locale/locale_cn.js";
export default {
  name: 'app',
  components: { Gantt },
  data () {
    return {
      tasks: {
        data: [
          {
            id: 1, text: "合同簽訂", start_date: "2021-01-01", duration: 45, order: 10,
            progress: 0.4, open: true
          },
          {
            id: 11, text: "第一次付款", start_date: "2021-03-01", duration: 45, order: 10,
            progress: 0.6, parent: 1
          },
          {
            id: 12, text: "第二次付款", start_date: "2021-12-01", duration: 45, order: 20,
            progress: 0.6, parent: 1
          },
          {
            id: 13, text: "第三次付款", start_date: "2022-01-01", duration: 45, order: 20,
            progress: 0.6, parent: 1
          },
          {
            id: 2, text: "項(xiàng)目實(shí)施", start_date: "2021-01-01", duration: 45, order: 20,
            progress: 0.4, open: true
          },
          {
            id: 21, text: "準(zhǔn)備階段", start_date: "2021-03-01", duration: 78, order: 10,
            progress: 0.6, parent: 2
          },
          {
            id: 22, text: "設(shè)計(jì)階段", start_date: "2021-04-01", duration: 100, order: 20,
            progress: 0.6, parent: 2
          },
          {
            id: 24, text: "系統(tǒng)開發(fā)", start_date: "2021-06-01", duration: 80, order: 40,
            progress: 1, parent: 2
          },
          {
            id: 25, text: "系統(tǒng)測試", start_date: "2021-10-01", duration: 40, order: 50,
            progress: 0.4, parent: 2
          },
          {
            id: 26, text: "上線準(zhǔn)備", start_date: "2021-12-01", duration: 45, order: 60,
            progress: 0.4, parent: 2
          }
        ],
        // 脫線
        links: [
          // { id: 1, source: 1, target: 2, type: '0' }
        ]
      },
    }
  }
}
</script>

<style>
.container {
  height: 450px;
  width: 100%;
}
.left-container {
  overflow: hidden;
  position: relative;
  height: 450px;
}
</style>

4.效果圖

demo-1.png

5.使用DHTMLX Gantt的注意事項(xiàng)

日期處理依賴: 在使用DHTMLX Gantt之前，確保已經(jīng)提前安裝了moment日期處理npm包。moment包是DHTMLX Gantt進(jìn)行日期處理的重要依賴，請(qǐng)確保版本兼容且正確安裝。
配置準(zhǔn)確性: 配置DHTMLX Gantt時(shí)，必須嚴(yán)格按照官方提供的sample或API文檔進(jìn)行。錯(cuò)誤的配置可能導(dǎo)致功能異?；蚪缑骘@示問題。
避免大版本升級(jí): 在使用dhtmlx-gantt時(shí)，建議盡量不要輕易升級(jí)大版本。因?yàn)閺陌姹?開始，很多API功能變?yōu)榱耸召M(fèi)項(xiàng)目。升級(jí)大版本可能會(huì)引入不兼容的API變動(dòng)和額外的收費(fèi)要求。如果確實(shí)需要升級(jí)，請(qǐng)務(wù)必先詳細(xì)閱讀升級(jí)指南，并評(píng)估潛在的影響。

四、Syncfusion Vue Gantt Demo實(shí)現(xiàn)流程

1.安裝依賴

npm install @syncfusion/ej2-vue-gantt --save

2.可進(jìn)行編輯的SyncfusionGantt Demo

<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :toolbar="toolbar" :columns = "columns" :editSettings= "editSettings"></ejs-gantt>
    </div>
</template>
<script>
import { GanttComponent, Edit  } from "@syncfusion/ej2-vue-gantt";

export default {
  components: {
    'ejs-gantt': GanttComponent
  },
  data: function() {
      return{
            data: [
            {
                TaskID: 1,
                TaskName: 'Project Initiation',
                StartDate: new Date('04/02/2019'),
                EndDate: new Date('04/21/2019'),
                subtasks: [
                    {  TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
                    { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50  },
                    { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
                ]
            },
            {
                TaskID: 5,
                TaskName: 'Project Estimation',
                StartDate: new Date('04/02/2019'),
                EndDate: new Date('04/21/2019'),
                subtasks: [
                    { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
                    { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
                    { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
                ]
            },
        ],
            height: '450px',
            taskFields: {
                id: 'TaskID',
                name: 'TaskName',
                startDate: 'StartDate',
                endDate: 'EndDate',
                duration: 'Duration',
                progress: 'Progress',
                child: 'subtasks'
            },
            columns: [
                { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
                { field: 'TaskName', headerText: 'Task Name', width: '250' },
                { field: 'StartDate', headerText: 'Start Date', width: '150' },
                { field: 'Duration', headerText: 'Duration', width: '150' },
                { field: 'Progress', headerText: 'Progress', width: '150' },
            ],
            toolbar: ['Edit'],
             editSettings: {
                allowTaskbarEditing:true
            },
      };
  },
  provide: {
      gantt: [ Edit ]
  }
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css';
@import '../node_modules/@syncfusion/ej2-treegrid/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-gantt/styles/material.css";
</style>

3.效果圖

Syncfusion-Demo-2.png

4.使用的注意事項(xiàng)

上云需購買許可證

Syncfusion-info-1.png

Vue Gantt API component - Syncfusion

需自行配置本地化語言庫

例：

<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" locale = "de-DE"></ejs-gantt>
    </div>
</template>
<script>
import Vue from "vue";
import { L10n, setCulture } from '@syncfusion/ej2-base';
import { GanttPlugin } from "@syncfusion/ej2-vue-gantt";
import { projectNewData } from './data-source.js';

setCulture('de-DE');

L10n.load({
  'de-DE': {
      'gantt': {
           "id": "ID",
            "name": "名稱",
            "startDate": "開始時(shí)間",
            "duration": "持續(xù)時(shí)間",
            "progress": "進(jìn)度",
     }
  }
});

Vue.use(GanttPlugin);
export default {
  data: function() {
      return{
            data: projectNewData,
            height: '450px',
            taskFields: {
                id: 'TaskID',
                name: 'TaskName',
                startDate: 'StartDate',
                duration: 'Duration',
                progress: 'Progress',
                child: 'subtasks'
            }
      };
  }
};
</script>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue中的甘特圖組件庫調(diào)研

Vue中的甘特圖組件庫調(diào)研

一、甘特圖組件庫

1. DHTMLX Gantt

2. Bryntum Gantt

3. Syncfusion Vue Gantt

4. GSTC Gantt

5. vue-ganttastic

二、結(jié)論

不付費(fèi)使用：DHTMLX Gantt

付費(fèi)使用：Syncfusion Vue Gantt

三、DHTMLX Gantt Demo實(shí)現(xiàn)流程

1.引入

2.封裝組件gantt

3.使用甘特圖插件gantt

4.效果圖

5.使用DHTMLX Gantt的注意事項(xiàng)

四、Syncfusion Vue Gantt Demo實(shí)現(xiàn)流程

1.安裝依賴

2.可進(jìn)行編輯的SyncfusionGantt Demo

3.效果圖

4.使用的注意事項(xiàng)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue中的甘特圖組件庫調(diào)研

一、甘特圖組件庫

1. DHTMLX Gantt

2. Bryntum Gantt

3. Syncfusion Vue Gantt

4. GSTC Gantt

5. vue-ganttastic

二、結(jié)論

不付費(fèi)使用：DHTMLX Gantt

付費(fèi)使用：Syncfusion Vue Gantt

三、DHTMLX Gantt Demo實(shí)現(xiàn)流程

1.引入

2.封裝組件gantt

3.使用甘特圖插件gantt

4.效果圖

5.使用DHTMLX Gantt的注意事項(xiàng)

四、Syncfusion Vue Gantt Demo實(shí)現(xiàn)流程

1.安裝依賴

2.可進(jìn)行編輯的SyncfusionGantt Demo

3.效果圖

4.使用的注意事項(xiàng)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、甘特圖組件庫

二、結(jié)論

三、DHTMLX Gantt Demo實(shí)現(xiàn)流程

四、Syncfusion Vue Gantt Demo實(shí)現(xiàn)流程