AnyGantt是基于JavaScript的高級(jí)解決方案，用于構(gòu)建復(fù)雜且信息豐富的甘特圖。它完全跨瀏覽器和跨平臺(tái)，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或簡(jiǎn)單的HTML頁(yè)面。
點(diǎn)擊下載AnyGantt正式版
使用JavaScript庫(kù)創(chuàng)建甘特圖，并將項(xiàng)目管理工作提高到一個(gè)新水平。
今年早些時(shí)候，我的團(tuán)隊(duì)正在尋找一種項(xiàng)目管理工具，該工具可以幫助我們根據(jù)某些特定的時(shí)間表繪制與我們的應(yīng)用程序開(kāi)發(fā)項(xiàng)目相關(guān)的各種任務(wù)。經(jīng)過(guò)研究，我們最終確定了甘特圖。但是，有些人認(rèn)為Gantts的創(chuàng)建很復(fù)雜。不對(duì)！借助眾多的 JavaScript圖表庫(kù)，數(shù)據(jù)可視化現(xiàn)在變得簡(jiǎn)單，靈活且可嵌入。
在我們的情況下，我們選擇使用AnyChart的JS Charts庫(kù)是因?yàn)樗囊子眯裕瑥V泛的文檔，用于試用的靈活代碼場(chǎng)以及其他強(qiáng)大功能。
在本教程中，我將指導(dǎo)您如何使用此數(shù)據(jù)可視化庫(kù)創(chuàng)建簡(jiǎn)單的交互式甘特圖。這就是我們要做的，您可以在本教程的結(jié)尾處獲得用于創(chuàng)建這種甘特圖的全部代碼：
分4步創(chuàng)建JS甘特圖
讓我們動(dòng)手，使用JavaScript庫(kù)創(chuàng)建一個(gè)簡(jiǎn)單的甘特圖，用于計(jì)劃和監(jiān)視項(xiàng)目活動(dòng)。
在此JS圖表教程中，我們將遵循以下四個(gè)步驟：
-
步驟1：準(zhǔn)備資料
-
步驟2：獲取依賴關(guān)系
-
步驟3：聲明圖表容器
-
步驟4：渲染甘特圖
步驟1：準(zhǔn)備資料
使用JavaScript構(gòu)建甘特圖的第一步是準(zhǔn)備將要顯示的數(shù)據(jù)。AnyChart庫(kù)要求使用樹(shù)數(shù)據(jù)模型表示數(shù)據(jù)。
在此模型中，數(shù)據(jù)被組織為分層的樹(shù)狀結(jié)構(gòu)，其中父子關(guān)系用于連接各種數(shù)據(jù)項(xiàng)。
這樣，父數(shù)據(jù)項(xiàng)將具有一個(gè)children數(shù)據(jù)字段，其中子項(xiàng)被聲明為數(shù)組。
讓我向您展示我所談?wù)摰氖纠?/span>
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：獲取依賴關(guān)系
AnyChart利用基于模塊的極簡(jiǎn)方法，使您僅獲得項(xiàng)目必不可少的那些依賴項(xiàng)，從而極大地縮小了部署代碼的大小，從而提高了性能。
為了創(chuàng)建甘特圖，我們將在<head>網(wǎng)頁(yè)的部分中添加以下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：聲明圖表容器
然后，讓我們創(chuàng)建一個(gè)容器，甘特圖將加載到該容器。
<body>
<div id="container"></div>
<body>
請(qǐng)注意，我已經(jīng)給了<div>元素id的“container”在下一步被引用。
步驟4：渲染甘特圖
最后，我們將按照以下步驟繪制甘特圖：
通過(guò)將準(zhǔn)備好的數(shù)據(jù)傳遞給anychart.data.tree()方法來(lái)創(chuàng)建數(shù)據(jù)樹(shù)。對(duì)于第二個(gè)參數(shù)，我們將其指定為“as-tree”。
var treeData = anychart.data.tree(data, "as-tree");
通過(guò)調(diào)用anychart.ganttProject(）圖表構(gòu)造函數(shù)創(chuàng)建項(xiàng)目甘特圖：
var chart = anychart.ganttProject();
通過(guò)將創(chuàng)建的數(shù)據(jù)樹(shù)傳遞給圖表的data()方法來(lái)設(shè)置數(shù)據(jù)：
chart.data(treeData);
配置時(shí)間軸的縮放比例，直到項(xiàng)目結(jié)束為止：
chart.getTimeline().scale().maximum(Date.UTC(2018, 06, 30));
參考id我們之前設(shè)置的圖表容器：
chart.container("container");
啟動(dòng)繪制圖表：
chart.draw();
在時(shí)間軸的寬度內(nèi)擬合指定的活動(dòng)：
chart.fitAll();
這是我用于在上圖中創(chuàng)建甘特圖的全部代碼：
（您也可以在此CodePen存儲(chǔ)庫(kù)上查看代碼）。
<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>
定制甘特圖設(shè)計(jì)
AnyChart提供了廣泛的選項(xiàng)來(lái)定制數(shù)據(jù)可視化的設(shè)計(jì)，以適合您的個(gè)人喜好和需求。在數(shù)據(jù)字段中，您可以設(shè)置各種屬性以自定義甘特圖的外觀。
例如，以下是我在上述甘特圖示例中指定的一些數(shù)據(jù)字段：
-
id —設(shè)置每個(gè)任務(wù)的唯一標(biāo)識(shí)符；
-
name -設(shè)置每個(gè)任務(wù)的名稱；
-
actualStart -設(shè)置每個(gè)任務(wù)的開(kāi)始日期；
-
actualEnd -設(shè)置每個(gè)任務(wù)的結(jié)束日期；
-
connectTo —是用于設(shè)置目標(biāo)任務(wù)的一種連接器；
-
connectorType —設(shè)置連接器的類型，可以是“ start-start”，“ start-finish”，“ finish-start”或“ finish-finish”；
-
progressValue —將每個(gè)任務(wù)的進(jìn)度值設(shè)置為百分比。
-
此外，AnyChart允許以下類型的任務(wù)，這些任務(wù)可以通過(guò)不同的方式可視化：
-
常規(guī)任務(wù) -與其他任務(wù)沒(méi)有關(guān)系；
-
父任務(wù) -與其他任務(wù)具有父子關(guān)系；
-
里程碑 —可視化持續(xù)時(shí)間為零的事件。可以通過(guò)在actualStart和actualEnd字段上設(shè)置相同的日期來(lái)指定它們。
將數(shù)據(jù)加載為表格
如果要通過(guò)從關(guān)系數(shù)據(jù)庫(kù)中加載數(shù)據(jù)來(lái)創(chuàng)建圖表，則可以將數(shù)據(jù)組織為帶有父/子鏈接的表。
在這種情況下，parent每個(gè)項(xiàng)目的字段都應(yīng)id指定其父項(xiàng)的值。另外，您應(yīng)將根項(xiàng)目的父項(xiàng)設(shè)置為null，否則就無(wú)法指定它。
這是我在說(shuō)的：
（您也可以在此CodePen存儲(chǔ)庫(kù)上查看代碼）。
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%"
},
];
另外，當(dāng)您將數(shù)據(jù)加載為表格時(shí)，請(qǐng)不要忘記將anychart.data.tree()方法中的第二個(gè)參數(shù)從“as-tree”更改為“as-table”，因此整行如下所示：
var treeData = anychart.data.tree(data, "as-table");
這是將數(shù)據(jù)作為表加載時(shí)創(chuàng)建的甘特圖的屏幕截圖：
將數(shù)據(jù)作為表加載時(shí)使用JS創(chuàng)建的甘特圖
結(jié)論
如您所見(jiàn)，使用AnyChart JavaScript圖表庫(kù)創(chuàng)建甘特圖非常簡(jiǎn)單。
在本教程中，我只是簡(jiǎn)單介紹了甘特圖可以完成的工作。我希望您已經(jīng)了解了這種圖表的驚人功能，以及它如何幫助您管理Web開(kāi)發(fā)任務(wù)。
當(dāng)然，您可以看一下易于遵循的AnyChart的甘特圖文檔，以了解更多調(diào)整甘特圖以適合您的設(shè)計(jì)要求并幫助您跟蹤項(xiàng)目管理活動(dòng)的方法。
祝一切順利。
想要購(gòu)買AnyGantt正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自：
金喜正規(guī)買球 
20次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買球相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線