在Power BI中使用报表主题

在Power BI中使用报表主题

作者:风狂

可视化设计中一个很重要的原则就是保持样式的统一,当我们报告内容越来越多,或者想统一修改某一个格式时,批量格式化视觉就是一个很刚需的功能。经过几次的更新,主题模板功能已经满足基本的需要了。

在Power BI Desktop中是通过导入主题文件来实现样式切换的。

主题文件为JSON格式。例如:

JSON是由键和键值组成,比如"background" : "#FFFFFF"

如果键值包括多个记录,可以用[ ]括起来代表一个数组:比如

"dataColors": ["#2C3E50", "#E73C4C", "#ECF0F1", "#3498DB", "#2980B9", "#4285F4"]

更多json语法的内容可以参考 w3school.com.cn/json/js

JSON文件可以用任意文本编辑器编辑,或者用专门的JSON编辑器编辑,网络上很多类似的工具。


通过主题模板总体来说可以批量格式化以下四个部分的视觉属性:

1、数据、文本颜色。

2、页面背景

3、视觉通用设置(比如标题,边框,背景等)

4、视觉内部样式属性(比如图例,数据标签,坐标轴等)


1、数据、文本颜色。

包括dataColors 、foreground、background、tableAccent

官方文档的介绍:

name - 这是主题名称,唯一的必填字段;

dataColors - 要对 Power BI Desktop 视觉对象数据使用的十六进制颜色代码列表。 此列表中的颜色数量视具体需求而定;

background、foreground 和 tableAccent - 这些值是各种视觉对象中应使用的颜色。 foreground 应用于文本框文本、KPI 目标文本、多行卡片文本、卡片值文本、仪表标注文本、垂直切片器元素文本、表和矩阵总计以及值文本。 background 应用于按钮填充、组合图标签背景。 这些颜色的使用方式取决于所应用的具体视觉对象样式。 表和矩阵视觉对象默认应用这些样式

总的来说, foreground用来控制大部分数值,文本的显示。background和tableAccent主要应用于表和矩阵视觉。

{
"name": "1",
"dataColors": ["#2C3E50", "#E73C4C", "#3498DB", "#ECF0F1", "#2980B9", "#4285F4", "#DB4437", "#F4B400", "#0F9D58"],
"background": "#ECF0F1",
"foreground": "#2C3E50",
"tableAccent": "#2980B9",
}

如上图所示的主题文件的显示效果如下:



针对页面背景或者视觉通用设置以及视觉内部样式设置,语法都是相同的:

visualStyles: { 
       visualName: { 
            styleName: {
                  cardName: [{
                       propertyName: propertyValue }] } } }

其中visualName为视觉名称,如果用"*"替代即代表全部视觉。这里要注意的是,主题文件支持的visualname并不一定跟Desktop中显示出来的visual名字(英文版本中的visual名字)一样,比如Desktop中矩阵为Matrix,而在主题文件中支持的矩阵visualname为pivotTable。关于visualname名称的对应关系可以参考官方文档docs.microsoft.com/zh-c

StyleName一般不设置(用"*" 代替)。

cardName代表visual的各种样式属性,比如图例,坐标轴,标题,背景等等等等,cardName也可以用"*"替代来全局定义。跟visualname一样,主题文件支持的cardName可能跟desktop中显示的不一样,比如desktop中坐标轴显示为Gauge axis,对应的cardName则为axis。主题文件中支持的cardName值和destktop中显示的名称的对应关系一样可以在上述官方文档中找到。


2、页面背景

7月份的更新后,主题文件也可以定义页面背景和壁纸的颜色和透明度。目前好像只能全局设置,不能单独设置某个页面,不知道是没有找到设置的方法还是暂不支持。

页面背景设置也是写在visualStyles里面,针对页面背景设置,visualName的值即为page,可以设置background和outspace,也就是cardName。

示例:

visualStyles": {
     "page": { 
         "*": {
            "background": [{
                     "color": { "solid": { "color": "#FFFFFF" } },
                     "transparency": 25
                  }],
             "outspace": [{
                      "color": { "solid": { "color": "#004753" } },
                       "transparency": 0
                   }]
              }
             }
           }

3.视觉通用设置(标题,边框,背景等)

