尝试将 json 文件加载到 Jquery.gantt答案

【问题标题】：Trying to load a json file to the Jquery.gantt尝试将 json 文件加载到 Jquery.gantt
【发布时间】：2016-06-21 04:32:10
【问题描述】：

我正在使用 jquery 插件创建一个名为 Jquery.Gantt 的甘特图我想加载一个 json 文件，但不幸的是它没有加载。这是 json 文件的内容。它通过 ajax 加载 json 文件，但不渲染。

[
    {
        "name": "WORK IN PROGRESS (WIP)  MEETING",
        "desc": ""
    },{
        "name":"",
        "desc": "WIP Meeting",
        "by": "TEST DATA",
        "values": [{
            "from": "/Date(2013/05/22)/",
            "to": "/Date(2013/05/22)/",
            "customClass": "ganttGreen"
        },{
            "from": "/Date(2013/06/05)/",
            "to": "/Date(2013/06/05)/",
            "customClass": "ganttGreen"
        },{
            "from": "/Date(2013/06/19)/",
            "to": "/Date(2013/06/19)/",
            "customClass": "ganttGreen"
        },{
            "from": "/Date(2013/07/03)/",
            "to": "/Date(2013/07/03)/",
            "customClass": "ganttGreen"
        },{
            "from": "/Date(2013/07/17)/",
            "to": "/Date(2013/07/17)/",
            "customClass": "ganttGreen"
        },{
            "from": "/Date(2013/07/31)/",
            "to": "/Date(2013/07/31)/",
            "customClass": "ganttGreen"
        },{
            "from": "/Date(August 7, 2013)/",
            "to": "/Date(August 7, 2013)/",
            "customClass": "ganttGreen"
        },{
            "from": "/Date(August 14, 2013)/",
            "to": "/Date(August 14, 2013)/",
            "customClass": "ganttGreen"
        },{
            "from": "/Date(August 21, 2013)/",
            "to": "/Date(August 21, 2013)/",
            "customClass": "ganttGreen"
        },{
            "from": "/Date(August 28, 2013)/",
            "to": "/Date(August 28, 2013)/",
            "customClass": "ganttGreen"
        }]
    },{
        "name": "OVERALL EVENT COSTINGS",
        "desc": ""
    },{
        "name": "a) Budget",
        "desc": "Submission of preliminary budget",
        "by": "TEST DATA"
    },{
        "name": "a) Budget",
        "desc": "Submission of revised budget",
        "by": "TEST DATA"
    },{
        "name": "",
        "desc": "Confirmation and Sign-off of Budget",
        "by": "TEST DATA ",
        "values": [{
            "from": "/Date(July 1, 2013)/",
            "to": "/Date(July 7, 2013)/",
            "customClass": "ganttRed"
        }]
    },{
        "name": "",
        "desc": "Billing of Deposits and Invoices",
        "by": "TEST DATA",
        "values": [{
            "from": "/Date(July 1, 2013)/",
            "to": "/Date(July 7, 2013)/",
            "customClass": "ganttRed"
        }]
    },{
        "name": "",
        "desc": "Submission of final budget",
        "by": "TEST DATA",
        "values": [{
            "from": "/Date(August 5, 2013)/",
            "to": "/Date(August 18, 2013)/",
            "customClass": "ganttRed"
        }]
    },{
        "name": "",
        "desc": "Confirmation and Sign-off of Final Budget",
        "by": "TEST DATA",
        "values": [{
            "from": "/Date(August 12, 2013)/",
            "to": "/Date(August 27, 2013)/",
            "customClass": "ganttRed"
        }]
    },{
        "name": "",
        "desc": "Billing of Balance payments Invoices",
        "by": "TEST DATA",
        "values": [{
            "from": "/Date(September 9, 2013)/",
            "to": "/Date(September 15, 2013)/",
            "customClass": "ganttRed"
        }]
    },{
        "name":"EVENT CONCEPT, ID and TAGLINE"
    },{
        "name":"a) Event  Concept based on revised event ID and tagline",
        "desc":"Propose / Initial Event Concept",
        "by":"TEST DATA",
        "values": [{
            "from": "/Date(April 1, 2013)/",
            "to": "/Date(April 7, 2013)/",
            "customClass": "ganttRed"
        }]
    },{
        "name":"",
        "desc":"Revise Event Concept based on feedback",
        "by":"TEST DATA",
        "values": [{
            "from": "/Date(May 6, 2013)/",
            "to": "/Date(May 12, 2013)/",
            "customClass": "ganttRed"
        }]
    },{
        "name":"",
        "desc":"Confirmation on Event Concept",
        "by":"TEST DATA",
        "values": [{
            "from": "/Date(May 20, 2013)/",
            "to": "/Date(May 26, 2013)/",
            "customClass": "ganttRed"
        }]
    }
]

这是我激活插件的代码。

$(".gantt-chart").gantt({
  itemsPerPage: 15,
  source: "../../public/js/gantt-sample.json",
  scale: "days",
  minScale: "days",
  maxScale: "months",
  navigate: "scroll",
  onItemClick: function(data) {
    console.log("Item clicked - show some details");
  },
  onAddClick: function(dt, rowId) {
    console.log("Empty space clicked - add an item!");
  },
  onRender: function() {
    console.log("chart rendered");
  }
});

【问题讨论】：

我忘了说我收到了一个错误：“TypeError: e is undefined” 我通过 jsonlint 检查了我的 json 文件，它是有效的。
确保js代码能够访问指定路径下的json文件。这个插件接受 url 和 javascript 数组作为源。因此，要进行测试，请使用源数据声明一个变量并将其作为源传递。

标签： jquery json gantt-chart

【解决方案1】：

显然我必须使用 Jquery 2。我使用的是 jquery 1.10.x。

【讨论】：