当前位置：首页 > news >正文

Dhtmlx Gantt教程

news 来源：原创 2025/4/24 8:47:15

想实现的效果
在这里插入图片描述
插件安装：

npm i dhtmlx-gantt

使用该插件的时候，直接导入包和对应的样式即可：

import { Gantt} from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

也可以安装试用版本，和稳定版本有点区别

npm install @dhx/trial-gantt

如果您选择安装试用版，导入路径应如下

import { Gantt} from "@dhx/trial-gantt";
import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";

仿造官网给出的案例，如下

import { useEffect, useRef } from 'react';
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import './index.less'const data = {// 任务数据data: [{id: 1,text: 'projectName',start_date: '01-04-2023',end_date: '05-12-2023',progress: 0.3,value: 20,},{id: 2,text: '任务1',start_date: '02-04-2023',end_date: '11-07-2023',progress: 0.6,value: 20,},{id: 3,text: '任务211',start_date: '02-04-2023',end_date: '23-07-2023',progress: 0,value: 20,}],// 任务连线数据links: [{ id: 1, source: 1, target: 2, type: '1' },{ id: 2, source: 2, target: 3, type: '0' }]
};// 左侧标题数据
const columns = [{ name: 'text', label: '项目名称',  width: 100, align: "center" },{ name: 'start_date', label: '开始时间', width: 100, align: "center" },{ name: 'start_date', label: '开始时间', width: 100, align: "center" },{ name: 'value', label: '计划工期', width: 100, align: "center" },
];const GanttView = () => {// 获取gantrt容器实例const ganttRef = useRef<any>();// 初始化ganttconst initGantt = () => {// 基础配置gantt.clearAll() // 清空之前的配置gantt.i18n.setLocale('cn'); // 设置中文gantt.config.readonly = true; // 设置为只读，否则是可以移动甘特图和连线的gantt.init(ganttRef.current); // 初始化甘特图gantt.parse(data); // 渲染数据gantt.config.order_branch = "marker";// 表头样式设置gantt.config.scale_height = 60; // 设置表头高度gantt.config.sort = true; // 点击表头可排序gantt.config.columns = columns; // 设置左侧表头数据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.row_height = 40; // 设置内容行高gantt.config.bar_height = 40; // 设置进度条高度gantt.templates.task_text = function (start, end, task) { // 自定义内容进度上的文本return '内容'};// 表内容背景颜色gantt.templates.task_row_class = function (start, end, task) {return "gantt_task111";};// tooltips样式设置gantt.plugins({tooltip: true,});gantt.config.tooltip_offset_x = 10; gantt.config.tooltip_offset_y = 30;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.show_links = true;}useEffect(() => {initGantt();}, []);return (<div className="ganttView"><div className='ganttContainer' ref={ganttRef}></div></div>)
};
export default GanttView;