搜索
首页web前端js教程使用Webix制作自己的甘特图

使用Webix制作自己的甘特图

钥匙要点

  • > Webix框架可以与开源JavaScript gantt Chart DHTMLXGANTT结合使用来创建自定义Gantt图表应用程序。这种组合允许可视化项目的工作过程,并提供诸如导出和可自定义时间尺度之类的功能。
  • >
  • 基本甘特图的创建涉及下载dhtmlxgantt库软件包,并将“代码库”文件夹提取到项目目录。然后可以用数据(包括任务和链接)来初始化图表,以JavaScript对象表示。
  • > Webix UI组件可用于将进一步的控制添加到甘特图中。例如,可以添加菜单按钮以允许将图表导出到不同的文件格式中,并且可以包括一个工具栏以允许更改图表的比例。
  • 最终产品是一种轻巧的在线图表创建工具,具有广泛功能的潜力。源代码和图表的演示可以在github上找到。
  • >
  • >在我的上一篇文章中,我介绍了Webix框架。您已经发现了其基本功能,并学习了如何使用它创建一个非常好看的响应式Web应用程序。现在是时候向前迈出一点一步,看看这个有希望的框架我们还能做什么。
在本文中,我将向您展示如何创建自己的gantt图表应用程序并完成此任务,我将使用Webix框架与开源JavaScript gantt图表结合使用DHTMLXGANTT。

>但是,为什么要问甘特图。好吧,毫无疑问,它有很多职业。首先,由于其直观的表示方式,这些图表被广泛用于可视化项目的工作过程。其次,DHTMLXGANTT是一个甘特图工具,具有大量功能,例如导出,可自定义的时间尺度等。最后,我在Webix开发人员博客中的Webix Web应用程序中找到了一篇名为DHTMLX GANTT图表的帖子,事实证明,您可以将gantt图表添加到只有几行代码的Webix应用程序中。因此,我认为它们可以很好地融合在一起。

如果您可能需要帮助,也可以提供一堆逐步指南,因此如果有疑问,请随时使用它们。

>

创建基本的甘特图


>现在创建我们的应用程序。首先,我们将查看基本图表。然后,我们将添加一些功能以提高其功能。

准备文件

首先,我们需要下载DHTMLXGANTT库软件包,然后将“代码库”文件夹提取到项目目录。由于使用DHTMLXGANTT的NTEGRATION不是内置的Webix功能,因此我们需要从此GitHub存储库中下载所需的文件。我们感兴趣的是您应该将其放入项目目录的“ gantt”目录。
我已经使用了Webix CDN将Webix包含在我的项目中,但是您可以根据需要下载完整的库。此外,我们需要API.JS文件,该文件将允许我们使用导出功能。

>所以,这是我的index.html文件:>

<span><span><span>></span>
</span>   <span><span><span><title>></title></span>Webix Gantt Chart<span><span></span>></span>
</span>   <span><!--Webix-->
</span>   <span><span><span><script> src<span >="http://cdn.webix.com/edge/webix.js"</script></span>></span><span><span></span>></span>
</span>   <span><span><span><link> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span> /></span>
</span>   <span><!--dhtmlxGantt-->
</span>   <span><span><span><script> src<span >="codebase/dhtmlxgantt.js"</script></span>></span><span><span></span>></span>
</span>   <span><span><span><link> href<span>="codebase/dhtmlxgantt.css"</span> rel<span>="stylesheet"</span> /></span>
</span>   <span><!--dhtmlxGantt integration-->
</span>   <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="./gantt/gantt.js"</span>></span><span><span></span>></span>
</span>   <span><!--export-->
</span>   <span><span><span><script> src<span >="http://export.dhtmlx.com/gantt/api.js"</script></span>></span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span>
完成后,我们可以创建一个基本的gantt图表。

>

gantt图表初始化

>此图表提供了使用数据库存储数据的可能性(您可以检查文档页面以查看其工作原理)。但是,对于我们的实验,我们将使用内联数据作为示例来关注JavaScript部分。 n本教程,我将假装使用第二个教程,其内容也已转换为等效的JavaScript对象:

