国内精自线i,日本三级a∨在,欧美色精品视频在线观看九

国产凹凸在线-国产拗女一区二区三区-国产白白视-国产白领-国产白拍-国产白丝jk被疯狂输-国产白丝喷-国产白丝在线

使用JavaScript創(chuàng)建簡單的甘特圖—教程

翻譯|使用教程|編輯：楊鵬連|2020-07-10 17:07:20.583|閱讀 884 次

概述：在本教程中，我將指導(dǎo)您如何使用此數(shù)據(jù)可視化庫創(chuàng)建簡單的交互式甘特圖。您可以在本教程的結(jié)尾處獲得用于創(chuàng)建這種甘特圖的全部代碼

AnyGantt是基于JavaScript的高級解決方案，用于構(gòu)建復(fù)雜且信息豐富的甘特圖。它完全跨瀏覽器和跨平臺，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或簡單的HTML頁面。

點(diǎn)擊下載AnyGantt正式版

使用JavaScript庫創(chuàng)建甘特圖，并將項目管理工作提高到一個新水平。

今年早些時候，我的團(tuán)隊正在尋找一種項目管理工具，該工具可以幫助我們根據(jù)某些特定的時間表繪制與我們的應(yīng)用程序開發(fā)項目相關(guān)的各種任務(wù)。經(jīng)過研究，我們最終確定了甘特圖。但是，有些人認(rèn)為Gantts的創(chuàng)建很復(fù)雜。不對！借助眾多的 JavaScript圖表庫，數(shù)據(jù)可視化現(xiàn)在變得簡單，靈活且可嵌入。

在我們的情況下，我們選擇使用AnyChart的JS Charts庫是因為它的易用性，廣泛的文檔，用于試用的靈活代碼場以及其他強(qiáng)大功能。

在本教程中，我將指導(dǎo)您如何使用此數(shù)據(jù)可視化庫創(chuàng)建簡單的交互式甘特圖。這就是我們要做的，您可以在本教程的結(jié)尾處獲得用于創(chuàng)建這種甘特圖的全部代碼：

é???-¤JavaScript??????????¨????èμ·?????o????????1???

分4步創(chuàng)建JS甘特圖

讓我們動手，使用JavaScript庫創(chuàng)建一個簡單的甘特圖，用于計劃和監(jiān)視項目活動。

在此JS圖表教程中，我們將遵循以下四個步驟：

步驟1：準(zhǔn)備資料
步驟2：獲取依賴關(guān)系
步驟3：聲明圖表容器
步驟4：渲染甘特圖

步驟1：準(zhǔn)備資料

使用JavaScript構(gòu)建甘特圖的第一步是準(zhǔn)備將要顯示的數(shù)據(jù)。AnyChart庫要求使用樹數(shù)據(jù)模型表示數(shù)據(jù)。

在此模型中，數(shù)據(jù)被組織為分層的樹狀結(jié)構(gòu)，其中父子關(guān)系用于連接各種數(shù)據(jù)項。

這樣，父數(shù)據(jù)項將具有一個children數(shù)據(jù)字段，其中子項被聲明為數(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利用基于模塊的極簡方法，使您僅獲得項目必不可少的那些依賴項，從而極大地縮小了部署代碼的大小，從而提高了性能。

為了創(chuàng)建甘特圖，我們將在<head>網(wǎng)頁的部分中添加以下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)建一個容器，甘特圖將加載到該容器。

<body>
<div id="container"></div>
<body>

請注意，我已經(jīng)給了<div>元素id的“container”在下一步被引用。

步驟4：渲染甘特圖

最后，我們將按照以下步驟繪制甘特圖：

通過將準(zhǔn)備好的數(shù)據(jù)傳遞給anychart.data.tree()方法來創(chuàng)建數(shù)據(jù)樹。對于第二個參數(shù)，我們將其指定為“as-tree”。

var treeData = anychart.data.tree(data, "as-tree");

