首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在dhtmlx甘特图中设置日期、年份等行的自动高度

在dhtmlx甘特图中,可以通过设置行高来实现日期、年份等行的自动高度。以下是具体的步骤:

  1. 首先,需要在甘特图的配置中设置行高的默认值。可以使用gantt.config.row_height属性来设置,默认值为23。例如:
代码语言:txt
复制
gantt.config.row_height = 23;
  1. 接下来,需要为特定的行设置自定义的行高。可以使用gantt.config.scale_height属性来设置特定行的高度。该属性是一个对象,可以为不同的时间刻度设置不同的行高。例如,为年份行设置高度为30
代码语言:txt
复制
gantt.config.scale_height = {
  year: 30
};
  1. 如果需要为日期行设置自动高度,可以使用gantt.templates.scale_cell_class模板来动态设置行的样式。在模板中,可以根据行的类型来判断是否为日期行,然后根据日期的长度来设置行高。例如,为日期行设置高度为日期字符串的长度乘以20
代码语言:txt
复制
gantt.templates.scale_cell_class = function(date){
  if (date.getUTCHours() === 0 && date.getUTCMinutes() === 0) {
    var dateString = gantt.templates.date_scale(date);
    var height = dateString.length * 20;
    return "gantt_scale_cell gantt_scale_cell_date" + " gantt_scale_cell_height_" + height;
  }
  return "gantt_scale_cell";
};
  1. 最后,需要在CSS中定义不同高度的行的样式。例如,为高度为40的行定义样式:
代码语言:txt
复制
.gantt_scale_cell_height_40 {
  height: 40px;
}

通过以上步骤,就可以在dhtmlx甘特图中设置日期、年份等行的自动高度了。

关于dhtmlx甘特图的更多信息和使用方法,可以参考腾讯云的产品介绍页面:dhtmlx甘特图

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

免费JS甘特图组件dhtmlxgantt

两个配置文件 gantt.config - 配置dates数据, scale刻度(年度、月度), controls控件 选项 gantt.templates - 甘特图中使用dates数据 and...但可以通过配置event,实现可视化排程,在甘特图时间线和任务grid添加任务、添加任务链接、修改任务属性,可拖拽来更新任务时间。...如果设置为xy,则竖直内容不足屏幕,则面板将缩小至其高度,水平内容超过屏幕,则截断无滚动条。...gantt.config.autosize = "xy"; gantt.config.autosize_min_width = 800; gantt.init("gantt_here"); bar_height 时间线任务条高度...grouping: true 按任务任何属性来分组任务 keyboard_navigation: true 使用键盘快捷键来导航,创建任务、选中甘特图.

17.2K31

在Excel制作甘特图,超简单

本文将介绍如何在Excel制作甘特图: 1.使用堆积条形图快速绘制简单甘特图 2.通过调整Excel图表和次坐标轴,在甘特图中为每个任务添加完成状态 3.使用Excel表动态甘特图,以便在时间线自动更新情况下轻松添加...图2 步骤3:选择“日期数据,将数字格式从“常规”更改为“短日期”,也可以在CTRL+1对话框自定义格式。 图3 注:也可以在图表更改数字格式。...双击包含任务名称垂直坐标轴,在右侧“设置坐标轴格式”任务窗格,选取“坐标轴选项”栏“逆序类别”。 图5 步骤6:双击图表顶部日期轴,并将“边界”最小值设置为43337。...图6 步骤7:如果希望将日期轴保持在顶部,则可以跳过此步骤。但是,如果希望将日期轴放置在底部,则在“设置坐标轴格式”中将“标签位置”设置为“高”。...只需转到数据区域最后一个单元格并单击Tab,这将自动添加一,可以输入必要信息,甘特图自动更新。 甚至可以立即更新现有活动及其信息,以反映在excel甘特图中。