通过这个部分,可以批量调整视觉的通用设置,包括title(标题),background(背景),lockAspect(锁定纵横比),border(边框),visualTooltip(工具提示)。

我们既可以设置指定的visual格式,同时可以用*代替visualname,将设置应用于全部的视觉。

例如下面这个主题文件设置了柱形图的标题以及边框,没有设置的部分则会按照系统设置。完整的设置可以参考github上的示例文档:github.com/deldersveld/

"visualStyles": {
     "coulumnChart": {     ///visualName
              "*": {
                  "title": [{        ///cardName
                         "show": true,
                         "fontColor": { "solid": { "color": "#2C3E50" } },
                         "alignment": "left",
                         "fontSize":10,
                         "fontFamily": "Verdana"
                        }],
                   "border": [{      ///cardName
                          "show": true,
                            "color": { "solid": { "color": "#2980B9" } }
                         }],
                 } 
              }
            }

显示效果如下:


4.视觉内部样式属性

visualStyles: { 
       visualName: { 
            styleName: {
                  cardName: [{
                       propertyName: propertyValue }] } } }

上面提到过,视觉内部样式设置和页面背景或者视觉通用设置语法都是一样的。cardName代表视觉的各个内部可以设置的部分,比如坐标轴,图例等,通过定义不同cardName的不同属性来更改视觉样式。

由于每个视觉可以设置的cardName和propertyName都不一样,这里可以我们查看github示例文档github.com/deldersveld/来查找每个视觉可以设置的cardName和propertyName 。


示例:使用下面的语句设置柱形图的图例位置和数据标签的背景

"visualStyles": {
       "columnChart": {       ///visualName
              "*": {
                   "legend": [{     ///cardName
                           "show": true,
                           "position": "Bottom"
                         }],
                   "labels": [{     ///cardName
                           "show": true,
                           "color": "#2C3E50",
                           "enableBackground": true,
                           "backgroundColor": { "solid": { "color": "#FFFFFF"}},
                           "backgroundTransparency": 30
                         }]
                    }
                 }
              }

显示效果如图


另外如果觉得编辑JSON麻烦,还可以通过这个网站powerbi.tips/tools/repo。直接设置想要的视觉样式,然后导出为主题文件。


前面提到了,我们可以定义某个 visual的某个cardName的属性,我们也可以用“*”代替visualName来全局定义不同 visual中同一个cardName的属性,也能用“*”代替visualName和cardName全局定义所有visual中所有cardName中的某一个相同属性。

定义特定visula,特定cardName的属性

visualStyles: { 
         visualName: { 
                *: {
                   cardName: [{
                        propertyName: propertyValue }] } } }

定义所有visula,特定cardName的属性(用“*”替代visualName)

visualStyles: { 
            *: { 
                *: {
                   cardName: [{
                         propertyName: propertyValue }] } } }

定义所有visula,所有cardName的某个相同属性(用“*”替代visualName和cardName)

visualStyles: { 
            *: { 
                *: {
                   *: [{
                         propertyName: propertyValue }] } } }

比如legend和categoryAxis这两个不同的cardName中都有fontFamily和fontSize属性,我们就可以用“*”替代cardName来全局定义这两个属性。

{
"visualStyles":{
        "*":{      ///visualName
              "*":{
                  "*":{      ///cardName
"fontSize":14,"fontFamily":"Courier New"} 
                 }
              }
            }
 }

最佳实践:

确认要设置的样式,查看官方文档确认要设置样式对应的visulname和cardName,然后通过GitHub上每个视觉的主题示例文件查看每个可视化对象可用的各个属性,来组合成我们想要的主题文件。

用一个简单例子来总结:

