项目管理软件dhtmlxGantt配置教程（十六）：如何设置动态化比例

小董讲MES

关注

最新推荐文章于 2024-10-12 11:08:36 发布 · 1.1k 阅读

原创

本文为博客 VIP 文章，开通 VIP 后可阅读全文

开通 VIP

配置设置

要动态更改比例的设置（例如步进、子比例）（在 dhtmlxGantt 初始化之后），请使用以下技术：

为相关配置选项设置新值。例如，要将刻度的单位从“月”更改为“日”，请使用scales属性的unit属性。

重新定义相关模板（如果需要）。例如，要在 scale 中突出显示周末，请使用scale_cell_class模板。

使用render方法重新绘制甘特图。

gantt.config.scales = [
    {unit: "month", step: 1, format: "%F, %Y"},
];
 
gantt.init("gantt_here");
 
 
gantt.config.scales = [                         
    {unit: "day", step: 1, format: "%d %M, %D"} 
];                                              
gantt.templates.scale_cell_class = function(date){
    if(date.getDay()==0||date.getDay()==6){
        return "weekend";
    }
};
gantt.render();

dhtmlxGantt享有超十年声誉，支持跨浏览器和跨平台，性价比高，可满足项目管理控件应用的所有需求，是最完善的甘特图图表库。了解更多内容，欢迎在线咨询或者私信我获取正版试用版及报价。

最低0.47元/天解锁文章

收录于

当前文章被以下社区和专栏收录：

标签

#项目管理工具 #dhtmlxgantt #甘特图 #项目管理软件 #DHTMLXGantt

甘特图 Dhtmlx Gantt 甘特图Dhtmlx Gantt 阅读详情

相关推荐

项目管理软件dhtmlxGantt配置教程（十二）：如何自定义时间单位

这篇文章给大家带来dhtmlxGantt如何自定义时间的单位。

需要项目管理工具、数据库管理工具、JAVA开发工具等下载和试用资源的朋友，记得私信我~ 2061

dhtmlxGantt 甘特图学习记录

dhtmlxGantt学习记录

胖达哒的博客 590

关于dhtmlxGantt甘特图的一些设置

继上次关于wex5的文章之后，这次来写写dhtmlxGantt甘特图的一些基本设置，可以展示一些更多的功能实现，代码的话在平台里面是可以直接引用的，下面来介绍一下有哪些设置（上一篇关于wex5如何使用dhtmlxGantt甘特图）一：搜索功能上次文章里面没有写，这次提一下吧，其实dhtmlxGantt甘特图里面自带搜索功能的如图所示下面是代码展示：第一部分里面是设置列的，这里只显示...

CX_silent的博客 1万+

项目管理软件dhtmlxGantt配置教程（十）：如何设置时间和范围

这篇文章给大家带来dhtmlxGantt时间和范围设置的讲解。

需要项目管理工具、数据库管理工具、JAVA开发工具等下载和试用资源的朋友，记得私信我~ 6358

Gantt - config配置信息

Ariel_tilamisu的博客 6033

甘特图组件DHTMLX Gantt用例 - 如何自定义任务、月标记和网格新外观

本文将为大家揭示DHTMLX Gantt自定义的典型用例，包括自定义任务、网格的新外观等，欢迎下载最新版控件体验~

需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~ 3695

Vue项目的甘特图组件：dhtmlx-gantt使用教程和实现效果展示

公司的甘特图需求，研究了几个组件后，选择使用 dhtmlx-gantt 进行实现，dhtmlx-gantt使用其实是偏简单的，文档虽然是英文，但配合翻译也是可以看懂的，下面将公司需求的代码实现粘贴出来，并简单介绍一下使用方法，希望对你有帮助。下面讲一下 dhtmlx-gantt 的一些配置项，也可以说是我用到的配置项，更多的就要参考官方文档了。需求是不需要bar连线的，所以将bar连线注释掉了，连线也是可以有的。如果你的页面能展示出来基本样式，那么就成功啦，咱们继续下一步。然后在css内定义样式就好啦。

Yy55gc25112的博客 2万+

DHTMLX-VUE中引入DHTMLX Gantt的方式

1. 安装 npm install dhtmlx-gantt 2. 创建组件 2.1 组件创建 <template> <div ref="gantt"></div> </template> //中文语言 <script src="dhtmlx-gantt/codebase/locale/locale_cn.js"></script> <script> import {gantt} from 'dhtmlx-gan

qq_19331985的博客 2220

Vue Dhtmlxgantt甘特图/横道图 baselines 含（计划、实际时间对比）树形实例实现及部分扩展

满足计划、实际时间甘特图对比需求

null 6846

vue使用甘特图(实现树形结构/一条数据显示双时间轴)

1.引用甘特图: impot gantt from “dhtmlx-gantt” 这里引用7.0.7版本本 2.在mounted里面initGanttConfig()〈初始化配置数据〉和getGanttData()〈放入数据〉 3.initGanttConfig为:

qq_36566924的博客 6813

dhtmlx Gantt知识点2

weixin_34186128的博客 747

DHTMLX Gantt（甘特图resize有效）+vue框架的使用方法

DHTMLX Gantt（甘特图resize有效）+vue框架的使用方法官网demo参照地址： 1.下载依赖 npm install dhtmlx-gantt --save 2.创建一个gantt.vue画面（封装gantt组件） <template> <div ref="gantt" class="left-container" ></div> </template> <script> import { gantt } from "dhtm

weixin_43875471的博客 1972

gantt/甘特图完整代码（带注释，可以复制）

gantt/甘特图完整代码（带注释，可以复制然后直接开整）

zheshihuahua的博客 2026

dhtmlx甘特图--vue2

基于vue2的dhtmlx甘特图

weixin_44364294的博客 7188

Vue2使用dhtmlx-gantt插件实现复杂甘特图

<template> <div class="container"> <div ref="gantt" class="gantt-container" /> </div> </template> <script> import { gantt } from 'dhtmlx-gantt' import 'dhtmlx-gantt/codebase/dhtmlxgantt.css' export default {

weixin_51140082的博客 8890

一文搞定dhtmlx-gantt调度界面，vue下使用dhtmlxgantt进行项目甘特图模块设计开发（前端界面显示篇（1））

(1) dhtmlxgantt是进行甘特图开发过程中所用到的插件库，用于跨浏览器和跨平台应用程序的功能较为齐全的Gantt图表。其祖家组件为一个JavaScript库，提供了一套完整的Ajax驱动的UI组件。其中支持文本字样可编辑、日期点击弹出日历可选择日期、不同任务选择不同颜色，自动显示进度，进度条总工期和当下进展用深浅色显示。本文基于在较为成熟完整的项目，进行甘特图模块开发的内容。（2）引用font-awesome.min.css图标,为了显示各种图表插件。(3)关于css样式渲染甘特图界面。

weixin_44979308的博客 8105

Vue+DHTMLX Gantt（甘特图）的使用方法

如何使用Vue跟DHTMLX Gantt做甘特图？我们就先做个简单的demo吧！一：安装依赖 //(for yarn) yarn add dhtmlx-gantt --save //(for npm) npm install dhtmlx-gantt --save 二：创建一个gantt.vue组件 <template> <div ref="gantt" class="left-container"></div> </template> &l

AnnaF的博客 1万+

dhtml gantt所有配置_甘特图dhtmlxGantt使用教程：如何快速设置内联编辑器和编辑JavaScript Gantt数据...

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。它允许你创建动态甘特图，并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt，你可以显示活动之间的依赖关系，显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。甘特图的一项基本功能是能够快速编辑项目数据。在本教程中，我们将分享有关如何设置内联...