快速使用AnyGantt控件创建甘特图

作者:控件中国网   出处:控件中国网   2015-07-14 10:56:10   阅读:19

在新版本中AnyGantt已经完全采用JavaScript了,该控件可应用于多种平台、开发语言以及设备驱动,并且更好地进行甘特图交互处理,这里我们简单介绍如何快速使用AnyGantt创建一个甘特图。

1.把AnyGantt里提供的JS文件包含在WEB页面里,所有使用到的API都包含在AnyGantt.min.js里
<head>
    <script src="http://cdn.AnyChart.com/js/latest/AnyGantt.min.js" type="text/javascript"></script>
</head>
2.为要显示的甘特图创建一个容器,这里采用一个DIV来作为容器,需要对DIV设置ID,宽度和高度
<body>
    <div id="container" style="width: 500px; height: 400px;"></div>
</body>
3.为甘特图设置相应的数据
var rawData = [
 {
   "name": "Activities",
   "actualStart": Date.UTC(2007, 0, 25),
   "actualEnd": Date.UTC(2007, 2, 14),
   "children": [
     {
       "name": "Draft plan",
       "actualStart": Date.UTC(2007, 0, 25),
       "actualEnd": Date.UTC(2007, 1, 3)
     },
     {
       "name": "Board meeting",
       "actualStart": Date.UTC(2007, 1, 4),
       "actualEnd": Date.UTC(2007, 1, 4)
     },
     {
       "name": "Research option",
       "actualStart": Date.UTC(2007, 1, 4),
       "actualEnd": Date.UTC(2007, 1, 24)
     },
     {
       "name": "Final plan",
       "actualStart": Date.UTC(2007, 1, 24),
       "actualEnd": Date.UTC(2007, 2, 14)
     }
   ]
 }];

4.初始化甘特图,并赋予数据
// data tree settings
  var treeData = AnyChart.data.tree(rawData, AnyChart.enums.TreeFillingMethod.AS_TREE);
  var chart = AnyChart.ganttProject();      // chart type
  chart.data(treeData);                     // chart data
  chart.container('container').draw(); 

运行效果:
<a href=http://www.componentcn.com/kongjianchanpin/xiangmuguanliyuyewuluoji/gantetukongjian/2014-09-15/160.html target=_blank class=infotextkey>AnyGantt</a>.png

完整代码如下:
<head>
  <script src="//cdn.AnyChart.com/js/latest/AnyGantt.min.js" type="text/javascript"></script>
  <script>
    AnyChart.onDocumentReady(function(){
    
        var rawData = [
          {
            "name": "Activities",
            "actualStart": Date.UTC(2007, 0, 25),
            "actualEnd": Date.UTC(2007, 2, 14),
            "children": [
              {
                "name": "Draft plan",
                "actualStart": Date.UTC(2007, 0, 25),
                "actualEnd": Date.UTC(2007, 1, 3)
              },
              {
                "name": "Board meeting",
                "actualStart": Date.UTC(2007, 1, 4),
                "actualEnd": Date.UTC(2007, 1, 4)
              },
              {
                "name": "Research option",
                "actualStart": Date.UTC(2007, 1, 4),
                "actualEnd": Date.UTC(2007, 1, 24)
              },
              {
                "name": "Final plan",
                "actualStart": Date.UTC(2007, 1, 24),
                "actualEnd": Date.UTC(2007, 2, 14)
              }
            ]
          }];
    
      // tree data settings
      var treeData = AnyChart.data.tree(rawData, AnyChart.enums.TreeFillingMethod.AS_TREE);
    
      // chart type
      chart = AnyChart.ganttProject();
    
      // chart container
      chart.container('container');
    
      // set chart data
      chart.data(treeData);
    
      // initiate drawing
      chart.draw();
      
      // show all items
      chart.fitAll();
    
    });
  </script>
</head>

Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat