用Synoptic Panel自定义基于图形的可视化控件--制作一张剧场售票统计报表

数据可视化的一大特点就是能给报表使用者带来感官上的享受。不再是枯燥的数字，而变成一个一个亮丽的图形。之前业界大神公布过一个统计Car Accidents的报表，这个Power BI Report的特点是嵌入了一张汽车平面图，按照汽车部件位置进行了划分，只要用户点击某个部件，Power BI就会显示出基于该部件的事故次数。有了这个设计，报表的level瞬间被提高，用户可以清晰地明了的理解数据意义。

 

https://app.powerbi.com/view?r=eyJrIjoiNTY1YThkOWItYWM5Mi00Nzg5LThlNGItODkyOTA5YmI0ODJjIiwidCI6IjU3NGMzZTU2LTQ5MjQtNDAwNC1hZDFhLWQ4NDI3ZTdkYjI0MSIsImMiOjZ9

其实这个基于汽车平面图的可视化工具制作起来比较简单，不需要进行任何编程，只需要一个名为Synoptic Panel的第三方Power BI控件和图片即可。

以剧场销售报表为例，想制作一张剧场座位图，看看哪个区域的座位售票情况最好。首先，根据原始表单数据设计一张剧场座位图，划分出座位区域。

 

之后到Synoptic Designer网站将剧场座位图区域绘制成可视化控件识别图片。 

 

所谓的绘制图表，实际上就是将图片中需要进行统计的区域添加涂层进行标记，之后进行命名。网站上提供了两种在图形区域上绘制涂层的方法，一种是自己绘制，选择左下角的十字图标，在需要绘制的区域周边以连线的方式圈出图形。

另外一种方法是选择左下角第二个魔法棒图标，之后选择图片上的区域块，会自动识绘制出相应涂层。

涂层设定完毕之后就需要对其进行命名。这里面需要注意每个涂层对应的Areas属性有两部分，第一行填写内置名（必填项），第二行填写显示名（选填项）。内置名需要跟之前Seats表当中的Area列下的值一一对应，完全一致。

当前Seats表中Area列一共有四个值，分别是Center，Left，Right和Rear，则绘制出的四个涂层必须依据其位置分别命名为Center，Left，Right和Rear，不能进行更改，否则Power BI无法识别。如果想要图片中显示的区域名称与原始表单中不一样，可以在显示名一栏中对区域添加描述。 

图形绘制完毕后，选择右下角的“Export to Power BI”，会弹出一个窗口提示选择图片然后右键下载保存刚刚制作的图片成svg格式。 

有了图片后安装Synoptic Panel插件，然后在Power BI表单中添加该插件，由于主要计算的是Seats表单下的Area和Price之间的数据关系，因此，在Synoptic Panel插件Field下，选择Area做为Category，之后选择Price作为Measure，意思就是Area列对应图片中标记的涂层区域，然后用Price列去计算每个Area（涂层区域）相关数据。 

 

 Synoptic Panel下面有8个自定义选项。

Category：必须选择与图形涂层内置名对应的数据列。

Subcategory：对Category的说明，需要选择与Category列相关联的数据列。

Measure：添加一个可以计算涂层区域数据相关信息的度量值。

Maps：针对地图类图形使用的选项，需要选择包含地图信息的度量值。

Target：添加一个用于做效率比对的度量值。

States：可以添加多个数字类型度量值，用来代表效率状态。

Tooltips：允许添加多个数字类型的度量值用来在鼠标滑过涂层区域时显示额外补充信息。

 

配置好选项之后可以把刚刚生成的图片添加进来，然后这个可视化图片就创建完毕了。选择之前创建的涂层区域，就能对应的看的相关数据计算结果。比起用切片器，报表一下子就酷炫了起来。

 以上

---

 1.Power BI免费下载：http://www.yeacer.com/

    Microsoft Power BI Desktop中文最新版：下载地址

2.欢迎加入的Power BI技术群，目前正在学习阶段，有兴趣的朋友可以一起学习讨论。 

   Power Data技术交流群：702966126 (验证注明：博客园Power BI) 

   更多精彩内容请关注微信公众号：悦策PowerBI          

---

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，作者博客:https://www.cnblogs.com/yeacer/