前端vue实现甘特图功能
gantt.config: {
task_height: 28, //时间轴图表中，任务条形图的高度
row_height: 36, //时间轴图表中，甘特图的高度
add_column: true, // 添加符号
auto_types: true, //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
xml_date: '%Y-%m-%d', //从后端过来的数据格式化
show_grid: false, //是否显示左侧树表格
autosize: true, //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
date_format: "%Y-%m-%d-%H", //日期格式化
autofit: true, //左侧自适应
grid_width: 500, //左侧宽
drag_links: true, //是否连线
readonly: false, //只读
resize_rows: true, //允许调整行高
select_task: true, //右侧显示列名
scales: [
{ unit: "day", step: 1, format: "%Y-%m-%d" },
{ unit: "hour", step: 1, format: "%Y-%m-%d %H" },
{ unit: "minute", step: 1, format: "%Y-%m-%d %H:%i" },
{ unit: "second", step: 1, format: "%Y-%m-%d %H:%i:%s" },
{ unit: "week", step: 1, format: "%Y-%m-%d %H:%i" },
{ unit: "month", step: 1, format: "%Y-%m" },
{ unit: "year", step: 1, format: "%Y" },
], // 右侧时间格式
fit_tasks: true, //自动调整图表坐标轴区间用于适配task的长度
wide_form: false, //弹窗宽
}
// 汉化
gantt.locale = {
date: {
month_full: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
day_short: ["日", "一", "二", "三", "四", "五", "六"]
},
labels: {
dhx_cal_today_button: "今天",
day_tab: "日",
week_tab: "周",
month_tab: "月",
new_event: "新建日程",
icon_save: "保存",
icon_cancel: "关闭",
icon_details: "详细",
icon_edit: "编辑",
icon_delete: "删除",
confirm_closing: "请确认是否撤销修改!",
confirm_deleting: "是否删除计划?",
section_description: "描述:",
section_time: "时间范围:",
section_type: "类型",
section_text: "任务名称:",
section_color: "颜色:",
/* grid columns */
column_text: "计划名称",
column_start_date: "开始时间",
column_duration: "持续时间",
column_add: "",
/* link confirmation */
link: "关联",
confirm_link_deleting: "将被删除",
link_start: " (开始)",
link_end: " (结束)",
type_task: "任务",
type_project: "项目",
type_milestone: "里程碑",
minutes: "分钟",
hours: "小时",
days: "天",
weeks: "周",
months: "月",
years: "年"
}
}
// 鼠标操作甘特图--悬浮显示详情、拖动条目、拖动图等配置
gantt.plugins({
click_drag: true,//用于启用或禁用通过单击任务条目并拖动来更改任务的开始和结束日期的功能
drag_timeline: true,// 拖动图
marker: true,// 时间标记
fullscreen: true,// 全屏
tooltip: true,// 鼠标经过时信息
undo: true // 允许撤销
})