关于wex5如何使用dhtmlxGantt甘特图

本人属于新手，写此文章只是为了锻炼，因为最近在wex5中用到dhtmlxGantt甘特图，所以就写了这篇文章，因为当时我也是第一次使用，网上找到的都是跟平台无关的，所以就写此文章，希望能帮上第一次用平台来使用dhtmlxGantt的人，本章只适用于bex5或者wex5中(下一篇关于dhtmlxGantt甘特图的一些设置)

第一步：下载dhtmlxGantt代码包

下载dxhtmlGantt代码包，解压后会得到两个文件夹codebase和samples。

下载地址：https://dhtmlx.com/docs/products/dhtmlxGantt/#licensing

文档地址：https://docs.dhtmlx.com/gantt/api__refs__gantt.html

第二步：在平台中引用代码

本章使用的是wex5，把代码包codebase复制到wex5中的随便一个自己写的目录下，然后创建一个.w文件，该文件随便在哪个目录下都行。创建好了之后，就可以在页面中引用代码包了，主要引用有两个 dhtmlxgantt.js 和 dhtmlxgantt.css ，把这两个引用进去之后就可以初始化界面了

    require("$UI/ProjectManagePC/common/codebase/dhtmlxgantt");//可参考，路径设置成自己的就行
    require("css!$UI/ProjectManagePC/common/codebase/dhtmlxgantt").load();//同上

第三步：初始化dhtmlxGantt

引用之后在.w中拖一个div过来，给一个class “gantt_here”，然后进入modelLoad方法中初始化dhtmlxGantt。gantt.init(".gantt_here"); // 初始化任务。初始化之后的页面是没有数据的，所以接下来我们加载数据

第四步：加载静态数据

var tasks={
    data:[
        {id:1, text:"项目 #1", start_date:"2016-05-01", duration:11, progress:0.6, open:true},
        { {id:2, text:"项目 #1", start_date:"2016-05-01", duration:11, progress:1, open:true},
        {id:3, text:"项目 #1", start_date:"2016-05-01", duration:11, progress:0.5, open:true},
        {id:4, text:"项目 #1", start_date:"2016-05-01", duration:11, progress:0.5, open:true},
        {id:5, text:"项目 #1", start_date:"2016-05-01", duration:11, progress:1, open:true},
        {id:6, text:"项目 #1", start_date:"2016-05-01", duration:11, progress:0.6, open:true}
    ],
    links:[
        {id:1, source:1, target:2, type:"1"},
        {id:2, source:1, target:3, type:"1"},
        {id:3, source:3, target:4, type:"1"},
        {id:4, source:4, target:5, type:"0"},
        {id:5, source:5, target:6, type:"0"}
    ]
};
此为静态数据，可用于测试用

代码可直接引用，我们想要把数据加载进去，需要用到parse方法

        gantt.config.xml_date = "%Y-%m-%d";// 设置时间格式，和html中设置时间格式一样
        gantt.init(".gantt_here"