今天我们继续来介绍 [九宫格KPI看板] 的第二大亮点【鼠标悬停高亮显示】和第四大亮点【筛选有提示,一键可重置】的效果是如何实现的。
细心的小伙伴问我,这个看板只有六个格子,怎么叫九宫格呢?好吧,我承认是我算数不好。不管几宫格,做法都是一样的,大家可以加入更多关键指标,自己拓展成九宫格。
我们再来重温一下【鼠标悬停高亮显示】效果。如上动图所示,鼠标悬停在每个宫格的空白处,原本透明的背景色变成了白色。
实现这个效果非常简单,只要设置一下按钮悬停时的格式即可。我们的六宫格实际是由6个空白按钮组成的。我们以一个按钮设置为例,其它按钮设置方法相同。
步骤一、插入空白按钮
具体方法参见动图演示:
步骤二、设置按钮格式
当我们选中空白按钮时,在右侧的可视化窗口会弹出该视觉对象的格式设置面板。针对按钮的所有格式设置都在这里。我们的案例中只对边框和填充两个属性进行了设置,具体操作参见动图演示:
这里为了动图效果明显,我将悬停显示的颜色改成绿色,大家根据自己模板的背景颜色,搭配合适的颜色即可。
按钮的格式设置一般有四种状态可选,我们可以根据需要设置在不同的状态下按钮所呈现的格式。这里边框我们仅设置了按钮在「默认状态」下的格式,填充仅设置了按钮在「悬停时」的格式。
ok,第二大亮点讲完了,我们跳过第三大亮点(因为可能要更长的篇幅来讲解),先来讲第四大亮点【筛选可提示,一键可重置】。
关于【一键可重置】,其实是使用书签功能记录了筛选前的状态,然后将重置筛选图标链接到书签即可,具体操作见动图演示。
关于【筛选可提示】功能,如下图所示,切片器选择的内容会动态显示在页脚区域。
如果切片器多选会怎样呢?我们来看看效果。
显而易见,如果切片器多选,那么会将被选值用斜线分隔,全部显示出来。
要实现这样的效果,我们需要先创建一个度量值,度量值写法如下:
筛选条件列表 =
"当前筛选条件" & REPT ( " ", 10 ) &
"区域 :"
& REPT ( " ", 2 )
& CONCATENATEX (
VALUES ( 'D02-省份区域'[地区] ),
'D02-省份区域'[地区],
"/",
'D02-省份区域'[地区], ASC
)
& REPT ( " ", 10 ) &
"产品类别 :"
& REPT ( " ", 2 )
& CONCATENATEX (
VALUES ( 'D03-产品信息'[产品类别] ),
'D03-产品信息'[产品类别],
"/",
'D03-产品信息'[产品类别], ASC
)
& REPT ( " ", 10 ) &
"客户类型 :"
& REPT ( " ", 2 )
& CONCATENATEX (
VALUES ( 'D05-客户信息'[客户类型] ),
'D05-客户信息'[客户类型],
"/",
'D05-客户信息'[客户类型], ASC
)
& REPT ( " ", 10 ) &
"年份 :"
& REPT ( " ", 2 )
& CONCATENATEX (
VALUES ( 'D04-日期表'[年份] ),
'D04-日期表'[年份],
"/",
'D04-日期表'[年份], ASC
)
& REPT ( " ", 10 ) &
"月份 :"
& REPT ( " ", 2 )
& CONCATENATEX (
VALUES ( 'D04-日期表'[月份] ),
'D04-日期表'[月份],
"/",
'D04-日期表'[月份], ASC
)
& REPT ( " ", 10 ) &
"日期区间 :"
& REPT ( " ", 2 )
& FORMAT (
MIN ( 'D04-日期表'[日期] ),
"(yyyymmdd)") & " - " & FORMAT ( MAX ( 'D04-日期表'[日期] ), "(yyyymmdd)" )
代码有点长,但是不难理解,主要涉及到以下几个DAX函数。
1、REPT
这个函数顾名思义,重复。
重复某个字符若干次,第一参数:要重复的字符,第二参数:要重复的次数。
我们案例中就是重复空格若干次来作为每个条件之间的分隔,这样避免了敲击空格的重复工作。
2、 VALUES
VALUES 返回参数在当前筛选环境下的所有值,结果是一个表。
例如区域切片器筛选了「华东」和「华北」两个值,那么公式VALUES ( 'D02-省份区域'[地区] ) 就生成了一个包含了「华东」和「华北」两个值的表。
3、 CONCATENATEX
如何把VALUES函数获取的值全部连接起来呢,我们就要用到CONCATENATEX函数了。
函数语法结构如下:
这个解释不太好理解,我们通过案例来讲解一下。
CONCATENATEX 函数一共有5个参数,第一参数需要一个表,恰巧我们的VALUES函数生成的也是一个表,这个表包含了两个值,如下图所示:
第二参数就是告诉函数,我要根据哪一列进行合并,当然,这里我们只有一列。
第三参数用来指定分隔符,很简单,不赘述。
第四参数和第五参数是可选的,是指定排序的列和排序方式(ASC 升序,DESC 降序),不写也没关系,也就是公式简写成这样也可以。
4、 MIN/MAX
这两个函数表哥表姐再熟悉不过了,求最小值和最大值。
案例中分别求筛选日期范围的最小值和最大值。如筛选日期范围是「2019-3-1」到「2019-5-15」,那么最小值就是「2019-3-1」,最大值就是「2019-5-15」。
5、 FORMAT
这个函数和Excel中的Text函数类似,可以将数字进行特定的格式化。
FORMAT ( MIN ( 'D04-日期表'[日期] ),"(yyyymmdd)")
这个公式的含义就是将筛选范围的最小日期转换成(yyyymmdd)格式,y表示年,m表示月,d表示日。
例如日期为「2019-3-1」,那么格式后的效果就是(20190301)。
最后将所有公式获取的值用「&」连接即可。
度量值写好后我们新建一个卡片图,将度量值拖到字段里,设置卡片图格式即可。具体操作参见动图演示:
好了,今天就啰嗦到这里,下期我们来分享如何实现KPI看板的第三个亮点,拜拜了您呐!
领取专属 10元无门槛券
私享最新 技术干货