>让我们讨论属性。 DataProperty包含任务描述:任务名称,其ID,其起始日期,以当前时间尺度的单位(默认情况下)和当前进度(数字范围为0到1)的任务持续时间。它还包括开放属性,该属性定义任务分支是否开放,以及父属性,其目的是定义父任务。 链接参数定义了依赖关系链接,它由以下值组成:任务ID,取决于目标的源任务以及依赖关系类型(0 - 'to in to start',1 - '开始启动',2 - “完成到完成')。
<span>var tasks = {
</span>   <span>data: [{
</span>         <span>id: 1,
</span>         <span>text: "Project #1",
</span>         <span>start_date: "01-06-2015",
</span>         <span>duration: 11,
</span>         <span>progress: 0.6,
</span>         <span>open: true
</span>      <span>}, {
</span>         <span>id: 2,
</span>         <span>text: "Task #1",
</span>         <span>start_date: "03-06-2015",
</span>         <span>duration: 5,
</span>         <span>progress: 1,
</span>         <span>open: true,
</span>         <span>parent: 1
</span>      <span>},
</span>      <span>/*some more tasks*/
</span>      <span>{
</span>         <span>id: 6,
</span>         <span>text: "Task #2.3",
</span>         <span>start_date: "05-06-2015",
</span>         <span>duration: 4,
</span>         <span>progress: 0.2,
</span>         <span>open: true,
</span>         <span>parent: 3
</span>      <span>}
</span>   <span>],
</span>   <span>links: [{
</span>         <span>id: 1,
</span>         <span>source: 1,
</span>         <span>target: 2,
</span>         <span>type: "1"
</span>      <span>}, {
</span>         <span>id: 2,
</span>         <span>source: 1,
</span>         <span>target: 3,
</span>         <span>type: "1"
</span>      <span>},
</span>      <span>/*some more links*/
</span>      <span>{
</span>         <span>id: 5,
</span>         <span>source: 5,
</span>         <span>target: 6,
</span>         <span>type: "0"
</span>      <span>}
</span>   <span>]
</span><span>};</span>

我们现在可以使用此数据初始化图表:

视图:“ dhx-gantt”定义了UI组件类型,在这种情况下是gantt图表。 INIT属性包含在初始化之前运行的函数。我已经使用订单_Branch选项来启用拖放任务重新排序。 Ready属性定义了组件满载时触发的函数。在我们的情况下,它使用gantt.parse()方法的先前创建的数据初始化了图表。
webix<span>.ui({
</span>   <span>rows: [
</span>      <span>//row_1: header
</span>      <span>{
</span>         <span>type: "header",
</span>         <span>template: "Webix Gantt Chart"
</span>      <span>},
</span>      <span>//row_2: gantt chart
</span>      <span>{
</span>         <span>view: "dhx-gantt",
</span>         <span>init: function() {
</span>            gantt<span>.config.order_branch = true;
</span>         <span>},
</span>         <span>ready: function() {
</span>            gantt<span>.parse(tasks);
</span>         <span>}
</span>      <span>}
</span>   <span>]
</span><span>});</span>
结果如下所示:

>那么,我们有哪些功能?您可以重新定义现有的任务依赖性并创建新任务。您可以通过在任务边缘拖动圆圈来做到这一点。可以使用底部的三角形更改进度状态。可以通过向水平方向拖动任务的任务的开始时间。至于持续时间,您可以通过调整任务来设置它。我们可以使用“”按钮添加新任务和子任务。

使用Webix制作自己的甘特图这是一个新任务创建的样子:

使用Webix制作自己的甘特图 在这一点上,我们可以创建一个图表,但是没有办法操纵它。因此,让我们为此添加一些控件。

>

使用Webix

更多控制

我们将使用一些Webix UI组件来控制我们的图表。

“导出到…”菜单按钮

为了避免使用混乱的代码,我决定将UI组件初始化与布局代码分开。

>首先,让我们定义菜单按钮,这将使我们能够将图表导出到不同的文件格式中。为此,我们将使用webix菜单组件。

这是菜单描述:

默认情况下,当鼠标徘徊在其上时,菜单按钮将被激活。 OpenAction:“单击”属性重新定义了此行为,因此菜单将仅通过鼠标单击打开其子菜单。 数据参数定义菜单内容。这里有趣的是:“图标”属性,它使我们可以在菜单按钮中添加图标。 Webix使用字体Awesome Icons Collection。如果要应用自己喜欢的图标,则必须使用图标名称作为图标参数的值。

下一步是事件处理。单击其中一个菜单项时,OnItemClick事件会发射。我已经使用了Switch语句来处理所选的ID值,因此您可以查看用于某个文件格式的方法。 子菜单参数包含菜单项定义。
<span><span><span>></span>
</span>   <span><span><span><title>></title></span>Webix Gantt Chart<span><span></span>></span>
</span>   <span><!--Webix-->
</span>   <span><span><span><script> src<span >="http://cdn.webix.com/edge/webix.js"</script></span>></span><span><span></span>></span>
</span>   <span><span><span><link> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span> /></span>
</span>   <span><!--dhtmlxGantt-->
</span>   <span><span><span><script> src<span >="codebase/dhtmlxgantt.js"</script></span>></span><span><span></span>></span>
</span>   <span><span><span><link> href<span>="codebase/dhtmlxgantt.css"</span> rel<span>="stylesheet"</span> /></span>
</span>   <span><!--dhtmlxGantt integration-->
</span>   <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="./gantt/gantt.js"</span>></span><span><span></span>></span>
</span>   <span><!--export-->
</span>   <span><span><span><script> src<span >="http://export.dhtmlx.com/gantt/api.js"</script></span>></span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span>
>

工具栏

>我们将工具栏放置在页面底部。它将包含控制元素,包括我们的菜单按钮。

工具栏组件将为我们提供帮助。但是以前,让我们定义应该添加哪些选项。如果要管理一个项目的持续时间足够长,则应考虑更改比例的功能。 DHTMLXGANTT为您提供各种可用比例属性。我们将使用白天,周和月尺度。

>让我们定义将启用“月尺度”的功能:

>

这是我们使用此功能之后的图表的样子:
<span>var tasks = {
</span>   <span>data: [{
</span>         <span>id: 1,
</span>         <span>text: "Project #1",
</span>         <span>start_date: "01-06-2015",
</span>         <span>duration: 11,
</span>         <span>progress: 0.6,
</span>         <span>open: true
</span>      <span>}, {
</span>         <span>id: 2,
</span>         <span>text: "Task #1",
</span>         <span>start_date: "03-06-2015",
</span>         <span>duration: 5,
</span>         <span>progress: 1,
</span>         <span>open: true,
</span>         <span>parent: 1
</span>      <span>},
</span>      <span>/*some more tasks*/
</span>      <span>{
</span>         <span>id: 6,
</span>         <span>text: "Task #2.3",
</span>         <span>start_date: "05-06-2015",
</span>         <span>duration: 4,
</span>         <span>progress: 0.2,
</span>         <span>open: true,
</span>         <span>parent: 3
</span>      <span>}
</span>   <span>],
</span>   <span>links: [{
</span>         <span>id: 1,
</span>         <span>source: 1,
</span>         <span>target: 2,
</span>         <span>type: "1"
</span>      <span>}, {
</span>         <span>id: 2,
</span>         <span>source: 1,
</span>         <span>target: 3,
</span>         <span>type: "1"
</span>      <span>},
</span>      <span>/*some more links*/
</span>      <span>{
</span>         <span>id: 5,
</span>         <span>source: 5,
</span>         <span>target: 6,
</span>         <span>type: "0"
</span>      <span>}
</span>   <span>]
</span><span>};</span>
>

其他量表功能以类似的方式工作,所以我不会描述它们。>

现在,我们可以定义工具栏变量:

<span><span><span>></span>
</span>   <span><span><span><title>></title></span>Webix Gantt Chart<span><span></span>></span>
</span>   <span><!--Webix-->
</span>   <span><span><span><script> src<span >="http://cdn.webix.com/edge/webix.js"</script></span>></span><span><span></span>></span>
</span>   <span><span><span><link> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span> /></span>
</span>   <span><!--dhtmlxGantt-->
</span>   <span><span><span><script> src<span >="codebase/dhtmlxgantt.js"</script></span>></span><span><span></span>></span>
</span>   <span><span><span><link> href<span>="codebase/dhtmlxgantt.css"</span> rel<span>="stylesheet"</span> /></span>
</span>   <span><!--dhtmlxGantt integration-->
</span>   <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="./gantt/gantt.js"</span>></span><span><span></span>></span>
</span>   <span><!--export-->
</span>   <span><span><span><script> src<span >="http://export.dhtmlx.com/gantt/api.js"</script></span>></span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span>

>看起来与我们先前创建的菜单相似。 Paddingy属性将顶部和底部填充值设置为0。元素属性定义了工具栏内容,就像我们菜单示例中的数据属性一样。工具栏的第一个元素是我们的菜单,而第二个是分段按钮。当您想在我们示例中的比例单元之类的可用值之间切换时,这很有用。另外一个活动处理程序用于管理用户的选择,但这一次是Onchange事件。它在更改当前选择的按钮后发射。我们先前定义的功能将根据所选按钮ID更改比例。选项属性在控件中定义按钮(段)。

最后,是时候将工具栏添加到我们的图表中了。为此,只需将工具栏变量添加到您的布局代码:

>

<span>var tasks = {
</span>   <span>data: [{
</span>         <span>id: 1,
</span>         <span>text: "Project #1",
</span>         <span>start_date: "01-06-2015",
</span>         <span>duration: 11,
</span>         <span>progress: 0.6,
</span>         <span>open: true
</span>      <span>}, {
</span>         <span>id: 2,
</span>         <span>text: "Task #1",
</span>         <span>start_date: "03-06-2015",
</span>         <span>duration: 5,
</span>         <span>progress: 1,
</span>         <span>open: true,
</span>         <span>parent: 1
</span>      <span>},
</span>      <span>/*some more tasks*/
</span>      <span>{
</span>         <span>id: 6,
</span>         <span>text: "Task #2.3",
</span>         <span>start_date: "05-06-2015",
</span>         <span>duration: 4,
</span>         <span>progress: 0.2,
</span>         <span>open: true,
</span>         <span>parent: 3
</span>      <span>}
</span>   <span>],
</span>   <span>links: [{
</span>         <span>id: 1,
</span>         <span>source: 1,
</span>         <span>target: 2,
</span>         <span>type: "1"
</span>      <span>}, {
</span>         <span>id: 2,
</span>         <span>source: 1,
</span>         <span>target: 3,
</span>         <span>type: "1"
</span>      <span>},
</span>      <span>/*some more links*/
</span>      <span>{
</span>         <span>id: 5,
</span>         <span>source: 5,
</span>         <span>target: 6,
</span>         <span>type: "0"
</span>      <span>}
</span>   <span>]
</span><span>};</span>
这是结果:

使用Webix制作自己的甘特图我们的图表现在可扩展。菜单图标将帮助用户做出选择。

>

结论

在本文中,我们看到了如何构建基于DHTMLXGANTT的Gantt Chart应用程序,根据其整体持续时间设置适当的规模,并将其导出到文件中以满足进一步的需求。我们拥有的是轻巧的在线图表创建工具。

目前只有几篇有关Webix与DHTMLXGANTT集成的文章。但是,根据这篇名为“ Webix UI - Gantt Pro的用例”的帖子,最近使用Webix来创建GantTPro - 高级在线Gantt Chart应用程序。这使我猜想,通过使用帖子中描述的功能和UI组件,您将能够大大扩展gantt Chart功能。

>如果要查看源代码和演示,则可以访问此GitHub页面。

>常见问题(常见问题解答)有关使用Webix

创建自己的甘特图

>如何自定义Webix中的gantt图表的外观?您可以更改条,文本和网格线的颜色,大小和样式。您还可以添加标签,工具提示和传说。要自定义外观,您需要在JavaScript代码中修改GANTT图表对象的属性。例如,要更改条形的颜色,您可以使用“颜色”属性。您还可以使用CSS进一步自定义gantt图表的外观。

我可以在gantt图表中的任务之间添加依赖关系吗?

是的,您可以在gantt图表中添加依赖项在Webix中。依赖项由连接任务条的线路表示。要添加依赖关系,您需要为数据中的任务指定“依赖关系”属性。该属性的值应该是其依赖任务的ID。这将自动从因任务绘制一条线,从其依赖的任务绘制。

>

>如何处理甘特图表中的大量数据? webix提供了几个功能来处理gantt图表中的大量数据。您可以使用“分页”功能将数据分为页面。这使您一次显示大量数据。您还可以使用“过滤”功能仅显示符合某些条件的数据。如果要专注于特定任务,这可能很有用。

>我可以将gantt图表导出到PDF或图像文件吗? Webix中的图像文件。如果您想与他人共享图表或将其包含在报告中,这将很有用。要导出图表,您需要使用gantt图表对象的“导出”或“导出”方法。这将生成图表的PDF或PNG文件。您可以添加事件侦听器以响应用户操作,例如单击或拖动栏。您还可以使用“可编辑”属性来允许用户直接在图表中编辑任务。如果您想允许用户更新任务的进度,这可能很有用。

我可以使用webix在移动应用程序中创建gantt图表吗?在移动应用程序中创建甘特图。 Webix是一个JavaScript库,因此可以在支持JavaScript的任何平台中使用。这包括移动平台,例如iOS和Android。甘特图将自动适应设备的屏幕尺寸。

如何将里程碑添加到我的gantt图表中?

>您可以通过与Webix中的gantt图表添加里程碑,并通过创建任务中的任务持续时间为零。这些任务将在图表中显示为钻石。要创建一个里程碑,您需要指定任务的“ start_date”和“ end_date”属性。这将创建一个持续时间为零的任务,该任务将显示为一个里程碑。

我可以使用webix创建具有多个时间表的gantt图表吗?

是的,您可以使用webix创建具有多个时间表的甘特图。如果您要显示项目的不同级别或项目的不同方面,这将很有用。要创建多个时间表,您需要使用任务的“子任务”属性。这使您可以创建一个任务的层次结构,每个任务都有自己的时间表。

>

>如何将资源添加到我的gantt图表中?

>

>您可以通过创建通过创建Webix中的gantt图表添加资源具有“资源”属性的任务。该属性应该是包含资源详细信息(例如其名称和容量)的对象。该资源将在图表中显示为任务旁边的标签。

>

>我可以使用Webix在Web应用程序中创建gantt图表吗? Webix是一个JavaScript库,因此可以在支持JavaScript的任何平台中使用。这包括Web平台,例如HTML5和CSS3。甘特图将自动适应设备的屏幕尺寸。

以上是使用Webix制作自己的甘特图的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
在JavaScript中替换字符串字符在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

构建您自己的Ajax Web应用程序构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此,在这里,您准备好了解所有称为Ajax的东西。但是,到底是什么? AJAX一词是指用于创建动态,交互式Web内容的一系列宽松的技术。 Ajax一词,最初由Jesse J创造

如何创建和发布自己的JavaScript库?如何创建和发布自己的JavaScript库?Mar 18, 2025 pm 03:12 PM

文章讨论了创建,发布和维护JavaScript库,专注于计划,开发,测试,文档和促销策略。

如何在浏览器中优化JavaScript代码以进行性能?如何在浏览器中优化JavaScript代码以进行性能?Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略,重点是减少执行时间并最大程度地减少对页面负载速度的影响。

如何使用浏览器开发人员工具有效调试JavaScript代码?如何使用浏览器开发人员工具有效调试JavaScript代码?Mar 18, 2025 pm 03:16 PM

本文讨论了使用浏览器开发人员工具的有效JavaScript调试,专注于设置断点,使用控制台和分析性能。

jQuery矩阵效果jQuery矩阵效果Mar 10, 2025 am 12:52 AM

将矩阵电影特效带入你的网页!这是一个基于著名电影《黑客帝国》的酷炫jQuery插件。该插件模拟了电影中经典的绿色字符特效,只需选择一张图片,插件就会将其转换为充满数字字符的矩阵风格画面。快来试试吧,非常有趣! 工作原理 插件将图片加载到画布上,读取像素和颜色值: data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地读取图片的矩形区域,并利用jQuery计算每个区域的平均颜色。然后,使用

如何构建简单的jQuery滑块如何构建简单的jQuery滑块Mar 11, 2025 am 12:19 AM

本文将引导您使用jQuery库创建一个简单的图片轮播。我们将使用bxSlider库,它基于jQuery构建,并提供许多配置选项来设置轮播。 如今,图片轮播已成为网站必备功能——一图胜千言! 决定使用图片轮播后,下一个问题是如何创建它。首先,您需要收集高质量、高分辨率的图片。 接下来,您需要使用HTML和一些JavaScript代码来创建图片轮播。网络上有很多库可以帮助您以不同的方式创建轮播。我们将使用开源的bxSlider库。 bxSlider库支持响应式设计,因此使用此库构建的轮播可以适应任何

如何使用Angular上传和下载CSV文件如何使用Angular上传和下载CSV文件Mar 10, 2025 am 01:01 AM

数据集对于构建API模型和各种业务流程至关重要。这就是为什么导入和导出CSV是经常需要的功能。在本教程中,您将学习如何在Angular中下载和导入CSV文件

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)