向领导演示那天，在日历控件里连选几天都没撞上异常数据，这个尴尬直接变成了一次改版。参考携程、微信读书的描述式日历，把异常、营业额、盈亏平衡点塞进日期格子，再用色块高低代替颜色深浅降低理解成本。本文是一个可视化控件从真实问题到落地的推演。

本篇是我在实际工作中遇到的一个真实案例衍生而来。

某次向领导演示汇报某个功能时，需要选择日期然后查看该天出现的异常情况，问题来了，在下图的日历表Calendar内连着选了好几天，好巧不巧都没有异常数据。

所以我就在想，能不能在日历上把有问题的日期凸显出来？

1 带双行描述的日历

我想到了出行类应用比如携程/飞猪等，TA们的酒店/机票日期选择空间上就会有该天的价格，如果是节假日也会一并标出，如下图所示。

这种日历表Calendar上下方均有描述信息的控件，在腾讯的tdesign.tencent.com中叫做带双行描述的日历，TA可以直接把关键信息如价格直接显示在日历上，省去了用户不断重复选择日期查看价格的繁琐操作(也省去了数据查询的服务请求数)。

回到开篇的那个实际场景，我们好像可以参照上面的做法，直接把问题数据显示在日历表上面，如下图所示。

这样用户在选择日期的时候，就不会去选择那些没有异常数据的日期，用户也可以从日历表上看到哪天异常数据最多/最少，从而为用户操作节省时间。

2.日历表还可以怎么用？

完成了上述日历表Calendar的迭代后，我在想这个带单行描述的日历还有没有更多的应用场景，还有没有其他的用法？

于是我想到了 微信读书->我->阅读时长->阅读时长分布 中的设计(如下左图所示)，该弹窗页面中会根据颜色的深浅来显示该天阅读的时长(没有则灰色)。

然后我觉得好像可以用不同的背景色来显示门店该天营业额是否超过盈亏平衡点，超过用红色未达标用绿色(借鉴A股涨跌颜色)，最后输出了如下右图的显示样式。

我最初想通过颜色深浅来代表营业额的高低，但这会增加理解成本(也会让页面太过花哨)，于是我想到了如上右图1月份第3行(13日-19日)这种通过色块高低(类似蓄水池的蓄水量)来直观展示营业额多少，并且直接将营业额数字显示在日期格子内，这些都带了浅蓝色背景色。

但这种显示样式背景的浅蓝色会对用户造成干扰，所以我做了第2种样式，即如上右图1月份第4-5行所示，个人感觉这种效果会比第3行好些。

为便于用户决策，该月基本情况我在月份正下方进行了简单的展示，如亏19天赚12天，累计XX元净利XX元(净利率XX%)，同时该月营业额最高的那天用了其他颜色填充(如上图1月1日这天)。

当然，上面这种日历选择控件好像可以直接作为可视化页面，用户通过可视化看板主页面点击后即可直接下钻至此。

3 显示更大范围

上面的日历表显示了1个月的营业额数据，这个显示范围是否可以再多些？理论上是可以的。

如下左图是微信读书的阅读时长页面，该页面显示了全年365天的数据。但如果显示全年数据就只能显示盈亏无法显示具体营业额，我尝试了下显示3个月的数据能达到美观度和信息密度的平衡，如下右图所示。

如上右图的页面还有很大的优化空间，有兴趣的读者可以自己尝试下。或者此处也可以参照Excel中的Mini图表样式来做展示。

如果你以为3个月已经是页面的显示极限了，实际上并非如此。以下分别是按月/天和周为显示单位做出的可视化日历。

1年也不是这个日历表的显示极限，以下《Python实现日历图》中做出了7年的可视化日历，PC端或者数据大屏上可以借鉴这种实现方式。