推荐几款好用的开源甘特图，附示例代码

于 2024-08-16 16:43:18 发布
阅读量804 收藏 18
点赞数 8
分类专栏： 车间调度 甘特图 文章标签： 甘特图 车间调度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hba646333407/article/details/141262369
版权

在这里插入图片描述

获取更多资讯，赶快关注上面的公众号吧！

甘特图在车间调度中发挥重要的作用。通过甘特图可以清晰地展示出每个任务的开始时间、结束时间、持续时间和进度情况等信息，同时也可以直观地反映出车间的繁忙程度和资源利用情况。本文将介绍几款功能强大、基于JavaScript的甘特图插件。
在这里插入图片描述

文章目录

FullCalendar

官网

下载链接

Github开源

FullCalendar 是一个功能强大的 JavaScript 库，用于创建和管理交互式的日历界面。它广泛应用于各种 Web 应用程序中，支持多种视图和事件管理功能。以下是 FullCalendar 的一些主要特点和功能：

主要特点

  1. 多种视图：支持月视图、周视图和日视图，可以自定义视图。
  2. 事件管理：允许用户添加、编辑、删除和拖放事件。
  3. 时间轴：提供详细的时间轴视图，适用于日程安排。
  4. 响应式设计：自适应不同设备的屏幕尺寸。
  5. 可扩展性：支持自定义样式和功能，易于集成其他库（如 jQuery）。
  6. 国际化：支持多种语言，适应全球用户需求。
  7. 日历导航：内置前后导航按钮，方便用户浏览不同日期。
  8. 插件支持：提供丰富的插件接口，扩展功能更加方便。

示例1：基本的月视图日历

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<html>
<meta charset='utf-8'/>
<head>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
    <style type="text/css">
        html, body {
     
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }
        #calendar {
     
            max-width: 1100px;
            margin: 40px auto;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
     
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
     
                timeZone: 'UTC',
                initialView: 'dayGridMonth',
                events: 'https://fullcalendar.io/api/demo-feeds/events.json',
                editable: true,
                selectable: true
            });
            calendar.render();
        });
    </script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

示例2：添加拖放功能的日历

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<html>
<meta charset='utf-8'/>
<head>

    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
    <style type="text/css">
        html, body {
     
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }

        #external-events {
     
            position: fixed;
            z-index: 2;
            top: 20px;
            left: 20px;
            width: 150px;
            padding: 0 10px;
            border: 1px solid #ccc;
            background: #eee;
        }

        #external-events .fc-event {
     
            cursor: move;
            margin: 3px 0;
        }

        #calendar-container {
     
            position: relative;
            z-index: 1;
            margin-left: 200px;
        }

        #calendar {
     
            max-width: 1100px;
            margin: 20px auto;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
     
            var Calendar = FullCalendar.Calendar;
            var Draggable = FullCalendar.Draggable;

            var containerEl = document.getElementById('external-events');
            var calendarEl = document.getElementById('calendar');
            var checkbox = document.getElementById('drop-remove');

            // initialize the external events
            // -----------------------------------------------------------------

            new Draggable(containerEl, {
     
                itemSelector: '.fc-event',
                eventData: function (eventEl) {
     
                    return {
     
                        title: eventEl.innerText
                    };
                }
            });

            // initialize the calendar
            // -----------------------------------------------------------------

            var calendar = new Calendar(calendarEl, {
     
                headerToolbar: {
     
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                editable: true,
                droppable: true, // this allows things to be dropped onto the calendar
                drop: function (info) {
     
                    // is the "remove after drop" checkbox checked?
                    if (checkbox.checked) {
     
                        // if so, remove the element from the "Draggable Events" list
                        info.draggedEl.parentNode.removeChild(info.draggedEl);
                    }
                }
            });

            calendar.render();
        });
    </script>

