jQuery Gantt не инициализируется

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