甘特图 Dhtmlx Gantt

这篇具有很好参考价值的文章主要介绍了甘特图 Dhtmlx Gantt。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

介绍
在一些任务计划、日程进度等场景中我们会使用到甘特图,Dhtmlx Gantt 对于甘特图的实现支持很友好,文档API介绍全面,虽然增强版的收费,但免费版的足以够用。
官网:https://docs.dhtmlx.com/gantt/
安装dhtml gannt插件

npm install dhtmlx-gantt

引入插件

//页面引入,如果多个页面使用可以全局引入
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';

页面代码

<template>
    <div class="gantt-box" ref="ganttRef"></div>
</template>

<script setup>
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import { onMounted, ref } from 'vue';
const ganttRef = ref(null);
const data = {
    data: [
        {
            id: 1,
            text: 'projectName',
            start_date: '01-04-2023',
            end_date: '05-12-2023',
            duration: 248,
            progress: 0.3,
            open: true,
            color: '#b38989'
        },
        {
            id: 2,
            text: '任务1',
            start_date: '02-04-2023',
            end_date: '11-07-2023',
            duration: 100,
            progress: 0.6,
            parent: 1
        },
        {
            id: 3,
            text: '任务2',
            start_date: '12-07-2023',
            end_date: '09-09-2023',
            duration: 59,
            progress: 0,
            parent: 1
        }
    ],
    links: [
        { id: 1, source: 1, target: 2, type: '1' },
        { id: 2, source: 2, target: 3, type: '0' }
    ]
};
const columns = [
    { name: 'text', label: '项目名称', tree: true, min_width: 140 },
    { name: 'start_date', label: '开始时间', min_width: 100 },
    { name: 'end_date', label: '结束时间', min_width: 100 },
    { name: 'duration', label: '计划工期' },
    { name: 'add', label: '' }
];
const initGantt = () => {
    // 清空之前的配置
    gantt.clearAll();

    gantt.i18n.setLocale('cn'); // 设置中文
    gantt.config.readonly = true; // 设置为只读

    gantt.plugins({
        tooltip: true,
        quick_info: true // 快速信息框
        // multiselect: true,// 激活多任务选择
    });
    gantt.config.show_quick_info = true;

    gantt.config.tooltip_offset_x = 10;
    gantt.config.tooltip_offset_y = 30;

    // gantt.config.open_split_tasks = false;
    gantt.config.details_on_create = true; // 创建新事件通过点击“+”按钮打开灯箱
    gantt.config.autofit = true; // 甘特图图表宽度自适应
    // gantt.config.resize_rows = true; // 用户可以通过拖拽调整行高

    // 图表项目栏可以任意拖拽(任意节点下)
    gantt.config.order_branch = false;
    gantt.config.order_branch_free = false;

    gantt.config.placeholder_task = false; // 新增空白列后新增项目

    gantt.config.scale_height = 50;

    gantt.config.show_links = true; //是否显示依赖连线

    gantt.config.sort = false; // 点击表头可排序

    gantt.config.row_height = 40; //设置行高

    gantt.config.drag_project = true;

    gantt.config.scales = [
        // 设置时间刻度相关属性

        // 显示月日用这个
        // { unit: 'month', step: 1, format: '%Y-%m' },
        // { unit: 'day', step: 1, format: '%Y-%m-%d' }

        // 显示年月用这个
        { unit: 'year', step: 1, format: '%Y' },
        { unit: 'month', step: 1, format: '%M' }
    ];
    // gantt.config.start_date = new Date(
    //     `${new Date().getFullYear() - 1},${new Date().getMonth()},${new Date().getDay()}`
    // );
    // gantt.config.end_date = new Date(`${new Date().getFullYear() + 1},${new Date().getMonth()},${new Date().getDay()}`);
    // gantt.config.show_tasks_outside_timescale = true;

    gantt.config.auto_scheduling = true;

    // 配置Gantt内置弹出框内容
    gantt.templates.lightbox_header = function (start_date, end_date, task) {
        return `<b>${task.text}</b>`;
    };
    gantt.config.lightbox.sections = [
        {
            name: 'description',
            height: 36,
            map_to: 'text',
            type: 'textarea',
            focus: true
        },
        { name: 'time', type: 'duration', map_to: 'auto' },
        {
            name: 'Participants',
            height: 36,
            map_to: 'Participants',
            type: 'ParticipantsPlan',
            focus: true
        },
        {
            name: 'BgColor',
            height: 36,
            map_to: 'color',
            type: 'ParticipantsPlanColor',
            focus: true
        }
    ];

    gantt.templates.tooltip_text = function (start, end, task) {
        return (
            task.text +
            '<br/><span>开始:</span> ' +
            gantt.templates.tooltip_date_format(start) +
            '<br/><span>结束:</span> ' +
            gantt.templates.tooltip_date_format(end) +
            '<br/><span>进度:</span> ' +
            Math.round(task.progress * 100) +
            '%'
        );
    };
    gantt.config.bar_height = 30;
    // 自定义信息弹窗class
    gantt.templates.quick_info_class = function () {
        return 'default-quick-info';
    };
    // 自定义信息弹窗头部class
    gantt.templates.grid_header_class = function () {
        return 'progress-header';
    };
    gantt.templates.quick_info_content = function (start, end, task) {
        return `
                    <div>
                        ${task.text}<br/>
                        计划开始 : ${gantt.templates.tooltip_date_format(start)}<br/>
                        计划结束:${gantt.templates.tooltip_date_format(end)}<br/>
                        进度 : ${Math.round(task.progress * 100) + '%'}<br/>
                        状态 :
                    </div>
                `;
    };
    // 设置树形列的父项图标
    gantt.templates.grid_folder = function () {
        return '';
    };
    // 设置树形列的子项图标
    gantt.templates.grid_file = function () {
        return '';
    };

    // 自定义进度条上的文本
    gantt.templates.task_text = function (start, end, task) {
        return `
            <span style="margin-left:10px;color:white;">${task.progress * 100}%</span>
          `;
    };

    // 自定义progress_text内容
    gantt.templates.progress_text = function () {
        // return "<span style='text-align:left;'>" + Math.round(task.progress * 100) + '% </span>';
        return '';
    };

    gantt.config.columns = columns;
    // 初始化甘特图
    gantt.init(ganttRef.value);
    // 渲染数据
    gantt.parse(data);
};