通過調(diào)用anychart.ganttProject(）圖表構(gòu)造函數(shù)創(chuàng)建項目甘特圖：

var chart = anychart.ganttProject();

通過將創(chuàng)建的數(shù)據(jù)樹傳遞給圖表的data()方法來設(shè)置數(shù)據(jù)：

chart.data(treeData);

配置時間軸的縮放比例，直到項目結(jié)束為止：

chart.getTimeline().scale().maximum(Date.UTC(2018, 06, 30));

參考id我們之前設(shè)置的圖表容器：

chart.container("container");

啟動繪制圖表：

chart.draw();

在時間軸的寬度內(nèi)擬合指定的活動：

chart.fitAll();

這是我用于在上圖中創(chuàng)建甘特圖的全部代碼：

（您也可以在此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>

定制甘特圖設(shè)計

AnyChart提供了廣泛的選項來定制數(shù)據(jù)可視化的設(shè)計，以適合您的個人喜好和需求。在數(shù)據(jù)字段中，您可以設(shè)置各種屬性以自定義甘特圖的外觀。

例如，以下是我在上述甘特圖示例中指定的一些數(shù)據(jù)字段：

id —設(shè)置每個任務(wù)的唯一標(biāo)識符；
name -設(shè)置每個任務(wù)的名稱；
actualStart -設(shè)置每個任務(wù)的開始日期；
actualEnd -設(shè)置每個任務(wù)的結(jié)束日期；
connectTo —是用于設(shè)置目標(biāo)任務(wù)的一種連接器；
connectorType —設(shè)置連接器的類型，可以是“ start-start”，“ start-finish”，“ finish-start”或“ finish-finish”；
progressValue —將每個任務(wù)的進(jìn)度值設(shè)置為百分比。
此外，AnyChart允許以下類型的任務(wù)，這些任務(wù)可以通過不同的方式可視化：
常規(guī)任務(wù) -與其他任務(wù)沒有關(guān)系；
父任務(wù) -與其他任務(wù)具有父子關(guān)系；
里程碑 —可視化持續(xù)時間為零的事件。可以通過在actualStart和actualEnd字段上設(shè)置相同的日期來指定它們。

將數(shù)據(jù)加載為表格

如果要通過從關(guān)系數(shù)據(jù)庫中加載數(shù)據(jù)來創(chuàng)建圖表，則可以將數(shù)據(jù)組織為帶有父/子鏈接的表。

在這種情況下，parent每個項目的字段都應(yīng)id指定其父項的值。另外，您應(yīng)將根項目的父項設(shè)置為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%"
},
];

另外，當(dāng)您將數(shù)據(jù)加載為表格時，請不要忘記將anychart.data.tree()方法中的第二個參數(shù)從“as-tree”更改為“as-table”，因此整行如下所示：

var treeData = anychart.data.tree(data, "as-table");

這是將數(shù)據(jù)作為表加載時創(chuàng)建的甘特圖的屏幕截圖：

將數(shù)據(jù)作為表加載時使用JS創(chuàng)建的甘特圖

?°???°??®?????oè?¨?? è??????????¨JS?????o????????1???

結(jié)論

如您所見，使用AnyChart JavaScript圖表庫創(chuàng)建甘特圖非常簡單。

在本教程中，我只是簡單介紹了甘特圖可以完成的工作。我希望您已經(jīng)了解了這種圖表的驚人功能，以及它如何幫助您管理Web開發(fā)任務(wù)。

當(dāng)然，您可以看一下易于遵循的AnyChart的甘特圖文檔，以了解更多調(diào)整甘特圖以適合您的設(shè)計要求并幫助您跟蹤項目管理活動的方法。

祝一切順利。

想要購買AnyGantt正版授權(quán)，或了解更多產(chǎn)品信息請點(diǎn)擊

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：

上一篇：Pycharm使用教程：如何配置代碼樣式（上篇）下一篇：PL/SQL Developer使用教程：PL/SQL Developer創(chuàng)建Job的步驟

相關(guān)產(chǎn)品

控件

產(chǎn)品功能：項目管理

源碼：非開源

產(chǎn)品編號：11011

當(dāng)前版本：v8.11.0 [銷售以商家最新版為準(zhǔn)，如需其他版本，請來電咨詢]

開發(fā) 商： Anychart

正式授權(quán)

">AnyGantt

基于JavaScript的高級解決方案，用于構(gòu)建復(fù)雜且信息豐富的甘特圖。

最新文章 MORE

金喜正規(guī)買球相關(guān)的文章 MORE

国产凹凸在线-国产拗女一区二区三区-国产白白视-国产白领-国产白拍-国产白丝jk被疯狂输-国产白丝喷-国产白丝在线

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發(fā)社群

使用JavaScript創(chuàng)建簡單的甘特圖—教程

用科技創(chuàng)就卓越

Create excellence with technology

国产凹凸在线-国产拗女一区二区三区-国产白白视-国产白领-国产白拍-国产白丝jk被疯狂输-国产白丝喷-国产白丝在线

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發(fā)社群

使用JavaScript創(chuàng)建簡單的甘特圖—教程

為你推薦

用科技創(chuàng)就卓越

Create excellence with technology