该主题先定义了数据颜色,和页面背景(1背景:颜色#E6E6E6,透明度0;2壁纸:颜色#CCCCCC,透明度0);

然后全局定义所有视觉的通用设置(1锁定纵横比:开;2边框:关;3背景:颜色#FFFFFF,透明度50%;4工具提示:默认;5标题:颜色#2C3E50,左侧对齐);

接着全局定义所有视觉的字体和字号 (字号12,字体Courier New),以及所有视觉 图例的属性(位置:上部;字号11; 图例标题:默认;图例颜色:#000000);

再定义卡片图和矩阵的通用设置(1卡片图加背景:颜色#3498D8,2矩阵去掉背景);

最后单独定义卡片图,条形图的个别内部样式(1卡片图数据标签字号改为16,颜色改为#FFFFFF,类别标签字号改为14,颜色改为#CCCCCC。2统一条形图的数据标签样式:标签背景:打开;标签背景颜色#F4B400,透明度0;数据标签颜色:#000000)。

主题文件:

{
 "name": "testing",
 "dataColors":["#2C3E50","#E73C4C","#3498DB","#ECF0F1","#2980B9"],     ///定义数据颜色
 "background": "#ECF0F1",         ///定义数据颜色
 "foreground": "#2C3E50",         ///定义数据颜色
 "tableAccent": "#2980B9",        ///定义数据颜色
 "visualStyles": {
       "page": {          ///定义页面背景和壁纸颜色
            "*": {
                "background": [{
                     "color": {"solid": {"color": "#E6e6E6" } },
                     "transparency": 0
                            }],
                "outspace": [{
                     "color": {"solid": {"color": "#CCCCCC"}},
                     "transparency": 0
                            }]
                }
               },
        "*": {         ///定义所有视觉通用设置(1锁定纵横比:开;2边框:关;3背景:颜色#FFFFFF,
                          透明度50%;4工具提示:默认;5标题:颜色#2C3E50,左侧对齐)
            "*": {
                "title": [{
                     "show": true,
                     "fontColor": {"solid": { "color": "#2C3E50"} },
                     "alignment": "left"
                         }],
                "background": [{
                      "show": true,
                      "color": {"solid": {"color": "#FFFFFF"}},
                      "transparency": 50
                         }],
                "lockAspect": [{
                       "show": true
                         }],
                 "border": [ {
                       "show": false
                         }],
                 "visualTooltip": [ {
                        "type": "Default"
                         }],
                 "*": [{           ///定义所有视觉所有样式的字体类型和字号大小
                        "fontFamily": "Courier New",
                        "fontSize": 12
                         }],
                 "legend": [{        ///定义所有视觉的图例样式(位置:上部;字号11; 
                                         图例标题:默认;图例颜色:#000000)
                         "show": true,
                         "position": "Top",
                         "showTitle": true,
                         "titleText": "",
                         "labelColor": {"solid": {"color": "#000000"}},
                         "fontFamily": "Courier New",
                         "fontSize": 10
                          }]
                }
             },
       "card": { ///定义卡片图的通用设置(加背景:颜色#3498D8)
            "*": {
                 "background": [{
                         "show": true,
                         "color": {"solid": {"color": "#3498D8"}},
                         "transparency": 0
                             }],
                 "labels": [{        ///定义卡片图的内部样式(卡片图数据标签字号改为16,
                                     颜色改为#FFFFFF,类别标签字号改为14,颜色改为#CCCCCC)
                          "color": {"solid": {"color": "#FFFFFF"}},
                          "fontSize": 16
                             }],
                 "categoryLabels": [{
                          "show": true,
                          "color": {"solid": {"color": "#CCCCCC"}},
                          "fontSize": 14
                             }]
                   }
                 },
        "pivotTable": {      ///定义矩阵的通用设置(去掉背景)
             "*": {
                 "background": [{
                          "show": false
                              }]
                  }
                     },
        "barChart": {           ///定义条形图的数据标签样式(标签背景:打开;
                                标签背景颜色#F4B400,透明度0;数据标签颜色:#000000)
              "*": {
                  "labels": [{
                          "show": true,
                          "color": {"solid": {"color": "#000000"}},
                          "enableBackground": true,
                          "backgroundColor": {"solid": {"color": "#F4B400"}},
                          "backgroundTransparency": 0
                           }]
                   }
                  }
              }
}

应用主题后的效果:

文章参考网站:

在 Power BI Desktop 中使用报表主题(预览阶段) - Power BIdocs.microsoft.com图标deldersveld/PowerBI-ThemeTemplatesgithub.com图标
发布于 2018-08-26

文章被以下专栏收录

    公众号:简快EXCEL之PowerBI建模分析(powerbipro)【用Excel进行千万级别的数据建模分析!】本专栏在于整理分享Excel之Power Query、Power Pivot以及Power BI 系列相关知识,涉及领域,Excel数据分析处理,M语言,DAX数据分析表达式。欢迎广大爱好者对相关问题进行投稿(联系微信:YUANLEI309)