91视频免费在线,91抱起操,在线观看免费成人

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

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

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

相關鏈接：

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

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

點擊下載AnyChart最新試用版

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

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

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

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

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

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

為了創建甘特圖，將在網頁的部分中添加以下Core和Gantt模塊。

<script src=" 
<script src ="

步驟3：聲明圖表容器

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

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

請注意，我已經給了

元素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();

定制甘特圖設計

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

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

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

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

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

將數據加載為表格

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

在這種情況下，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%" 
       },
];

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

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

這是將數據作為表加載時創建的甘特圖的屏幕截圖：

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

結論

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

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

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

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

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

圖片2.jpg

標簽：

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

文章轉載自：

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

相關產品

控件

產品功能：圖表

源碼：非開源

產品編號：11009

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

開發商： Anychart

正式授權

">AnyChart

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

最新文章 MORE

金喜正規買球相關的文章 MORE

国产自产第一-国产自产对白一区-国产自产精品-国产自产区44页-国产自产在线-国产自产自拍-国产自产自拍视频-国产自精品

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發社群

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

用科技創就卓越

Create excellence with technology

国产自产第一-国产自产对白一区-国产自产精品-国产自产区44页-国产自产在线-国产自产自拍-国产自产自拍视频-国产自精品

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發社群

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

為你推薦

用科技創就卓越

Create excellence with technology