跨平台图表控件Anychart教程：使用JavaScript创建简单的甘特图-控件新闻-慧都网

跨平台图表控件Anychart教程：使用JavaScript创建简单的甘特图

翻译|使用教程|编辑：吴园园|2019-10-09 10:06:59.520|阅读 459 次

概述：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@pclwef.cn

文章转载自：

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

彩票走势图

在线采购

中文文档库

试用/Demo下载

开发社群