提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|使用教程|编辑:秦林|2022-10-24 14:02:31.003|阅读 467 次
概述:本文给大家带来dhtmlxGantt如何自定义缩放时间尺度。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
相关链接:
这篇文章给大家带来dhtmlxGantt如何自定义缩放时间尺度。
dhtmlxGantt提供了一个内置模块,用于方便地管理时间尺度缩放。如果您想自定义默认缩放行为,有一个灵活的 API 允许您实现动态更改时间刻度设置的能力。
嵌入式缩放模块在gantt.ext.zoom扩展中声明。要启用该模块,您需要调用gantt.ext.zoom.init(zoomConfig)并传递一个带有配置设置的zoomConfig对象,其中包含一组缩放级别。例如:
var zoomConfig = { levels: [ { name:"day", scale_height: 27, min_column_width:80, scales:[ {unit: "day", step: 1, format: "%d %M"} ] }, { name:"week", scale_height: 50, min_column_width:50, scales:[ {unit: "week", step: 1, format: function (date) { var dateToStr = gantt.date.date_to_str("%d %M"); var endDate = gantt.date.add(date, 6, "day"); var weekNum = gantt.date.date_to_str("%W")(date); return "#" + weekNum + ", " + dateToStr(date) + " - " + dateToStr(endDate); }}, {unit: "day", step: 1, format: "%j %D"} ] }, { name:"month", scale_height: 50, min_column_width:120, scales:[ {unit: "month", format: "%F, %Y"}, {unit: "week", format: "Week #%W"} ] }, { name:"quarter", height: 50, min_column_width:90, scales:[ {unit: "month", step: 1, format: "%M"}, { unit: "quarter", step: 1, format: function (date) { var dateToStr = gantt.date.date_to_str("%M"); var endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day"); return dateToStr(date) + " - " + dateToStr(endDate); } } ]}, { name:"year", scale_height: 50, min_column_width: 30, scales:[ {unit: "year", step: 1, format: "%Y"} ]} ] }; gantt.ext.zoom.init(zoomConfig);
如果您不想使用缩放模块并且更喜欢手动控制缩放设置,您可以通过相应的配置选项来实现。
事实上,实现缩放功能意味着定义时间尺度配置(缩放级别)的多个预设,并为用户提供在它们之间切换的能力。
您需要以下设置来配置时间刻度:
让我们考虑以下预设:
/* global gantt */ function setScaleConfig(level) { switch (level) { case "day": gantt.config.scales = [ {unit: "day", step: 1, format: "%d %M"} ]; gantt.config.scale_height = 27; break; case "week": var weekScaleTemplate = function (date) { var dateToStr = gantt.date.date_to_str("%d %M"); var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day"); return dateToStr(date) + " - " + dateToStr(endDate); }; gantt.config.scales = [ {unit: "week", step: 1, format: weekScaleTemplate}, {unit: "day", step: 1, format: "%D"} ]; gantt.config.scale_height = 50; break; case "month": gantt.config.scales = [ {unit: "month", step: 1, format: "%F, %Y"}, {unit: "day", step: 1, format: "%j, %D"} ]; gantt.config.scale_height = 50; break; case "year": gantt.config.scales = [ {unit: "year", step: 1, format: "%Y"}, {unit: "month", step: 1, format: "%M"} ]; gantt.config.scale_height = 90; break; } }
所描述的功能可以通过从“日”到“年”时间尺度的四个预定义配置之一来配置甘特图对象。甘特图将需要完全重绘以显示配置更改:
setScaleConfig("year"); gantt.init("gantt_here");
然后你可以为用户实现一个 UI 来切换缩放级别:
<label><input type="radio" name="scale" value="day" checked/>Day scale</label> <label><input type="radio" name="scale" value="week"/>Week scale</label> <label><input type="radio" name="scale" value="month"/>Month scale</label> <label><input type="radio" name="scale" value="year"/>Year scale</label> var els = document.querySelectorAll("input[name='scale']"); for (var i = 0; i < els.length; i++) { els[i].onclick = function(e){ var el = e.target; var value = el.value; setScaleConfig(value); gantt.render(); }; }
dhtmlxGantt享有超十年声誉,支持跨浏览器和跨平台,性价比高,可满足项目管理控件应用的所有需求,是最完善的甘特图图表库。了解更多内容,欢迎在线咨询或者私信我获取正版试用版及报价。
甘特图控件交流群:764148812 欢迎进群交流讨论
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
一个用于构建跨浏览器Web应用和移动应用的强大JavaScript UI库。
DHTMLX Scheduler一个类似于Google日历的强大JavaScript日程安排控件。
DHTMLX Gantt针对您的解决方案的交互式JavaScript / HTML5甘特图
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