亚洲国产精品-8,久草资源福利,日韩免费小视频

跨平臺圖表控件Anychart教程：使用JavaScript創(chuàng)建簡單的甘特圖

翻譯|使用教程|編輯：吳園園|2019-10-09 10:06:59.520|閱讀 516 次

概述：AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺的交互式圖表和儀表。本教程將為您介紹如何使用JavaScript創(chuàng)建簡單的甘特圖。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關鏈接：

AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數(shù)據(jù)分析、統(tǒng)計學、金融等領域。重要推薦：

AnyChart現(xiàn)已更新至最新版本8.7.0，九大數(shù)據(jù)可視化新功能上線，改進了功能并修復了一些bug。新版本，新功能，趕快下載體驗吧~（點擊查看更新詳情）

點擊下載AnyChart最新試用版

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

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

在這樣的情況下，我們選擇了AnyChart的JS Charts庫，因為它的易用性，廣泛的文檔，用于試用的靈活的代碼游樂場以及其他強大的功能。

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

跨平臺圖表控件Anychart教程：使用JavaScript創(chuàng)建簡單的甘特圖

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

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

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

步驟1：準備資料
步驟2：獲取依賴關系
步驟3：聲明圖表容器
步驟4：渲染甘特圖

步驟1：準備資料

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

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

這樣，父數(shù)據(jù)項將具有一個children數(shù)據(jù)字段，其中子項被聲明為數(shù)組。

讓我向您展示我所談論的示例：

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利用基于模塊的極簡方法，使您僅獲得項目必不可少的那些依賴項，從而極大地縮小了部署代碼的大小，從而提高了性能。

為了創(chuàng)建甘特圖，將在網(wǎng)頁的部分中添加以下Core和Gantt模塊。

<script src=" 
<script src ="

步驟3：聲明圖表容器

然后，讓我們創(chuàng)建一個將加載甘特圖的容器。

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

請注意，我已經(jīng)給了

元素id的“container”在下一步被引用。

步驟4：渲染甘特圖

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

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

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

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

var chart = anychart.ganttProject();

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

chart.data(treeData);

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

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

參考id我們之前設置的圖表容器：

chart.container("container");

啟動繪制圖表：

chart.draw();

在時間軸的寬度內擬合指定的活動：

chart.fitAll();

定制甘特圖設計

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

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

id -設置每個任務的唯一標識符；
name -設置每個任務的名稱；
actualStart -設置每個任務的開始日期；
actualEnd -設置每個任務的結束日期；
connectTo -是用于設置目標任務的一種連接器；
connectorType -設置連接器的類型，可以是“開始-開始”，“開始-完成”，“完成-開始”或“完成-結束”；
progressValue -將每個任務的進度值設置為百分比。

此外，AnyChart允許以下類型的任務，這些任務可以通過不同的方式可視化：

常規(guī)任務 -與其他任務沒有關系；
父任務 -與其他任務具有父子關系；
里程碑 —可視化持續(xù)時間為零的事件。可以通過在actualStart和actualEnd字段上設置相同的日期來指定它們。

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

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

在這種情況下，parent每個項目的字段都應id指定其父項的值。另外，您應該將根項目的父項設置為null，否則就無法指定它。

以下為代碼：

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%" 
       },
];

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

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

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

跨平臺圖表控件Anychart教程：使用JavaScript創(chuàng)建簡單的甘特圖

結論

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

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

=====================================================

想要購買Anychart正版授權的朋友可以。

更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼

圖片2.jpg

標簽：

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

文章轉載自：

上一篇：Zend Studio使用教程：創(chuàng)建PHP文件的三種方式下一篇：推薦！用于Productive Workflow的Eclipse快捷方式（二）

相關產品

控件

產品功能：圖表

源碼：非開源

產品編號：11009

當前版本：v8.11.0 [銷售以商家最新版為準，如需其他版本，請來電咨詢]

開發(fā) 商： Anychart

正式授權

">AnyChart

靈活的高度可定制的跨瀏覽器、跨平臺JavaScript (HTML5) 圖表控件。

最新文章 MORE

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

欧美日韩亚-欧美日韩亚州在线-欧美日韩亚洲-欧美日韩亚洲第一区-欧美日韩亚洲二区在线-欧美日韩亚洲高清精品

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發(fā)社群

跨平臺圖表控件Anychart教程：使用JavaScript創(chuàng)建簡單的甘特圖

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

Create excellence with technology

欧美日韩亚-欧美日韩亚州在线-欧美日韩亚洲-欧美日韩亚洲第一区-欧美日韩亚洲二区在线-欧美日韩亚洲高清精品

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發(fā)社群

跨平臺圖表控件Anychart教程：使用JavaScript創(chuàng)建簡單的甘特圖

為你推薦

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

Create excellence with technology