onMounted(() => {
    initGantt();
});
</script>

<style lang="less" scoped>
.gantt-box {
    width: 1000px;
    height: 400px;
}
// /deep/.default-quick-info {
//     background-color: aqua;
// }
</style>

效果
甘特图 Dhtmlx Gantt,vue3+vite,其他,甘特图,vue.js,前端文章来源地址https://www.toymoban.com/news/detail-612868.html

到了这里,关于甘特图 Dhtmlx Gantt的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 甘特图组件DHTMLX Gantt用例 - 如何拆分任务和里程碑项目路线图

    创建一致且引人注意的视觉样式是任何项目管理应用程序的重要要求,这就是为什么我们会在这个系列中继续探索DHTMLX Gantt图库的自定义。在本文中我们将考虑一个新的甘特图定制场景,DHTMLX Gantt组件如何创建一个项目路线图。 DHTMLX Gantt正式版下载 用例 - 带有自定义时间尺

    2024年02月05日
    浏览(45)
  • 甘特图工具DHTMLX Gantt 8.0抢先看, 改进的资源管理、更新的自动计划等功能,一起查阅吧

    DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的大部分开发需求,具备完善的甘特图图表库,功能强大,价格便宜,提供丰富而灵活的JavaScript API接口,与各种服务器端技术(PHP,ASP.NET,Java等)简单集成,满足多种定制开发需求

    2023年04月08日
    浏览(61)
  • vue2实现可拖拽甘特图(结合element-ui的gantt图)

      接到公司需求,要做一个可拖拽的甘特图来实现排期需求,官方的插件要付费还没有中文的官方文档可以看,就去找了各种开源的demo来看,功能上都不是很齐全,于是总结了很多demo,合在一起组成了一版较为完整的满足需求的甘特图。 1.拖拽  拖拽功能是甘特图的主要功

    2024年02月03日
    浏览(50)
  • 在vue中element ui 结合frappe-gantt实现一个简单的甘特图功能

    在vue中创建甘特图步骤请参考: https://editor.csdn.net/md/?articleId=130145782 实现效果: 2.1 下载element ui 因为我是在vue3中,所以下载element-plus 执行 npm i element-plus --save main.js 里引入element ui 2.2. 创建Gantt.vue组件 这样就可以实现一个简单的功能了。

    2024年02月12日
    浏览(40)
  • DHTMLX Gantt入门使用教程【引入】:如何开始使用 dhtmlxGantt

    DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的大部分开发需求,具备完善的甘特图图表库,功能强大,价格便宜,提供丰富而灵活的JavaScript API接口,与各种服务器端技术(PHP,ASP.NET,Java等)简单集成,满足多种定制开发需求

    2023年04月14日
    浏览(62)
  • DHTMLX JavaScript Gantt Chart 8.0.5 Crack

    8.0.5 September 1, 2023. Bugfix release Fixes Fix incorrect warnings triggered by enabling extensions via the gantt.getGanttInstance configuration Fix the incorrect work of gantt.exportToExcel() when the skip_off_time config is enabled Improvements for the Samples Viewer Comprehensive JavaScript HTML5 Gantt Chart DHTMLX Gantt is the most complete Gantt chart

    2024年02月07日
    浏览(45)
  • vue3创建项目,vite+js

    之前的时候大哥就让我自己搭架子,但是我拖延症,现在用到了,得自己搭了 我的项目都放到了 VuePorjects这个目录里面, 一、先进入到指定工作目录,(不是你要创建的项目的名称哈) 二、创建vue3项目,安装创建项目  @latest是项目名称,可以自己修改项目名称,然后选择

    2024年02月16日
    浏览(66)
  • Vue3+Vite前端知识汇总1篇

       目录 1、设置package.json,让编译完成后自动打开浏览器。 2、设置vite.config.ts,设置src别名,后面就不用 ../../../ 了。 3、安装@types/node  解决vscode显示红波浪线问题。  4、安装 sass和reset.css 5、创建并引入全局组件,HospitalTop 6、安装路由,并添加切换路由后滚动到顶部功能

    2024年02月16日
    浏览(45)
  • 前端VUE3+Vite +UniAPP-- 框架搭建

    除了HBuilderX可视化界面,也可以使用 cli 脚手架,可以通过 vue-cli 创建 uni-app 项目。 全局安装 vue-cli 官网 配置tailwindcss插件 官网 在 tailwind.config.js 配置文件中添加所有模板文件的路径。 将加载 Tailwind 的指令添加到你的 CSS 文件中 在你的主 CSS 文件中通过 @tailwind 指令添加每一

    2024年02月11日
    浏览(45)
  • Vite + Vue3 实现前端项目工程化

    Vue3 发布至今,周边的生态、技术方案已足够成熟,个人认为新项目是时候切换到 Vite + Vue3 了。今天就给大家操作一下这种技术方案实现前端工程化。 数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus Vue权限系统案例 个人博客 通过官方脚手架初始化项目 第一种方式,这是使

    2024年02月03日
    浏览(74)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包