0

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/

4

2 に答える 2

2

次のJavaScriptファイルとcssファイルをインクルードしていないようです:

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

簡単な例から始めて、例のようにすべての css と javascript を含めることを忘れないでください。次に、ニーズに合うようにコードの更新を開始します。

于 2013-03-02T16:13:20.517 に答える
0

この例を参照してください

アイコンはこのためにロードされません...

あなたのコード

.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 の例

于 2013-03-02T16:39:42.753 に答える