AnyGantt如何快速创建项目管理上常用的网络计划图

作者:控件中国网   出处:控件中国网   2016-08-02 10:30:18   阅读:9

AnyGantt是一款基于JavaScript下的项目管理类控件,可以帮助开发人员在Web应用上集成甘特图的功能,通过甘特图客户可以直观地查看工程项目的进度、资源调配以及日程活动安排等。控件不仅提供了项目管理上常用的功能还可以通过控件提供的丰富API进行多种自定义功能。在项目管理中最常用的是网络计划图,通过网络计划图可以查看工程进度以及项目完成的周期,通过网络计划图还可以查看项目关键线路、计划周期和实际完成周期等。
PertChart.png
AnyGantt可以帮助开发人员快速创建网络计划图,并进行相关设置,计算关键路径等,下面的代码讲述了如何快速创建一个基本的网络计划图
<html>
  <head>
    <script src="http://cdn.AnyChart.com/js/7.11.0/AnyChart-bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.AnyChart.com/css/latest/AnyChart-ui.min.css" />
    <style>
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
AnyChart.onDocumentReady(function () {
   
    // raw data
    var data = [
{id: "1", duration: 1, name: "Task A"},
{id: "2", duration: 3, name: "Task B"},
{id: "3", duration: 3, name: "Task C"},
{id: "4", duration: 1, name: "Task D"},
{id: "5", duration: 2, name: "Task AD", dependsOn: ["1", "4"]},
{id: "6", duration: 2, name: "Task BC", dependsOn: ["2", "3"]}
    ];
 
    // create a PERT chart
    chart = AnyChart.pert();
 
    // set chart data
    chart.data(data, "asTable");
 
    // set the title of the chart
    chart.title("PERT Chart");
 
    // set the container id for the chart
    chart.container("container");
 
    // initiate drawing the chart
    chart.draw();
});
    </script>
  </body>
</html>
Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat