jQuery Gantt Package是一个真正的跨平台，基于HTML5 / jQuery的本地实现，具备2个不同的gantt小部件，可满足您所有基于gantt的可视化需要。还带有ASP.NET WebControl和MVC扩大，可轻松集成到现有利用中。
在Visual Studio中创立一个新的ASP.NET我的项目：
VS 2012 :FILE --> New --> Project --> Installed --> Templates --> Other Language --> TypeScript，创立一个我的项目。
甘特包包含必要的甘特TypeScript接口，以帮忙你开发你的Web应用程序，就像其余类型平安语言一样，编译时查看。
1) Gantt Widget源码JS文件
首先，你须要甘特小部件所需的JS源文件。这些文件在<装置门路>/Src文件夹中。把这个文件夹复制到下面的Project文件夹外面（尽管这个文件夹的大小十分大，然而它蕴含了所有Themes、locales等所须要的CSS等，并不是所有的CSS都会被加载到你的页面外面）。
持续删除这个Src文件夹外面的bin文件夹。
而后在我的项目的解决方案资源管理器中点击 "显示所有文件 "工具条项来显示这个新蕴含的Src文件夹，并将其蕴含在我的项目中。
**
2）实用JS文件样本
**一些带有实用功能的JS文件，能够在网格中进行内嵌编辑等，这些文件在<install path>/Samples/Scripts文件夹中。将上述装置门路中的Scripts文件夹的内容复制到你的我的项目文件夹中的Scripts文件夹中（当你创立一个新我的项目时，我的项目文件夹中会主动创立一个Scripts文件夹）。
而后依照上一步的步骤将新增加的脚本文件蕴含到你的我的项目中。
3) JSON数据样本
创立一个SampleData.json文件，其中蕴含要在甘特图中显示的示例工作列表。
SampleData.json内容：
[{
"Name" : "Task 1","ID" : 1,"StartTime" : "2012-02-02T00:00:00Z","Effort" : "8:00:00","Description" : "Description of Task 1"},
{
"Name" : "Task 2","ID" : 2,"PredecessorIndices" : "1","StartTime" : "2012-02-03T00:00:00Z","Effort" : "16:00:00","Description" : "Description of Task 2"},
{
"Name" : "Task 3","ID" : 3,"StartTime" : "2012-02-02T00:00:00Z","Effort" : "1.12:30:00","ProgressPercent" : 90,"Description" : "Description of Task 3" },
{
"Name" : "Child Task 1","ID" : 4,"IndentLevel" : 1,"StartTime" : "2012-02-03T00:00:00Z","Effort" : "8:00:00","ProgressPercent" : 75,"Description" : "Description of Task 3/Child Task 1"},
{
"Name" : "Child Task 2","ID" : 5,"IndentLevel" : 1,"PredecessorIndices" : "4+8","Description" : "Description of Task 3/Child Task 2"},
{
"Name" : "Grand Child Task 1","ID" : 6,"IndentLevel" : 2,"StartTime" : "2012-02-03T00:00:00Z","Effort" : "8:00:00","Description" : "Description of Task 3/Child Task 1/Grand Child 1"},
{
"Name" : "Grand Child Task 2","ID" : 7,"IndentLevel" : 2,"StartTime" : "2012-02-03T00:00:00Z","Effort" : "16:00:00","Description" : "Description of Task 3/Child Task 1/Grand Child 2"},
{
"Name" : "Child Task 3","ID" : 8,"IndentLevel" : 1,"StartTime" : "2012-02-02T00:00:00Z","Effort" : "16:00:00","Description" : "Description of Task 3/Child Task 3"},
{
"Name" : "Task 4","ID" : 9,"StartTime" : "2012-02-02T00:00:00Z","Effort" : "00:00:00","ProgressPercent" : 60,"Description" : "Description of Task 4"},
{
"Name" : "Task 5","ID" : 10,"StartTime" : "2012-02-02T00:00:00Z","Effort" : "8:00:00","PredecessorIndices" : "3+8","Description" : "Description of Task 5" },
{
"Name" : "Child Task 1","ID" : 11,"IndentLevel" : 1,"StartTime" : "2012-02-02T00:00:00Z","Effort" : "16:00:00","Description" : "Description of Task 5/Child Task 1"},
{
"Name" : "Child Task 2","ID" : 12,"PredecessorIndices" : "11SS","IndentLevel" : 1,"StartTime" : "2012-02-02T00:00:00Z","Effort" : "8:00:00","Description" : "Description of Task 5/Child Task 2"},
{
"Name" : "Task 6","ID" : 13,"StartTime" : "2012-02-02T00:00:00Z","Effort" : "1.16:00:00","Description" : "Description of Task 6" },
{
"Name" : "Child Task 1","ID" : 14,"IndentLevel" : 1,"StartTime" : "2012-02-02T00:00:00Z","Effort" : "1.20:00:00","Description" : "Description of Task 6/Child Task 1" },
{
"Name" : "Grand Child Task 1","ID" : 15,"StartTime" : "2012-02-04T00:00:00Z","Effort" : "1.00:00:00","IndentLevel" : 2,"Description" : "Description of Task 6/Child Task 2"}]
4）蕴含甘特小部件的HTML文件
在你的我的项目中创立一个新的HTML文件，并援用以下源文件。记得在上面最初一个援用中链接到正确版本的RadiantQ jQuery Gantt。
<head>
<title></title><link href="Src/Styles/jQuery-ui-themes/smoothness/jquery-ui.css" rel="stylesheet" /><link href="Src/Styles/radiantq.gantt.default.css" rel="stylesheet" /><link href="Src/Styles/VW.Grid.css" rel="stylesheet" /><script src="Src/Scripts/jquery-1.11.2.min.js" type="text/javascript"></script><script src="Src/Scripts/jquery-ui-1.11.4/jquery-ui.min.js" type="text/javascript"></script><script type="text/javascript" src="Src/Scripts/jquery.layout-latest.min.js"></script><script src="Src/Scripts/Utils/date.js" type="text/javascript"></script><script src="Src/ResourceStrings/en-US.js" type="text/javascript"></script><script src='Src/Scripts/VW.Grid.1.min.js' type='text/javascript'></script><script src='Src/Scripts/RadiantQ-jQuery.gantt.5.0.trial.min.js' type='text/javascript'></script></head>
<body>
<div id="pagecontent" style="height: 600px;"> <div id="gantt_container" style="height: 100%;"> </div></div></body>
5）TypeScript文件
在你的我的项目中，在该HTML旁边增加一个新的TypeScript文件(myApp.ts)，并援用html中的后果js。
<head>
other script fils.<script src=myApp.js type='text/javascript'></script></head>
6）在TypeScript文件外面创立Ganttcontrol小部件。
$.ajax({
type: "GET",dataType: 'json',url: 'GanttControlSkeleton.json',converters:{ "text json": function (data) { //console.log(data); return $.parseJSON(data, true /*converts date strings to date objects*/ , true /*converts ISO dates to local dates*/ ); }},success: function (data) { loadGantt(data);}});
function loadGantt(datasourcejson) {
var columns = [ { field: "Activity_M().ID_M()", title: "ID", width: 20 }, { field: "Activity_M().ActivityName_M()", title: "Activity Name", width: 200, editor: RadiantQ.Default.Template.ProjectGanttExpandableTextboxEditor(), template: RadiantQ.Default.Template.ProjectGanttExpandableTextBlockTemplate() }, { field: "Activity_M().StartTime_M()", title: "StartTime", width: 100, format: "MM/dd/yy", cellalign: "center", editor: "<input data-bind=' ValueBinder.ActivityTimeBinder:Activity_M().StartTime_M' />" }, { field: "Activity_M().EndTime_M()", title: "EndTime", width: 100, format: "MM/dd/yy", cellalign: "center", editor: "<input data-bind='value:Activity_M().EndTime_M' data-getvalueName='getDate' data-setvaluename='setDate' data-valueUpdate='onBlur' data-role="DateTimePicker" />" }, { field: "Activity_M().Effort_M()", title: "Effort", format: "" /*to call the .toString()*/, width: 100, editor: "<input data-bind='value:Activity_M().Effort_M' style='height:18px' data-role="DurationPicker" />" }, { field: "Activity_M().ProgressPercent_M()", title: "ProgressPercent", width: 100, editor: "<input style='height:18px' data-bind='value:Activity_M().ProgressPercent_M' data-role="spinner" data-options='{"min":0, "max": 100}' />" }, { field: "Activity_M().Assignments_M()", title: "Assignments", iseditable: false, template: '<div> ${ RadiantQ.Gantt.ValueConverters.ConverterUtils.GetResourcesText(data.Activity_M().Assignments_M(), false) } </div>', width: 200 }, { field: "Activity_M().PredecessorIndexString_M()", title: "PredecessorIndex", template: "<div>${data.PredecessorIndexString || '' }</div>", editor: "<input data-bind='value:PredecessorIndexString'/>", width: 150 } ];var ganttControl: GanttControl;var anchorTime = datasourcejson[0].StartTime["clone"]();var $gantt_container = $('#gantt_container');$gantt_container.GanttControl({ ProjectStartDate: anchorTime, DataSource: datasourcejson, GanttTableOptions: { columns: columns }, IDBinding: new RadiantQ.BindingOptions("ID"), NameBinding: new RadiantQ.BindingOptions("Name"), IndentLevelBinding: new RadiantQ.BindingOptions("IndentLevel"), StartTimeBinding: new RadiantQ.BindingOptions("StartTime"), EffortBinding: new RadiantQ.BindingOptions("Effort"), PredecessorIndicesBinding: new RadiantQ.BindingOptions("PredecessorIndices"), ProgressPercentBinding: new RadiantQ.BindingOptions("ProgressPercent"), DescriptionBinding: new RadiantQ.BindingOptions("Description"), TimeRangeHighlightBehavior: RadiantQ.Gantt.TimeRangeHighlightBehavior.HighlightInChartOnHeaderMouseHover, GanttChartTemplateApplied: function (sender , args) { ganttControl = <GanttControl>$gantt_container.data("GanttControl"); var $ganttChart = args.element; $ganttChart.GanttChart({ AnchorTime: anchorTime }); }});};
最初，看看这个主题，通知你如何清理我的项目中的Src文件夹，删除不必要的文件。