</head>
<body>
<div id='external-events'>
    <p>
        <strong>Draggable Events</strong>
    </p>

    <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
        <div class='fc-event-main'>My Event 1</div>
    </div>
    <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
        <div class='fc-event-main'>My Event 2</div>
    </div>
    <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
        <div class='fc-event-main'>My Event 3</div>
    </div>
    <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
        <div class='fc-event-main'>My Event 4</div>
    </div>
    <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
        <div class='fc-event-main'>My Event 5</div>
    </div>

    <p>
        <input id='drop-remove' type='checkbox'/>
        <label for='drop-remove'>remove after drop</label>
    </p>
</div>

<div id='calendar-container'>
    <div id='calendar'></div>
</div>
</body>
</html>

示例3：资源日历视图

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<html>
<meta charset='utf-8'/>
<head>

    <script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.15/index.global.min.js'></script>
    <style type="text/css">
        html, body {
     
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }

        #calendar {
     
            max-width: 1100px;
            margin: 40px auto;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
     
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
     
                timeZone: 'UTC',
                schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
                headerToolbar: {
     
                    left: 'today prev,next',
                    center: 'title',
                    right: 'resourceTimelineDay,resourceTimelineTenDay,resourceTimelineMonth,resourceTimelineYear'
                },
                initialView: 'resourceTimelineDay',
                scrollTime: '08:00',
                aspectRatio: 1.5,
                views: {
     
                    resourceTimelineDay: {
     
                        buttonText: ':15 slots',
                        slotDuration: '00:15'
                    },
                    resourceTimelineTenDay: {
     
                        type: 'resourceTimeline',
                        duration: {
      days: 10 },
                        buttonText: '10 days'
                    }
                },
                editable: true,
                resourceAreaHeaderContent: 'Rooms',
                resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
                events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline'
            });

            calendar.render();
        });
    </script>

</head>
<body>
<div id='calendar'></div>
</body>
</html>

示例4：带休息时间的资源日历视图

图图图图图图图图图图图图图

点击查看代码 


<!DOCTYPE html>
<html lang="zh-CN">
<html>
<meta charset='utf-8'/>
<head>

    <script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.15/index.global.min.js'></script>
    <style type="text/css">
        html, body {
     
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }

        #calendar {
     
            max-width: 1100px;
            margin: 40px auto;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
     
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
     
                timeZone: 'UTC',
                schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
                headerToolbar: {
     
                    left: 'today prev,next',
                    center: 'title',
                    right: 'resourceTimelineDay,resourceTimelineTenDay,resourceTimelineMonth,resourceTimelineYear'
                },
                initialView: 'resourceTimelineDay',
                scrollTime: '08:00',
                aspectRatio: 1.5,
                views: {
     
                    resourceTimelineDay: {
     
                        buttonText: ':15 slots',
                        slotDuration: '00:15'
                    },
                    resourceTimelineTenDay: {
     
                        type: 'resourceTimeline',
                        duration: {
      days: 10 },
                        buttonText: '10 days'
                    }
                },
                editable: true,
                resourceAreaHeaderContent: 'Rooms',
                businessHours: {
     
                    // days of week. an array of zero-based day of week integers (0=Sunday)
                    daysOfWeek: [ 1, 2, 3, 4 ], // Monday - Thursday

                    startTime: '10:00', // a start time (10am in this example)
                    endTime: '18:00', // an end time (6pm in this example)
                },
                resources: 'https://fullcalendar.io/api/demo-feeds/resources.json?with-nesting&with-colors',
                events: 'https://fullcalendar.io/api/demo-feeds/events.json?single-day&for-resource-timeline'
            });

            calendar.render();
        });
    </script>

</head>
<body>
<div id='calendar'></div>
</body>
</html>

Highcharts Gantt

官网

下载链接

Github开源

Highcharts Gantt 是 Highcharts 家族的一部分，用于创建互动和高度自定义的甘特图。甘特图是项目管理中常用的工具，用于显示项目计划和进度。Highcharts Gantt 提供了强大的图表功能和灵活的配置选项，适合用来展示项目的任务、里程碑和依赖关系。

