使用JavaScript创建简单的甘特图—教程-控件新闻-慧都网

使用JavaScript创建简单的甘特图—教程

翻译|使用教程|编辑：杨鹏连|2020-07-10 17:07:20.583|阅读 820 次

概述：在本教程中，我将指导您如何使用此数据可视化库创建简单的交互式甘特图。您可以在本教程的结尾处获得用于创建这种甘特图的全部代码

AnyGantt是基于JavaScript的高级解决方案，用于构建复杂且信息丰富的甘特图。它完全跨浏览器和跨平台，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或简单的HTML页面。

使用JavaScript库创建甘特图，并将项目管理工作提高到一个新水平。

今年早些时候，我的团队正在寻找一种项目管理工具，该工具可以帮助我们根据某些特定的时间表绘制与我们的应用程序开发项目相关的各种任务。经过研究，我们最终确定了甘特图。但是，有些人认为Gantts的创建很复杂。不对！借助众多的 JavaScript图表库，数据可视化现在变得简单，灵活且可嵌入。

在我们的情况下，我们选择使用AnyChart的JS Charts库是因为它的易用性，广泛的文档，用于试用的灵活代码场以及其他强大功能。

在本教程中，我将指导您如何使用此数据可视化库创建简单的交互式甘特图。这就是我们要做的，您可以在本教程的结尾处获得用于创建这种甘特图的全部代码：

分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利用基于模块的极简方法，使您仅获得项目必不可少的那些依赖项，从而极大地缩小了部署代码的大小，从而提高了性能。

为了创建甘特图，我们将在<head>网页的部分中添加以下Core和Gantt模块。

<head>
<script src="//cdn.anychart.com/releases/8.6.0/js/anychart-core.min.js"></script>
<script src ="//cdn.anychart.com/releases/8.6.0/js/anychart-gantt.min.js"></script>
</head>

步骤3：声明图表容器

然后，让我们创建一个容器，甘特图将加载到该容器。

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

请注意，我已经给了<div>元素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();

这是我用于在上图中创建甘特图的全部代码：

（您也可以在此CodePen存储库上查看代码）。

<html>
<head>
<script src="//cdn.anychart.com/releases/8.6.0/js/anychart-core.min.js"></script>
<script src ="//cdn.anychart.com/releases/8.6.0/js/anychart-gantt.min.js"></script>
</head>
<body>
<div id = "container" ></div>
<script>
anychart.onDocumentReady(function () {
// create data
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%"
},
{
id: "1_2",
name: "Design and Prototyping",
actualStart: Date.UTC(2018, 01, 23),
actualEnd: Date.UTC(2018, 02, 20),
connectTo: "1_3",
connectorType: "start-start",
progressValue: "60%"
},
{
id: "1_3",
name: "Evaluation Meeting",
actualStart: Date.UTC(2018, 02, 23),
actualEnd: Date.UTC(2018, 02, 23),
connectTo: "1_4",
connectorType: "start-start",
progressValue: "80%"
},
{
id: "1_4",
name: "Application Development",
actualStart: Date.UTC(2018, 02, 26),
actualEnd: Date.UTC(2018, 04, 26),
connectTo: "1_5",
connectorType: "finish-finish",
progressValue: "90%"
},
{
id: "1_5",
name: "Testing",
actualStart: Date.UTC(2018, 04, 29),
actualEnd: Date.UTC(2018, 05, 15),
connectTo: "1_6",
connectorType: "start-finish",
progressValue: "60%"
},
{
id: "1_6",
name: "Deployment",
actualStart: Date.UTC(2018, 05, 20),
actualEnd: Date.UTC(2018, 05, 27),
connectTo: "1_7",
connectorType: "start-finish",
progressValue: "100%"
},
{
id: "1_7",
name: "Maintenance",
actualStart: Date.UTC(2018, 05, 30),
actualEnd: Date.UTC(2018, 06, 11),
progressValue: "40%"
},

]
}];
// create a data tree
var treeData = anychart.data.tree(data, "as-tree");

// create a chart
var chart = anychart.ganttProject();

// set the data
chart.data(treeData);
// configure the scale
chart.getTimeline().scale().maximum(Date.UTC(2018, 06, 30));
// set the container id
chart.container("container");
// initiate drawing the chart
chart.draw();
// fit elements to the width of the timeline
chart.fitAll();
});
</script>
</body>
</html>

定制甘特图设计

AnyChart提供了广泛的选项来定制数据可视化的设计，以适合您的个人喜好和需求。在数据字段中，您可以设置各种属性以自定义甘特图的外观。

例如，以下是我在上述甘特图示例中指定的一些数据字段：

id —设置每个任务的唯一标识符；
name -设置每个任务的名称；
actualStart -设置每个任务的开始日期；
actualEnd -设置每个任务的结束日期；
connectTo —是用于设置目标任务的一种连接器；
connectorType —设置连接器的类型，可以是“ start-start”，“ start-finish”，“ finish-start”或“ finish-finish”；
progressValue —将每个任务的进度值设置为百分比。
此外，AnyChart允许以下类型的任务，这些任务可以通过不同的方式可视化：
常规任务 -与其他任务没有关系；
父任务 -与其他任务具有父子关系；
里程碑 —可视化持续时间为零的事件。可以通过在actualStart和actualEnd字段上设置相同的日期来指定它们。

将数据加载为表格

如果要通过从关系数据库中加载数据来创建图表，则可以将数据组织为带有父/子链接的表。

在这种情况下，parent每个项目的字段都应id指定其父项的值。另外，您应将根项目的父项设置为null，否则就无法指定它。

这是我在说的：

（您也可以在此CodePen存储库上查看代码）。

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");

这是将数据作为表加载时创建的甘特图的屏幕截图：

将数据作为表加载时使用JS创建的甘特图

结论

如您所见，使用AnyChart JavaScript图表库创建甘特图非常简单。

在本教程中，我只是简单介绍了甘特图可以完成的工作。我希望您已经了解了这种图表的惊人功能，以及它如何帮助您管理Web开发任务。

当然，您可以看一下易于遵循的AnyChart的甘特图文档，以了解更多调整甘特图以适合您的设计要求并帮助您跟踪项目管理活动的方法。

祝一切顺利。

想要购买AnyGantt正版授权，或了解更多产品信息请点击

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自：

上一篇：Pycharm使用教程：如何配置代码样式（上篇）下一篇：PL/SQL Developer使用教程：PL/SQL Developer创建Job的步骤

彩票走势图

在线采购

中文文档库

试用/Demo下载

开发社群