甘特图看起来很生硬?教你使用智能颜色装饰你的甘特图!(三)

在前两篇文章中我们了解到颜色在甘特图中也有不同的作用。其中颜色在甘特图中扮演着三个角色,才能使甘特图对用户有意义。

  • 颜色决定甘特图的外观。
  • 颜色还可以用来定义甘特图的语义。因此,它们帮助用户更快地理解甘特图所呈现的完整且常常复杂的现实。
  • 颜色还可以为甘特图提供智能,从而使用户更快地做出关键决策。

我们接着来介绍如何使用颜色来更好的调整甘特图的外观。


如何使用智能颜色来调整甘特图外观?

Tip9:短小以及后续活动的着色

我们经常观察到许多活动(有时数千,甚至上万)都显示在甘特图中。这种情况在制造环境中很常见,用户通常需要一个“机器视图”来显示给定时间段内机器的繁忙程度。当生产订单或操作非常短(有时只需要几分钟就可以完成)时,就很难区分它们了。

我们有一个最佳实践的示例:为不同的生产订单使用不同的颜色,而不为节点使用黑色边框。这有助于创建对单个操作的关注,并更清楚地了解各种机器上正在发生的事情。

Tip10:使用自底向上和自顶向下的可视警报

如果您使用甘特图进行控制,那么您通常会对当前情况的清晰和精确的概述感兴趣。特别是在事情似乎失控的情况下,你需要立即看到问题。假设您有一个甘特图,其中显示了按资源分组的节点,每个节点表示一个生产订单的操作。现在可能是一个操作太迟了,因此相应的订单无法及时完成。

如何以一种容易注意到风险并找出造成延迟的操作的方式可视化警报?第一种方法是:如果操作太晚,则显示一个额外的红色层来警告延迟。

 

这种解决方案的缺点是,如果图表由许多行组成,并且图表跨度很大,则必须在水平和垂直方向上滚动很多。如果组崩溃,则根本看不到任何警报层。因此,下一步您可以在分组级别的灰色摘要栏顶部添加一个额外的红色层。

用同样的方法,您可以在每个上层分组级别上用红色警报层标记延迟。通过这种方式,警告将被推到最高的分组级别。这样,您可以确保在自顶向下视图中也能看到所有自底向上警报。

Tip11:使用上下文敏感的节点颜色和层

甘特图的目的不应该只是可视化数据,尤其是不应该可视化所有数据。然而,这是我们全面观察到的一种典型方法。我们认为应该构建甘特图来支持用户更快地做出业务关键决策。因此,不仅要将所有数据呈现给用户,而且要将用户的焦点指向与决策相关的信息。最终,用户应该只关注那些需要他注意的活动或任务,并为此采取纠正措施。下面是一些上下文敏感的节点颜色和层的例子。

并不是只改变颜色。在该栏的外观上,还可以向栏中添加符号,以提供与上下文相关的信息。

当然,对于每个甘特图,您并不局限于一种形式,您可以组合进行。但是,我们强烈建议您限制使用可视警告的数量。记住:您想要使用它们来显示计划中的关键异常,并且它们应该指出需要用户立即反馈的任务。如果每个任务都被标记为critical,那么您将无法实现这一点。

最后,您还可以使用额外的层将用户的注意力指向甘特图中表示的时间表的关键部分。同样,每个节点不限于一个层,但是可以应用不同的层。

Tip12:将用户警报应用到甘特图表

与警告颜色或警告层一样需要注意的是,它们也面临着一个固有的弱点:只有当实际的栏在屏幕上可见时,它们才可见。然而,有时甘特图必须掌握提供高层次图片的传播。

因此,我们的许多客户使用甘特图进行粗略的规划和详细的规划。在粗略的计划中,他们会查看多个星期甚至几个月的生产计划,而在详细的计划中,他们会关注几天或几个小时。当然,在详细视图中,bar级别上的颜色警告起着重要的作用。

然而,这些信息在粗略的规划中丢失了,因为用户永远不会在一个屏幕上看到所有的节点。因此,我们强烈建议将决策相关的信息(如交付时间承诺)作为指示器字段包含到甘特图的表中。

Tip13:如何可视化完成百分比

甘特图总是可视化与时间相关的计划数据。我们经常观察用例,在用例中,完成特定工作或任务的百分比对于计划者来说是一个重要的信息。

将完成百分比可视化的最佳实践建议是在任务层的顶部添加一个“信息层”。您可以从下面的示例中看到,可以选择多种替代方法。我们建议您结合“警报层”的设计来决定这些层,以便甘特图突出显示与用户相关的信息。

如果您专门为流程行业开发甘特图,那么这些层可能具有误导性。许多垂直领域的用户不会从左到右思考,而是从下至上思考:对他们来说,完成的百分比通常等于填充级别。在这些情况下,我们建议使用以下可视化方法。


掌握了这13点,你就能在甘特图中灵活的使用颜色去美化和完善你的甘特图。想要尝试一下吗?赶紧下载最新载试用版吧!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当然可以,下面是一个使用D3绘制甘特图的例子,代码和注释里有详细的解释。 ```javascript // 数据,包括任务名称、开始时间、结束时间、任务颜色等信息 const data = [ { name: '任务1', start: '2021-01-01', end: '2021-01-05', color: '#FFC107' }, { name: '任务2', start: '2021-01-06', end: '2021-01-10', color: '#4CAF50' }, { name: '任务3', start: '2021-01-11', end: '2021-01-15', color: '#2196F3' }, { name: '任务4', start: '2021-01-16', end: '2021-01-20', color: '#9C27B0' }, { name: '任务5', start: '2021-01-21', end: '2021-01-25', color: '#F44336' } ]; // SVG画布大小 const width = 600; const height = 200; // 在body中添加SVG画布 const svg = d3.select('body') .append('svg') .attr('width', width) .attr('height', height); // 甘特图的横向比例尺,用于将时间转换为像素位置 const xScale = d3.scaleTime() .domain([new Date('2021-01-01'), new Date('2021-01-25')]) .range([0, width]); // 甘特图的纵向比例尺,用于将任务转换为像素位置 const yScale = d3.scaleBand() .domain(data.map(d => d.name)) .range([0, height]); // 绘制甘特图的条形块 const gantt = svg.selectAll('rect') .data(data) .enter() .append('rect') .attr('x', d => xScale(new Date(d.start))) .attr('y', d => yScale(d.name)) .attr('width', d => xScale(new Date(d.end)) - xScale(new Date(d.start))) .attr('height', yScale.bandwidth()) .attr('fill', d => d.color); // 绘制甘特图的时间轴 const xAxis = d3.axisBottom(xScale); svg.append('g') .attr('transform', `translate(0, ${height})`) .call(xAxis); ``` 这段代码会生成一个简单的甘特图,包含五个任务,每个任务用不同的颜色表示,时间轴使用下方的x轴来表示。你可以根据需要修改数据或样式来适应自己的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值