主要特点

  1. 互动性强：支持缩放、平移、拖放等交互操作。
  2. 高度自定义：可以通过多种选项来自定义任务、时间轴、样式等。
  3. 丰富的数据支持：支持从各种格式的数据源（如 JSON、CSV）加载数据。
  4. 依赖关系：可以显示任务之间的依赖关系。
  5. 多种视图：支持显示日、周、月等不同时间跨度的视图。
  6. 响应式设计：在不同设备和屏幕尺寸上都有良好的表现。
  7. 国际化：支持多种语言，适应不同地区的用户需求。
  8. 高级功能：如关键路径分析、资源分配等。

示例1：带有依赖关系的甘特图

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<meta charset='utf-8'/>
<head>

</head>
<body>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/accessibility.js"></script>
<style type="text/css">
    @import url("https://code.highcharts.com/css/highcharts.css");

    #container {
     
        max-width: 1800px;
        margin: 1em auto;
    }

    .highcharts-treegrid-node-level-1 {
     
        font-size: 13px;
        font-weight: bold;
    }

</style>
<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

<script>

    const today = new Date(),
        day = 1000 * 60 * 60 * 24;

    // Set to 00:00:00:000 today
    today.setUTCHours(0);
    today.setUTCMinutes(0);
    today.setUTCSeconds(0);
    today.setUTCMilliseconds(0);


    // THE CHART
    Highcharts.ganttChart('container', {
     
        chart: {
     
            styledMode: true
        },
        title: {
     
            text: 'Highcharts Gantt in Styled Mode'
        },
        subtitle: {
     
            text: 'Purely CSS-driven design'
        },
        xAxis: {
     
            min: today.getTime() - (2 * day),
            max: today.getTime() + (32 * day)
        },
        accessibility: {
     
            keyboardNavigation: {
     
                seriesNavigation: {
     
                    mode: 'serialize'
                }
            },
            point: {
     
                descriptionFormat: '{yCategory}. Start {x:%Y-%m-%d}, end ' +
                    '{x2:%Y-%m-%d}.'
            }
        },
        lang: {
     
            accessibility: {
     
                axis: {
     
                    xAxisDescriptionPlural: 'The chart has a two-part X axis ' +
                        'showing time in both week numbers and days.'
                }
            }
        },
        series: [{
     
            name: 'Project 1',
            data: [{
     
                name: 'Planning',
                id: 'planning',
                start: today.getTime(),
                end: today.getTime() + (20 * day)
            }, {
     
                name: 'Requirements',
                id: 'requirements',
                parent: 'planning',
                start: today.getTime(),
                end: today.getTime() + (5 * day)
            }, {
     
                name: 'Design',
                id: 'design',
                dependency: 'requirements',
                parent: 'planning',
                start: today.getTime() + (3 * day),
                end: today.getTime() + (20 * day)
            }, {
     
                name: 'Layout',
                id: 'layout',
                parent: 'design',
                start: today.getTime() + (3 * day),
                end: today.getTime() + (10 * day)
            }, {
     
                name: 'Graphics',
                parent: 'design',
                dependency: 'layout',
                start: today.getTime() + (10 * day),
                end: today.getTime() + (20 * day)
            }, {
     
                name: 'Develop',
                id: 'develop',
                start: today.getTime() + (5 * day),
                end: today.getTime() + (30 * day)
            }, {
     
                name: 'Create unit tests',
                id: 'unit_tests',
                dependency: 'requirements',
                parent: 'develop',
                start: today.getTime() + (5 * day),
                end: today.getTime() + (8 * day)
            }, {
     
                name: 'Implement',
                id: 'implement',
                dependency: 'unit_tests',
                parent: 'develop',
                start: today.getTime() + (8 * day),
                end: today.getTime() + (30 * day)
            }]
        }]
    });


</script>

</body>
</html>