7.7K30
  • Tableau可视化设计案例-04标靶图、甘特图、瀑布图

    –省市拖拽到–选择并转换为横条形图–右键条形图x轴添加参考线–选择 1.2参考线与参考区间 2.甘特图 数据为:物资采购情况.xlsx 2.1甘特图概念与用途 甘特图参考 这种进度安排图表叫做甘特图...就像上图一样,在甘特图中,横轴表示时间,纵轴表示活动(项目),条柱显示项目、进度随时间进展完成情况。借助甘特图,可以直观地表明计划任务完成情况。 当然,甘特图不仅能用于项目、工作计划。...2.2交货延期情况甘特图 把计划交货日期拖拽到列,点击下拉三角,选择绿色胶囊天–把供应商名称拖拽到–把物资类别拖拽到 创建计算字段延迟天数–把延迟天数拖拽到标记去大小–把延迟天数拖拽到标记区颜色...结果 2.3不同日期类型选择 可以把绿色日期修改为蓝色日期卡纳克 3.创建超市不同子类别产品盈亏瀑布图 数据为:全球超市订单数据.xlsx 子类别拖拽到列–利润拖拽到,并修改利润快速计算表为累计汇总...–排序–将利润拖拽到标签,并修改标签数字显示格式 上面,每条柱子高度为自己利润 修改标记自动为甘特条形图–创建计算字段 长方形高度,值为 负利润 把计算字段 长方形高度

    35920

    Tableau数据分析-Chapter04标靶图、甘特图、瀑布图

    标靶图、甘特图、瀑布图 本节要求 标靶图 标靶图概念和用途 二月份电量销售额完成情况 参考线 参考区域 甘特图 甘特图概念和用途 交货延期情况甘特图 不同日期类型选择 瀑布图 瀑布图概念和用途...也可以对参考区域做一些设置 最终显示效果 甘特图 ---- 甘特图概念和用途 甘特图(Gantt chart)又称为横道图、条状图(Bar chart)。...普遍用于项目管理 交货延期情况甘特图 计划交货日期->列(显示为下拉列表下面的天),供应商名称、物资类别-> 显示延迟天数大小:点击实际交货日期下拉列表->创建->计算字段(延迟天数=实际交货日期-...超市不同子类产品盈亏瀑布图 工作表连接 和sql类似 制作步骤 1.先做条形图:子类别->列,利润->(下拉列表->快速表计算->汇总),利润->标签 2.选择制作甘特图...长方形高度->标签、长方形高度->颜色 4.分析<合计< 显示总结 显示效果 ---- 到这里就结束了,如果对你有帮助,欢迎点赞关注,你点赞对我很重要

    1.6K30

    快速入门Tableau系列 | Chapter04【标靶图、甘特图、瀑布图】

    根据上图我们可以看到参考线和参考分区边界是重合。 ②区间设置:点击分布->编辑->线->红色,填充->灰色 ? ?...11、制作甘特图 11.1 甘特图概念和用途 甘特图(Gantt chart)又称为横道图、条状图(Bar chart)。...其通过条状图来显示项目,进度,和其他时间相关系统进展内在关系随着时间进展情况。其普遍用到项目管理。...11.2 交货延期情况甘特图 ①计划交货日期->列(显示为下拉列表下面的天),供应商名称、物资类别-> ? ?...③创建新字段长方形高度:利润下拉列表->创建->计算字段(长方形高度=-利润)。长方形高度->标签、长方形高度->颜色(下拉列表->快速表计算->汇总,设置颜色格式:渐变2色,倒序) ? ?

    1.9K21

    软件工程 怎样建立甘特图

    注释:“主要单位”是您要在图表中使用最长时间单位(年或月),“次要单位”是最短时间单位(日或小时)。 在“格式”选项卡单击要在任务栏、里程碑和摘要栏上使用形状和标签,然后单击“确定”。...最初,“开始时间”和“完成时间”列日期反映了您为项目指定开始日期。要更改该日期,请单击单元格,然后键入新日期。 “工期”列将随您键入新开始日期和完成日期自动更新。...右键单击表示里程碑“开始时间”列单元格,然后单击快捷菜单“编辑日期”。 键入所需日期,然后单击“确定”。...“完成时间”列日期将发生变化,以便与“开始时间”列日期相匹配,且“工期”设置为零 (0)。 将现有任务转换为里程碑 在表示要转换为里程碑任务“工期”列,键入工期零 (0)。...右键单击其中一个选定任务,然后单击快捷菜单“降级”。 设置摘要任务工期 在表示第一个附属任务,单击“开始时间”列单元格,然后键入该任务开始日期

    5K20

    推荐3款好用甘特图软件(免费+在线协同+Excel导出)

    好处和不足: 好处:方便共享,完全免费,还要以分享给微信好友,设置查看和编辑权限,可以导出Excel表格。 不足:需要先用企业微信,或者腾讯文档。需要人工填写录入、拆解各项目计划。...左侧是任务拆解,右侧是每个任务开始结束日期在图形上反馈。 不足:暂时不支持编辑甘特图,需要修改任务计划完成时间和工作量,然后刷新。...适合: 软件项目的甘特图绘制、导出和汇报,融合需求管理、项目管理以及自动输出甘特图。 使用方式: 进入YesDev,切到需要查看甘特图项目详情页,直接查看单个项目甘特图。...Excel导出文件效果,:YesDev项目甘特图(3月16日).xlsx。包含:项目甘特图  工作量(小时) 负责人 开始日期  完成日期  进度(%) 日期 。...不足:表格工时不能用公式自动求和汇总,导出Excel文件效果一般。 适合: 个人或自由职业者使用,快速制作项目甘特图。 使用方式: 进入模板中心-项目管理,选中:项目计划。使用此模板。

    2K10

    Tableau数据分析-Chapter13雷达图和凹凸图

    Chapter13雷达图和凹凸图,记录所得所学,作者:北山啦 文章目录 本节要求 1 雷达图 1.1 数据表处理 1.2 创建计算字段 1.3 绘制雷达图 1.4 调整雷达图 2 凹凸图 2. 1 超市各年份利润凹凸图...本节要求 1 雷达图 雷达图主要是用来进行多个维度比较和分析 1.1 数据表处理 数据展示 可以看出有能力,能力1,其实在Excel表是有两个进攻能力,但是在导入Tableau时,为了区分方便...,自动转换成上图所示 数据处理 数据透视表或装置 不同版本叫法不同而已。...分析->取消聚合度量;标记->线,F1->颜色,路径->路径 添加各轴能力名称:复制y,双轴,设置同步轴 显示能力名->第二个图标签,显示能力值标签->第一个图标签 1.4 调整雷达图...将底图颜色调整为灰 右击右边空白->筛选器->F1,圆1~5颜色为灰色 2 凹凸图 数据展示 2. 1 超市各年份利润凹凸图 订购日期->列,利润-> 利润下拉列表->快速表计算->排序,子类别

    2.1K20

    excel常用操作大全

    例如,在excel输入单位的人员信息后,如果需要在原出生年份数字前再加两位数字,即在每个人出生年份前再加两位数字19,如果逐个修改太麻烦,那么我们可以使用以下方法来节省时间和精力: 1)假设年份在...3.在EXCEL输入“1-1”和“1-2”格式后,将成为日期格式,1月1日和1月2日。我该怎么办? 这是由EXCEL自动识别日期格式造成。...您只需从点击主菜单格式菜单中选择单元格,然后将单元格分类设置为数字菜单标签下文本。如果您想输入1-1、2-1格式。...这个问题应该解决如下:第一,在EXCEL菜单"文件"-页面设置-工作表-打印标题;您可以设置顶部标题,选择工资单标题,选择菜单插入-每行之间分页符,并将页面长度设置为工资单高度。...如果您需要在表格输入一些特殊数据系列,物料序列号和日期系列,请不要逐个输入。为什么不让Excel自动填写它们呢?

    19.2K10

    表格控件:计算引擎、报表、集算表

    默认上传按钮在单元格显示,如下所示: 文档自定义属性 SpreadJS 现在支持为工作簿设置自定义属性,包括标题、作者、主题数据。...可以通过将排列选项allowDragHeaderToMove枚举设置、列或两者都设置来启用。...对于 SpreadJS Designer,当右键单击任何这些对象时,还提供了一个新“另存为图片”选项: 报表插件 高列宽自适应 SpreadJS 报表插件现在支持和列自动调整。...操作:类似于工作表操作,单元格编辑、添加/删除/列、剪贴板操作、拖动/移动/列 集算表 API:大多数更改数据或设置 API 操作(setDataView 方法除外) 同样,在表格编辑器也支持撤销重做...它经过改进,增强了可用性、灵活性和清晰度: 项目 旧行为 新行为 默认字段源名称 默认字段源名称直接从间隔(年/月/季度)中派生。例如,按年份分组会生成名为“年份字段。

    10310

    何在矩阵上显示“其他”【3】切片器动态筛选猫腻

    往期推荐 如何在矩阵上显示“其他”【1】 如何在矩阵上显示“其他”【2】 正文开始 上一篇文章末尾,我放了一张动图: 当年度切片器变换筛选时,子类别显示种类和顺序是不相同,但不变是...排名 RANKX是迭代函数,会将上下文自动转为筛选上下文,因此需要将除了年度以外列都ALL掉,这样才能保证在每个年度内进行RANKX排序。...但是,按列排序并不考虑切片器特殊性,它考虑是全局性,因为一旦切片器进行了多选或者不选,那么就会出现桌子不知道是9还是7情况,所以干脆就不让你设置了。...我们来看一下效果: 这样基本达到了本文开始要求: 当年度切片器变换筛选时,子类别显示种类和顺序是不相同,但不变是: ①others永远显示在最后一 ②显示10个子类别按照sales或sales...%从高到低排序 所以,剩下问题就是如何在不显示子类别前面的年份前提下,让不同年份对应子类别不同,如下图所示: 关注【学谦数据运营】,下篇回答这个问题。

    2.5K20

    永洪数据可视化之甘特图教程

    永洪甘特图操作简单,安全,自动化、可视化程度高,有效解决了以上问题,对于非专业项目管理人员很友好。...再分别设置坐 标轴、网格、标题、标签各个元素格式,甘特图基本上已经制作 完成了。...完成后甘特图 拓展延伸 为了更好追踪工作进度,可以设置日期自动提醒,例如设置“今 日线”,随着时间推移自动提醒当日工作任务。...实现方法是使用目标线,目标值可以设置为常量(固定值),也 可以设置为参数。本案例使用是参数,参数脚本含义为“返回服务 器日期”,即返回当日日期,则目标线实际意义为“今日线”。...除了月度工作计划,甘特图还可以应用在工作汇报、每日工作安排、 重大会议安排工作,帮助我们在事务繁杂工作,更加清晰厘 清工作任务,高效管理时间,提高工作效率,同时也让领导和其他小 伙伴对各项工作进度一目了然

    1.7K40

    甘特图核心功能概览

    当任务状态发生改变时,甘特图任务条颜色也会随之变化,使得项目团队成员能够更快速地识别出处于不同状态任务。任务进度自动计算实时监控任务进度一直是项目管理一项巨大挑战。...基于当前时间自动计算基于当前时间自动计算 是一种简单计算方式。这种方法主要依据当前日期,结合任务开始和结束日期自动计算出当前日期下任务应完成进度。...在这种自动计算方式,可以根据自身工作习惯或项目要求, 灵活配置每日工作时间,例如:设置为 8小时/天 或 9小时/天 ,让任务进度计算更加贴合实际工作情况, 从而提高项目管理精准度和实用性。...日期标记在项目管理过程,经常会遇到一些关键日期节点,这些节点对于整个项目的推进和监控具有重要意义。...为了确保这些重要日期不被遗漏,并能够在项目周期内得到充分关注和准备,我们可以使用日期标记功能在甘特图中进行明确标注。

    7910

    Axure高保真教程:日期时间下拉列表

    在系统,我们经常会用到日期时间选择器,它同时包含了日历日期选择和时间选择,一般是下拉列表形式进行选择。今天作者就教大家如何在Axure中用中继器制作真实日期时间效果下拉列表。...;双左箭头切换到上年,双右箭头切换至下一年;4、可以点击年份或月份,快速选择置顶年月;5、选择后自动回显选择日期和时间。...关于年份和月份下拉列表,点击后设置对应年月记录值为选择内容即可,因为月份是固定12个月,所以用多个文字标签制作即可,年份比较多,建议用中继器来制作,年份太多的话还可以转为动态面板调出滚动条来处理。...这里要说一点是,如果切换到其他年份或者月份操作,我们要要通过更新交互,更新一下选中列值,这样其他年份同一天才不会选中变色。3. 时间部分时间部分我们用两个中继器来制作。...鼠标单击时,我们用先更新所有把true列值更新为0,相当于全部取消选中,然后在用更新交互,将当前行值更新为1。最后我们用设置文本交互,把年月日时分选中记录值回显到选择框即可。

    20820

    基于项目蓝图分析工作资源分配

    为了能更好体现每周实际情况,以及体现最后完成项目所需周数,我们需要生成一列日期,这列日期每一数据代表了一周时间段。...4.生成周列表 下面在数据分析表我们新建一列日期,使这列日期每一数据代表了一周时间段。而这列日期区间就是从产品筹备日期开始到产品下市日期,即产品全生命周期。...count as number:指这个时间列一共含有多少值,案例以康帅傅筹备日期和下市日期之间天数除以7以算得期间共有多少周,即需要多少显示期间每一周。...且信息与原始数据表中行信息相匹配,比如原始数据表康帅傅筹备日期为2012年9月27日,在开始日期这行信息所对应产品名称也为康帅傅。...然后根据下图将阶段计划表字段拖入对应,并在格式设置格式颜色,甘特图就做出来了。 通过上面的案例各位看官应该了解了如何用Power BI建立项目各个阶段工作量以及用甘特图展示项目进展。

    2.2K20

    如何使用 Excel 绘制甘特图

    ,出现下面图片中对话框 第5步,在系列名称中选择计划表开始时间列名。...在系列值中选择开始时间这一列数据。就把开始时间作为横轴加到甘特图里了。 第6步,我们把开始时间移动到最前面,就可以看到我们图表绿色条形就是开始时间。 下面我们继续优化图表。...我们看到横轴时间比较乱,下面图片我们继续设置横轴时间。 选中横轴,鼠标右键选择“设置坐标轴格式”,在弹出对话框里最小值设置为计划表开始时间最小日期,输入日期后按回车键。...最大值设置为计划表截止日期最大日期设置好后我们就看到了下图效果。 我们将绿色条形地方选中,选择无填充,让它隐去,就得到了甘特图。然后再做一些图表细节优化处理,就可以让甘特图更好看了。...对计划表做数据透视表,就可以得到项目人员工作量柱状图。 5.模板下载 前面我们学习了面对复杂问题,如何使用Excel制作甘特图自动报表来推进项目进度。 我希望你也能亲自跟着前面的步骤实践一遍。

    4K30

    FullCalendar 日历插件中文说明文档

    true hiddenDays 隐藏一周某一天或某几天,数组形式,隐藏周二和周五:[2,5],默认不隐藏,除非weekends设置为false。...contentHeight 设置日历主体内容高度,不包括header部分,默认未设置高度根据aspectRatio值自适应。 aspectRatio 设置日历单元格宽度与高度比例。...0 maxTime 设置显示时间从几天结束 24 slotEventOverlap 设置视图中事件显示是否可以重叠覆盖 true 当前日期设置 属性 描述 默认值 year 设置日历年份,必须为...4位:2013,如果不设置则默认为当前年份 month 设置初始化日历月份,从0开始,如果年份和月份都未指定,则从一月开始。...getDate method,返回当前日历日期 文本与时间定制 你可以根据项目需求设置日历显示文本信息,中文月份

    31.5K90

    不用甘特图,你做什么项目管理

    不同颜色表示不同的人 每一表示一个任务 红色竖线表示今天应该完成任务 任务与任务之间黑色箭头表示任务之间依赖关系,必需完成前面的才能完成后面的 带中心黑线任务表示已经完成任务 通过这一张甘特图...于是你会在调整甘特图过程,让项目的规划越来越清晰。 怎么做甘特图 你可以在纸上做甘特图,也可以用Excel来做。下面这张图是来自网络。 ? 这是使用Excel做出来效果,但是做起来稍显麻烦。...因为任务结束时间会根据开始时间和任务时长自动计算。如下图所示。 ? 在这个界面,还可以设置任务颜色,实现不同人不同颜色,或者不同项目不同颜色。也可以在这里更新任务进度。...创建多个任务,如果后面的任务依赖前面的任务,那么在右侧被依赖任务色条上单击鼠标左键,按住并拖动到依赖它任务上。依赖它任务起始时间自动就会变为被依赖任务结束时间,如下图所示。...设置保存路径和甘特图日期范围即可导出为PNG文件,以方便分享。 GanttProject还有更多功能,你可以安装以后慢慢研究。

    7.2K20

    类似这样甘特图是怎么做

    2)甘特图 通过甘特图可以清晰看到各个任务完成进度。 3)项目分析 项目图表分析部分是根据项目计划数据自动生成,并不需要人为额外更新,最大程度上减少了人员工作量。...在系列值中选择开始时间这一列数据。就把开始时间作为横轴加到甘特图里了。 第6步,我们把开始时间移动到最前面,就可以看到我们图表绿色条形就是开始时间。 下面我们继续优化图表。...我们看到横轴时间比较乱,下面图片我们继续设置横轴时间。 image.png 选中横轴,鼠标右键选择“设置坐标轴格式”,在弹出对话框里最小值设置为计划表开始时间最小日期,输入日期后按回车键。...最大值设置为计划表截止日期最大日期设置好后我们就看到了下图效果。 image.png 我们将绿色条形地方选中,选择无填充,让它隐去,就得到了甘特图。...image.png 对计划表做数据透视表,就可以得到项目人员工作量柱状图。 5.模板下载 前面我们学习了面对复杂问题,如何使用Excel制作甘特图自动报表来推进项目进度。

    1.8K2625

    如何使用Excel管理项目?

    ,出现下面图片中对话框 第5步,在系列名称中选择计划表开始时间列名。...在系列值中选择开始时间这一列数据。就把开始时间作为横轴加到甘特图里了。 第6步,我们把开始时间移动到最前面,就可以看到我们图表绿色条形就是开始时间。 下面我们继续优化图表。...我们看到横轴时间比较乱,下面图片我们继续设置横轴时间。 选中横轴,鼠标右键选择“设置坐标轴格式”,在弹出对话框里最小值设置为计划表开始时间最小日期,输入日期后按回车键。...最大值设置为计划表截止日期最大日期设置好后我们就看到了下图效果。 我们将绿色条形地方选中,选择无填充,让它隐去,就得到了甘特图。然后再做一些图表细节优化处理,就可以让甘特图更好看了。...对计划表做数据透视表,就可以得到项目人员工作量柱状图。 5.模板下载 前面我们学习了面对复杂问题,如何使用Excel制作甘特图自动报表来推进项目进度。

    2K00
    领券