AnyGantt是基于JavaScript的高級解決方案，用于構建復雜且信息豐富的甘特圖。它完全跨瀏覽器和跨平臺，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或簡單的HTML頁面。
點擊下載AnyGantt正式版
使用JavaScript庫創建甘特圖，并將項目管理工作提高到一個新水平。
今年早些時候，我的團隊正在尋找一種項目管理工具，該工具可以幫助我們根據某些特定的時間表繪制與我們的應用程序開發項目相關的各種任務。經過研究，我們最終確定了甘特圖。但是，有些人認為Gantts的創建很復雜。不對！借助眾多的 JavaScript圖表庫，數據可視化現在變得簡單，靈活且可嵌入。
在我們的情況下，我們選擇使用AnyChart的JS Charts庫是因為它的易用性，廣泛的文檔，用于試用的靈活代碼場以及其他強大功能。
在本教程中，我將指導您如何使用此數據可視化庫創建簡單的交互式甘特圖。這就是我們要做的，您可以在本教程的結尾處獲得用于創建這種甘特圖的全部代碼：
分4步創建JS甘特圖
讓我們動手，使用JavaScript庫創建一個簡單的甘特圖，用于計劃和監視項目活動。
在此JS圖表教程中，我們將遵循以下四個步驟：
-
步驟1：準備資料
-
步驟2：獲取依賴關系
-
步驟3：聲明圖表容器
-
步驟4：渲染甘特圖
步驟1：準備資料
使用JavaScript構建甘特圖的第一步是準備將要顯示的數據。AnyChart庫要求使用樹數據模型表示數據。
在此模型中，數據被組織為分層的樹狀結構，其中父子關系用于連接各種數據項。
這樣，父數據項將具有一個children數據字段，其中子項被聲明為數組。
讓我向您展示我所談論的示例：
var data = [{
id: "1",
name: "Development Life Cycle",
actualStart: Date.UTC(2018, 01, 02),
actualEnd: Date.UTC(2018, 06, 15),
children: [{
id: "1_1",
name: "Planning",
actualStart: Date.UTC(2018, 01, 02),
actualEnd: Date.UTC(2018, 01, 22),
connectTo: "1_2",
connectorType: "finish-start",
progressValue: "75%"
},
// more data goes here
]
}];
步驟2：獲取依賴關系
AnyChart利用基于模塊的極簡方法，使您僅獲得項目必不可少的那些依賴項，從而極大地縮小了部署代碼的大小，從而提高了性能。
為了創建甘特圖，我們將在<head>網頁的部分中添加以下Core和Gantt模塊。
<head>
<script src="http://cdn.anychart.com/releases/8.6.0/js/anychart-core.min.js"></script>
<script src ="http://cdn.anychart.com/releases/8.6.0/js/anychart-gantt.min.js"></script>
</head>
步驟3：聲明圖表容器
然后，讓我們創建一個容器，甘特圖將加載到該容器。
<body>
<div id="container"></div>
<body>
請注意，我已經給了<div>元素id的“container”在下一步被引用。
步驟4：渲染甘特圖
最后，我們將按照以下步驟繪制甘特圖：
通過將準備好的數據傳遞給anychart.data.tree()方法來創建數據樹。對于第二個參數，我們將其指定為“as-tree”。
var treeData = anychart.data.tree(data, "as-tree");
通過調用anychart.ganttProject(）圖表構造函數創建項目甘特圖：
var chart = anychart.ganttProject();
通過將創建的數據樹傳遞給圖表的data()方法來設置數據：
chart.data(treeData);
配置時間軸的縮放比例，直到項目結束為止：
chart.getTimeline().scale().maximum(Date.UTC(2018, 06, 30));
參考id我們之前設置的圖表容器：
chart.container("container");
啟動繪制圖表：
chart.draw();
在時間軸的寬度內擬合指定的活動：
chart.fitAll();
這是我用于在上圖中創建甘特圖的全部代碼：
（您也可以在此CodePen存儲庫上查看代碼）。
<html>
<head>
<script src="http://cdn.anychart.com/releases/8.6.0/js/anychart-core.min.js"></script>
<script src ="http://cdn.anychart.com/releases/8.6.0/js/anychart-gantt.min.js"></script>
</head>
<body>
<div id = "container" ></div>
<script>
anychart.onDocumentReady(function () {
// create data
var data = [{
id: "1",
name: "Development Life Cycle",
actualStart: Date.UTC(2018, 01, 02),
actualEnd: Date.UTC(2018, 06, 15),
children: [{
id: "1_1",
name: "Planning",
actualStart: Date.UTC(2018, 01, 02),
actualEnd: Date.UTC(2018, 01, 22),
connectTo: "1_2",
connectorType: "finish-start",
progressValue: "75%"
},
{
id: "1_2",
name: "Design and Prototyping",
actualStart: Date.UTC(2018, 01, 23),
actualEnd: Date.UTC(2018, 02, 20),
connectTo: "1_3",
connectorType: "start-start",
progressValue: "60%"
},
{
id: "1_3",
name: "Evaluation Meeting",
actualStart: Date.UTC(2018, 02, 23),
actualEnd: Date.UTC(2018, 02, 23),
connectTo: "1_4",
connectorType: "start-start",
progressValue: "80%"
},
{
id: "1_4",
name: "Application Development",
actualStart: Date.UTC(2018, 02, 26),
actualEnd: Date.UTC(2018, 04, 26),
connectTo: "1_5",
connectorType: "finish-finish",
progressValue: "90%"
},
{
id: "1_5",
name: "Testing",
actualStart: Date.UTC(2018, 04, 29),
actualEnd: Date.UTC(2018, 05, 15),
connectTo: "1_6",
connectorType: "start-finish",
progressValue: "60%"
},
{
id: "1_6",
name: "Deployment",
actualStart: Date.UTC(2018, 05, 20),
actualEnd: Date.UTC(2018, 05, 27),
connectTo: "1_7",
connectorType: "start-finish",
progressValue: "100%"
},
{
id: "1_7",
name: "Maintenance",
actualStart: Date.UTC(2018, 05, 30),
actualEnd: Date.UTC(2018, 06, 11),
progressValue: "40%"
},
]
}];
// create a data tree
var treeData = anychart.data.tree(data, "as-tree");
// create a chart
var chart = anychart.ganttProject();
// set the data
chart.data(treeData);
// configure the scale
chart.getTimeline().scale().maximum(Date.UTC(2018, 06, 30));
// set the container id
chart.container("container");
// initiate drawing the chart
chart.draw();
// fit elements to the width of the timeline
chart.fitAll();
});
</script>
</body>
</html>
定制甘特圖設計
AnyChart提供了廣泛的選項來定制數據可視化的設計，以適合您的個人喜好和需求。在數據字段中，您可以設置各種屬性以自定義甘特圖的外觀。
例如，以下是我在上述甘特圖示例中指定的一些數據字段：
-
id —設置每個任務的唯一標識符；
-
name -設置每個任務的名稱；
-
actualStart -設置每個任務的開始日期；
-
actualEnd -設置每個任務的結束日期；
-
connectTo —是用于設置目標任務的一種連接器；
-
connectorType —設置連接器的類型，可以是“ start-start”，“ start-finish”，“ finish-start”或“ finish-finish”；
-
progressValue —將每個任務的進度值設置為百分比。
-
此外，AnyChart允許以下類型的任務，這些任務可以通過不同的方式可視化：
-
常規任務 -與其他任務沒有關系；
-
父任務 -與其他任務具有父子關系；
-
里程碑 —可視化持續時間為零的事件。可以通過在actualStart和actualEnd字段上設置相同的日期來指定它們。
將數據加載為表格
如果要通過從關系數據庫中加載數據來創建圖表，則可以將數據組織為帶有父/子鏈接的表。
在這種情況下，parent每個項目的字段都應id指定其父項的值。另外，您應將根項目的父項設置為null，否則就無法指定它。
這是我在說的：
（您也可以在此CodePen存儲庫上查看代碼）。
var data = [{
id: 1,
parent: null,
name: "Root",
actualStart: Date.UTC(2018, 01, 02),
actualEnd: Date.UTC(2018, 06, 15),
},
{
id: 2,
parent: 1,
name: "Parent 1",
actualStart: Date.UTC(2018, 01, 02),
actualEnd: Date.UTC(2018, 01, 22),
progressValue: "90%"
},
{
id: 3,
parent: 2,
name: "Child 1–1",
actualStart: Date.UTC(2018, 01, 23),
actualEnd: Date.UTC(2018, 02, 20),
progressValue: "75%"
},
{
id: 4,
parent: 2,
name: "Child 1–2",
actualStart: Date.UTC(2018, 02, 23),
actualEnd: Date.UTC(2018, 02, 23),
progressValue: "60%"
},
{
id: 5,
parent: 1,
name: "Parent 2",
actualStart: Date.UTC(2018, 02, 26),
actualEnd: Date.UTC(2018, 04, 26),
progressValue: "80%"
},
{
id: 7,
parent: 6,
name: "Child 2–1",
actualStart: Date.UTC(2018, 04, 29),
actualEnd: Date.UTC(2018, 05, 15),
progressValue: "30%"
},
];
另外，當您將數據加載為表格時，請不要忘記將anychart.data.tree()方法中的第二個參數從“as-tree”更改為“as-table”，因此整行如下所示：
var treeData = anychart.data.tree(data, "as-table");
這是將數據作為表加載時創建的甘特圖的屏幕截圖：
將數據作為表加載時使用JS創建的甘特圖
結論
如您所見，使用AnyChart JavaScript圖表庫創建甘特圖非常簡單。
在本教程中，我只是簡單介紹了甘特圖可以完成的工作。我希望您已經了解了這種圖表的驚人功能，以及它如何幫助您管理Web開發任務。
當然，您可以看一下易于遵循的AnyChart的甘特圖文檔，以了解更多調整甘特圖以適合您的設計要求并幫助您跟蹤項目管理活動的方法。
祝一切順利。
想要購買AnyGantt正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
2次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線