示例2：资源甘特图

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<meta charset='utf-8'/>
<head>

</head>
<body>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<script src="https://code.highcharts.com/gantt/modules/accessibility.js"></script>
<style type="text/css">
    #container {
     
        max-width: 1800px;
        min-width: 1200px;
        height: 400px;
        margin: 1em auto;
    }

    .scrolling-container {
     
        overflow-x: auto
最低0.47元/天 解锁文章
松间沙路hba
关注
  • 8
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
qt实现甘特图（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
07-16 718
qt实现甘特图（附完整源码）
全网最新-VUE甘特图
weixin_43891314的博客
11-07 2547
根据时间展示不同状态的甘特图,全网最新最简单
推荐开源项目：Vue-Gantt-Elastic - 弹性可扩展的甘特图组件
gitblog_00064的博客
06-17 535
推荐开源项目：Vue-Gantt-Elastic - 弹性可扩展的甘特图组件 项目地址:https://gitcode.com/neuronetio/vue-gantt-elastic 1、项目介绍 vue-gantt-elastic 是一款基于 Vue.js 的高效、轻量级的甘特图组件，它旨在帮助开发者轻松地在web应用中展示和管理任务进度。该项目提供了一套简洁的API，使得自定义配置和集成到现...
前端：推荐一款开源免费的浏览器端Markdown编辑器Vditor
IT技术分享社区
06-05 3510
Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。提供桌面版。支持Windows、Linux、MacOS、浏览器扩展、安卓、IOS版本。
推荐：Vue.js框架的甘特图组件
最新发布
gitblog_00046的博客
06-25 350
推荐：Vue.js框架的甘特图组件 项目地址:https://gitcode.com/DHTMLX/vue-gantt-demo 项目介绍 在寻求高效的项目管理和任务调度工具时，我们发现了这个令人惊喜的开源项目——一个专为Vue.js框架设计的甘特图组件。它基于JavaScript的dhtmlxGantt库，提供了一个直观且功能强大的界面，让你能够轻松地创建和管理复杂的项目时间线。 项目技术分析 ...
Mermaid制作甘特图
5年编程经验的老猿。
05-14 3884
最近因为项目需要，这几天一直在学习怎么用JAVAWEB取值制作甘特图，忙了几天，终于整理出来一个简单实用的方法。分享出来给大家参考使用。
Vue制作简单的甘特图控件(日、周、月、季、年显示模式)，可全屏显示，拖动时间，排序，懒加载
热门推荐
X_xiaoqi的博客
01-09 1万+
前端时间公司要求制作一个甘特图的组件,本来想用现成的控件,但搜了下都是要money的,或者就是不太好的控件,后来想了下干脆就自己做好了.花了一个多星期的时间做了一个简单的甘特图控件.这个支持日、周、月、季、年的显示模式 代码文件有点多我就不一一介绍了,要想下载代码GitHub点击这里哦,要是觉得好的话顺便给个star,谢谢支持! 使用方法 在main.js里引用 import...
vue+Gantt如何在vue中使用甘特图，绘制任务进度
cmz1137691128的博客
12-27 8663
vue+Gantt甘特图，实现任务安排，计划安排 文章目录vue+Gantt甘特图，实现任务安排，计划安排前言一、甘特图效果二、使用步骤1.引入库2.页面中使用总结 前言 提示：这里可以添加本文要记录的大概内容： 。 一、甘特图效果 二、使用步骤 1.引入库 代码如下（示例）： yarn add dhtmlx-gantt --save (for yarn) npm install dhtmlx-gantt --save (for npm) 2.页面中使用 代码如下（示例）： <templat
专注WEB项目管理,重磅打造四款甘特图
weixin_34250709的博客
05-10 343
一、普加计划甘特图——WEB甘特图首选解决方案 技术优势： 无需安装插件：有一些ActiveX技术实现的甘特图，需要客户安装插件，否则无法允许，并且只能支持IE浏览器。 普加甘特图是使用JavaScript开发的，天然运行在浏览器环境，支持所有主流浏览器。 体积小巧，易用使用：体积只有150K，加载飞速。简单细致的API文档和开发示例，帮助使用者快...
jQueryGantt_开源甘特图_plenty2x5_源码
10-04
**jQuery Gantt 开源甘特图详解** 在项目管理和任务调度中，甘特图是一种非常实用的工具，它能够清晰地展示任务的时间线和进度。`jQuery.Gantt` 是一个基于 JavaScript 库 `jQuery` 的开源组件，专门用于在 Web ...
KDChart-kdchart-2.6.2-release(1)_qt甘特图开源三方KDChart_甘特图_kdchart_
10-04
KDChart是一款基于Qt框架的开源甘特图库，版本号为2.6.2。它提供了一套完整的API，用于在Qt应用程序中创建和定制甘特图，帮助开发者轻松地实现项目计划和进度的可视化。这个库特别适合那些需要在Qt应用中展示时间...
dhtmlxGantt 官网甘特图示例最新 2018
04-25
**dhtmlxGantt** 是一个强大的JavaScript库，专门用于创建互动式的甘特图。它提供了丰富的功能，使用户能够轻松地展示项目计划、任务管理和时间线，适用于各种Web应用程序。这个资源是2018年从官方网站获取的最新...
C#甘特图实现
12-23
在这个目录下，开发者可以找到代码示例，学习如何创建、填充和显示甘特图。这通常包括数据模型的定义（如任务、开始日期、结束日期等）、UI组件的创建与布局，以及可能的数据绑定逻辑。 `GanttChart`和`...
详解Python使用Plotly绘图工具，绘制甘特图
09-19
本文将详细介绍如何使用Python中的Plotly库来绘制甘特图，并通过实际示例代码帮助读者更好地理解和应用。 #### 二、Plotly简介 Plotly是一款强大的开源数据可视化库，支持多种编程语言（包括Python），能够创建交互...
基于深度强化学习的自适应作业车间调度问题研究
松间沙路的博客
11-24 1万+
获取更多资讯，赶快关注公众号(名称：智能制造与智能调度，公众号：deeprlscheduler)吧！ 文章目录1、论文贡献2、论文框架3、调度环境4、调度问题转化状态特征表达系统动作定义报酬函数设计探索和利用策略5、深度强化学习调度算法6、超参数灵敏度分析7、训练过程8、实验结果 今天给大家带来一篇我们关于使用深度强化学习求解作业车间调度问题的新作：Han, B. A., & Yang, J. J.(2020). Research on Adaptive Job Shop Scheduling P.
论文解读（源码）：求解柔性作业车间调度问题（FJSP）的多动作（multi-action）深度强化学习框架
松间沙路的博客
10-24 9816
今天给大家带来一篇由西南交通大学于2022年发表在《Expert Systems With Applications》上的一篇文章《A multi-action deep reinforcement learning framework for flexible Job-shop scheduling problem》，这篇文章最大的创新就是针对柔性作业车间调度问题，如何通过强化学习解决多决策问题（一般强化学习每次只能输出一个动作，而在FJSP中存在两个决策点）。
100篇文献-万字总结 || 强化学习求解车间调度
松间沙路的博客
08-15 9048
获取更多资讯，赶快关注上面的公众号吧！ 文章目录状态动作奖励探索和利用结论参考文献 近年来强化学习和深度强化学习不断用于求解调度问题，其是在动态调度问题上，它们可以根据不同的调度状态获得自适应的调度策略，在遇到新的问题时，只需要输入新的调度特征就可以快速获得调度解，而无需重新训练。 本文中，作者就强化学习和深度强化学习在生产调度中的应用进行了较为全面的综述，旨在为生产调度从业者和对生产调度应用感兴趣的深度强化学习研究者提供参考。   强化学习求解生产调度问题最早可追溯于1995年[1]，自此国内外学者.
博士论文答辩||基于深度强化学习的复杂作业车间调度问题研究
松间沙路的博客
08-15 6673
获取更多资讯，赶快关注上面的公众号吧！ 文章目录 学生时代终将落下帷幕，新的开始等待我继续努力，加油吧，不辜自我，不负时代，感激之情溢于言表，高兴的，难过的，都值得铭记，因为这是我的青春！ 完整PPT可扫码关注公众号后，回复“PPT”获取下载链接！ 博士论文答辩||基于深度强化学习的复杂作业车间调度问题研究 摘要   近年来出现的云计算、物联网、泛在信息、大数据技术等，以及信息物理.
vxe-table整和甘特图示例代码
02-20
vxe-table 是一个基于 Vue.js 的开源表格组件，它提供了丰富的功能和灵活的配置选项，可以用于快速构建各种类型的表格。甘特图是一种项目管理工具，用于展示项目的进度和时间安排。下面是一个使用 vxe-table 整合甘特图的示例代码： ```html <template> <div> <vxe-table :data="tableData" :columns="tableColumns" :edit-config="{ trigger: 'manual' }" @cell-click="handleCellClick" ></vxe-table> </div> </template> <script> import 'vxe-table/lib/style.css'; import { VXETable } from 'vxe-table'; import XEUtils from 'xe-utils'; export default { data() { return { tableData: [ { id: 1, name: 'Task 1', start: '2022-01-01', end: '2022-01-05' }, { id: 2, name: 'Task 2', start: '2022-01-06', end: '2022-01-10' }, { id: 3, name: 'Task 3', start: '2022-01-11', end: '2022-01-15' }, ], tableColumns: [ { field: 'name', title: 'Task Name' }, { field: 'start', title: 'Start Date' }, { field: 'end', title: 'End Date' }, { field: 'gantt', title: 'Gantt Chart', slots: { default: 'ganttTpl' }, width: 300, }, ], }; }, mounted() { VXETable.renderer.add('ganttTpl', { renderHeader(h, params) { return [ h('div', { class: 'vxe-cell', style: { width: '100%', height: '20px', background: '#e8e8e8', borderRadius: '2px', }, }), ]; }, renderCell(h, params) { const { row } = params; const startDate = new Date(row.start); const endDate = new Date(row.end); const totalDays = XEUtils.getWhatDay(startDate, endDate) + 1; const progressDays = XEUtils.getWhatDay(startDate, new Date()) + 1; const progressWidth = (progressDays / totalDays) * 100; return [ h('div', { class: 'vxe-cell', style: { width: '100%', height: '20px', background: '#1890ff', borderRadius: '2px', }, }, [ h('div', { class: 'vxe-cell-inner', style: { width: `${progressWidth}%`, height: '100%', background: '#52c41a', borderRadius: '2px', }, }), ]), ]; }, }); }, methods: { handleCellClick(params) { if (params.column.property === 'gantt') { // 处理甘特图点击事件 } }, }, }; </script> <style> .vxe-cell { display: flex; align-items: center; } .vxe-cell-inner { display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; } </style> ``` 在上面的示例代码中，我们使用了 vxe-table 的 `vxe-table` 组件来展示表格数据。通过配置 `columns` 属性，我们定义了表格的列信息，其中包括一个名为 `gantt` 的列，用于展示甘特图。通过 `slots` 属性，我们指定了 `gantt` 列的自定义模板 `ganttTpl`。 在 `mounted` 钩子函数中，我们使用 `VXETable.renderer.add` 方法注册了一个自定义渲染器，用于渲染甘特图列的内容。在自定义渲染器的 `renderCell` 方法中，我们根据任务的开始日期和结束日期计算出任务的总天数和已完成的天数，并根据比例计算出进度条的宽度。 通过以上代码，我们可以实现一个简单的使用 vxe-table 整合甘特图的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

松间沙路hba

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值