在新版本中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();
运行效果:
完整代码如下:
<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>