jQuery甘特图未初始化

Question

我不太确定为什么我的 jQuery Gantt 不起作用 - 我已经按照网站上看到的确切示例进行了操作。到目前为止，这是我的代码：

$(function () {

    "use strict";

    $(".gantt").gantt({
        source: [{
            name: "Sprint 0",
            desc: "Analysis",
            values: [{
                from: "/Date(1320192000000)/",
                to: "/Date(1322401600000)/",
                label: "Requirement Gathering",
                customClass: "ganttRed"
            }]
        }, {
            name: " ",
            desc: "Scoping",
            values: [{
                from: "/Date(1322611200000)/",
                to: "/Date(1323302400000)/",
                label: "Scoping",
                customClass: "ganttRed"
            }]
        }, {
            name: "Sprint 1",
            desc: "Development",
            values: [{
                from: "/Date(1323802400000)/",
                to: "/Date(1325685200000)/",
                label: "Development",
                customClass: "ganttGreen"
            }]
        }, {
            name: " ",
            desc: "Showcasing",
            values: [{
                from: "/Date(1325685200000)/",
                to: "/Date(1325695200000)/",
                label: "Showcasing",
                customClass: "ganttBlue"
            }]
        }, {
            name: "Sprint 2",
            desc: "Development",
            values: [{
                from: "/Date(1326785200000)/",
                to: "/Date(1325785200000)/",
                label: "Development",
                customClass: "ganttGreen"
            }]
        }, {
            name: " ",
            desc: "Showcasing",
            values: [{
                from: "/Date(1328785200000)/",
                to: "/Date(1328905200000)/",
                label: "Showcasing",
                customClass: "ganttBlue"
            }]
        }, {
            name: "Release Stage",
            desc: "Training",
            values: [{
                from: "/Date(1330011200000)/",
                to: "/Date(1336611200000)/",
                label: "Training",
                customClass: "ganttOrange"
            }]
        }, {
            name: " ",
            desc: "Deployment",
            values: [{
                from: "/Date(1336611200000)/",
                to: "/Date(1338711200000)/",
                label: "Deployment",
                customClass: "ganttOrange"
            }]
        }, {
            name: " ",
            desc: "Warranty Period",
            values: [{
                from: "/Date(1336611200000)/",
                to: "/Date(1349711200000)/",
                label: "Warranty Period",
                customClass: "ganttOrange"
            }]
        }],
        navigate: "scroll",
        scale: "weeks",
        maxScale: "months",
        minScale: "days",
        itemsPerPage: 10,
        onItemClick: function (data) {
            alert("Item clicked - show some details");
        },
        onAddClick: function (dt, rowId) {
            alert("Empty space clicked - add an item!");
        },
        onRender: function () {
            if (window.console && typeof console.log === "function") {
                console.log("chart rendered");
            }
        }
    });

    $(".gantt").popover({
        selector: ".bar",
        title: "I'm a popover",
        content: "And I'm the content of said popover."
    });
});

我在这里添加了一个链接来展示它：http://jsfiddle.net/Zn2ML/

不知道为什么它看起来不像这样：http://taitems.github.com/jQuery.Gantt/

Answer 1

您似乎缺少包含来自以下位置的 javascript 文件和 css 文件：

http://taitems.github.com/jQuery.Gantt/

从一个简单的示例开始，不要忘记包含示例中的所有 css 和 javascript，然后开始进行代码更新以使其适合您的需求。

Answer 2

看这个例子

没有为此加载图标...

你编码

.fn-gantt .dataPanel {
    margin-left: 0px;
    border-right: 1px solid #DDD;
    background-image: url(../img/grid.png);
    background-repeat: repeat;
    background-position: 24px 24px;
}

更改为：

.fn-gantt .dataPanel {
    margin-left: 0px;
    border-right: 1px solid #DDD;
    background-image: url(http://taitems.github.com/jQuery.Gantt/img/grid.png);
    background-repeat: repeat;
    background-position: 24px 24px;
}

jsFiddle example