历史版本4 :贡献日历图 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 预期效果

如何实现类似 GitHub 的打码贡献图呢,如下图所示:

1.2 实现思路

通过公式结合单元格扩展属性来实现。

注:由于公式中使用了 TODAY 函数,因此在使用时,你需要确保数据表的数据是当年数据,示例模板使用的是2021年的数据。

2. 示例编辑

2.1 准备数据

新建普通报表,新建一个内置数据集 Embedded1,包含「rq」和「num」两个字段,分别表示「日期」和「贡献度」,贡献度为从 1 到 9 的整数(也可自定义)。如下图所示:

Snag_526a4672.png

2.2 设计报表

表格样式如下图所示:

1620740153926003.png

1)单元格 A2、A3 合并,A2、B1、B2 单元格均插入公式,具体设置如下:

单元格
公式扩展方向公式说明
A2array(1,2,3,4,5,6,0) 纵向创建一个数组,数组内容为周一至周日对应的数字
B1maparray(range(12,0,-1),left(monthdelta(today(),-item),7))横向

生成去年同期至今的所有月份

B2greparray(range(dateinweek(yeardelta(today(),-1),1),today()),weekday(item)=A2&&left(dateinweek(item,-1),7)=B1) 横向生成去年同期至今的所有日期后,根据 A2 的周几和 B1的月份筛选出对应的数据

2)B3 单元格拖入内置数据集的 num 字段,设置「过滤」条件:列名 rq 等于单元格 B2。即当 B3 单元格如下图所示:

2.3 设置单元格形态

通过设置「单元格属性>形态>公式形态」将单元格公式返回的结果显示为我们需要的形态。具体设置如下表:

单元格
公式形态公式说明
A2"周"+IF($$$=0,"日",numto($$$))将单元格的值转化为周一至周日
B1month($$$+"-01")+"月"将单元格的值以 "x月" 的形式显示
B3""显示空值

示例图如下所示:

1620739586295374.png

2.4 添加条件属性

选中 B3 单元格,添加两个条件属性,分别设置「背景」和「边框」。

1)背景:当 B3 单元格值大于 0 时,该单元格显示有背景色。如下图所示:

注:还可根据数字范围设置不同的背景色。

1620740691411544.png

2)边框:当单元格满足公式 INARRAY(B2,range(yeardelta(today(),-1),today()))>0 即单元格有日期时,显示边框。如下图所示:

2.5 设置单元格内容提示

给 B3 单元格设置「内容提示」,选择「单元格属性>其他>内容提示」,输入 =format(B2,"yyyy-MM-dd")+"贡献:"+nvl($$$,0)

注:此时使用的是公式,需要加上等号。

2.6 隐藏行

完成所有设置后,隐藏第二行单元格,最后适当缩小表格列宽。

2.7 设置纸张大小

选择菜单栏「模板>页面设置」,自定义纸张大小,使其显示时不分页。如下图所示:

Snag_1bab7ff.png

2.8 效果预览

2.8.1 PC 端

保存报表,点击「分页预览」,效果如下图所示:

企业微信截图_16207429587616.png

2.8.2 移动端

App 端和 HTML5 端均支持,效果如下图所示:

注:移动端不显示提示内容。

3. 模板下载编辑

已完成模板可参见:%FR_HOME%\webroot\WEB-INF\reportlets\doc\Advanced\Cacuate_Between_Cells\贡献日历图.cpt

点击下载模板:贡献日历图.cpt