Davinci用户体验 | 你离数据可视精美大屏只差一个Davinci！

做者： 李玲、王小燕 出处：敏捷大数据
来源： 宜信技术学院

技术沙龙001期|AI中台：一种敏捷的智能业务支持方案|宜信技术沙龙 3月28日晚8点线上直播，点击报名

导读：同比和环比是衡量企业某个数据周期性增加速度变化的重要指标，可是一味的看数据，咱们很难对增加率的大小作出比较，这个时候就须要可视化工具来帮助咱们。小编此次又“编造”了另一组数据，利用Moonbox写出SQL求同比环比增加率，最后借用Davinci展现出来。具体请看正文~

特别鸣谢

感谢万能的 Wormhole一姐王小燕同窗 & Moonbox大神王浩同窗 提供SQL技术支持！

1、Introduction

环比指本期统计数据与上期统计数据作对比，如2018年2月的数据与2018年1月的数据作对比。

同比指本期的统计数据与往年同期的统计数据作对比，如2018年1月与2017年1月的数据作对比。

同比和环比都反映变化速度，但侧重点不一样：利用环比，咱们会看到数据的短时间趋势，可是这个数据多是由于受到季节等因素的影响；而同比则更加侧重反映长期的大趋势，这样咱们分析数据也就规避了季节的因素。

图1是小编随意编造的一组很简单的数据，表头包括年、月、场次、观众人数、票房及广告收入，用英文表示是为了以后写SQL的时候方便一些。

图1

暂且称这组数据为“ABD虚拟影院相关数据”，接下来，就是借助Davinci展现同比环比的时刻啦！

2、Process

Step 1：增长数据源

点击Source界面右上角“+”，在Source List里新增数据源（图2），上传CSV文件至指定数据库中（图3），小编使用的数据库为MySQL。

图2

图3

上传完CSV文件以后，就来到了咱们特别重要的一步：写SQL、求出同比环比增加率。

计算同比环比可借助SQL里的window窗口函数实现。MySQL数据库8.x版本才支持window函数，然而小编所用数据库版本为5.x，升级比较麻烦，因此小编在这里使用Moonbox计算同比环比增加率。步骤以下：

（1）把 CSV文件对应数据源挂载到Moonbox计算引擎中。

图4

（2）在Source界面继续添加来自Moonbox的数据源，小编将其命名为“growthSource”，链接Url写Moonbox jdbc服务地址（例：jdbc:moonbox://localhost:10010/growthSource），注意将Moonbox jdbc 驱动放至Davinci lib包下。

图5

点击保存，就新增了一个JDBC类型的数据源。

Step 2：添加View

点击View界面右上角“+”，出现图6界面。【View是 Davinci 中很是重要的概念，全部的 SQL 逻辑都须要在这里建立，全部在图表上展现的数据都是经过这里的 SQL 获取，可视化建模和团队数据权限控制也在这里进行。（引自Davinci用户手册）】

图6

点击图6左上角的“选择一个Source”，选择上一步中新增的“growthSource”数据源，接着就是写SQL语句了，求同比与环比增加率的SQL语句分别如代码块七、代码块8所示。

select g1.year,g1.month, g1.box_office_mln, g1.last_year_month_box_office_mln, round((g1.box_office_mln - g1.last_year_month_box_office_mln)/g1.last_year_month_box_office_mln * 100.0, 2) as box_office_mln_year_growth, g1.advertising_revenue_mln, g1.last_year_month_advertising_revenue_mln, round((g1.advertising_revenue_mln - g1.last_year_month_advertising_revenue_mln)/g1.last_year_month_advertising_revenue_mln * 100.0, 2) as advertising_revenue_mln_year_growth, g1.screening_ths, g1.last_year_month_screening_ths, round((g1.screening_ths - g1.last_year_month_screening_ths)/g1.last_year_month_screening_ths * 100.0, 2) as screening_ths_year_growth, g1.audience_mln, g1.last_year_month_audience_mln, round((g1.audience_mln - g1.last_year_month_audience_mln)/g1.last_year_month_audience_mln * 100.0, 2) as audience_mln_year_growth from (select g.year, g.month, g.box_office_mln, lead(box_office_mln) over(partition by g.month order by g.year desc) as last_year_month_box_office_mln, g.advertising_revenue_mln, lead(advertising_revenue_mln) over(partition by g.month order by g.year desc) as last_year_month_advertising_revenue_mln, g.screening_ths, lead(screening_ths) over(partition by g.month order by g.year desc) as last_year_month_screening_ths, g.audience_mln, lead(audience_mln) over(partition by g.month order by g.year desc) as last_year_month_audience_mln from GrowthRate_SQL g order by g.month, g.year desc) g1;

代码块7

select g1.year,g1.month , g1.box_office_mln, g1.last_month_box_office_mln, round((g1.box_office_mln - g1.last_month_box_office_mln)/g1.last_month_box_office_mln * 100.0, 2) as box_office_mln_month_growth, g1.advertising_revenue_mln, g1.last_month_advertising_revenue_mln, round((g1.advertising_revenue_mln - g1.last_month_advertising_revenue_mln)/g1.last_month_advertising_revenue_mln * 100.0, 2) as advertising_revenue_mln_month_growth, g1.screening_ths, g1.last_month_screening_ths, round((g1.screening_ths - g1.last_month_screening_ths)/g1.last_month_screening_ths * 100.0, 2) as screening_ths_month_growth, g1.audience_mln, g1.last_month_audience_mln, round((g1.audience_mln - g1.last_month_audience_mln)/g1.last_month_audience_mln * 100.0, 2) as audience_mln_month_growth from (select g.year, g.month, g.box_office_mln, lead(box_office_mln) over(partition by g.year order by g.month desc) as last_month_box_office_mln, g.advertising_revenue_mln, lead(advertising_revenue_mln) over(partition by g.year order by g.month desc) as last_month_advertising_revenue_mln, g.screening_ths, lead(screening_ths) over(partition by g.year order by g.month desc) as last_month_screening_ths, g.audience_mln, lead(audience_mln) over(partition by g.year order by g.month desc) as last_month_audience_mln from GrowthRate_SQL g order by g.year, g.month) g1;

代码块8

注：这里小编增长了两个“View”，分别是yearGrowth和monthGrowth。另外，为了方便计算，在写SQL时，四列主数据的后面生成了一列新数据，用来表示去年同月或同年上月的数据。

点击右下角“Execute”执行SQL语句，yearGrowth和monthGrowth里面的数据分别发生以下变化：

图9

图10

点击“Model”进行可视化建模，也就是数据中，哪几项用做维度，哪几项用做指标。更改完毕后，点击“保存”。在这两个View中，小编仅用年、月做为维度，其他都做为指标。

Step 3：制做Widget

可视化组件Widget是 Davinci 中功能最强大也最复杂的部分。同一个数据视图能够被多个可视组件使用，并用不一样的图形展示。

在展现同比环比数据方面，咱们通常会用柱状图或者折线图来表示，而在Davinci所支持的透视驱动和图表驱动里，都有柱状图和折线图。它们具体有什么区别呢？让咱们在实例中感觉一下吧~

注：想了解透视驱动和图表驱动？请参考Davinci用户手册：

https://edp963.github.io/davi...

点击Widget界面右上角“+”，选择一个View。选择完毕后，出现图11所示界面。

图11

其中，分类型字段对应View中设置的是维度的字段，数值型字段对应指标字段。当鼠标悬停在图形图标上，系统提示图形的配置要求，知足条件生成图形。

例如，小编想要了解一下2017年下半年各月票房的环比增加率趋势，用透视驱动中的柱状图表示。在这个需求中，简简单单拖拽几个字段就能配制出小编想要的图表。

选择“monthGrowth”这个View，将鼠标放在柱状图图标上，咱们会发现要作这个柱状图会须要“0到多个维度”及“1到多个指标”。既然小编想看的是各月环比增加率，那维度这里咱们就须要放上“month”字段（点击字段下拉菜单能够排序），指标则是票房环比增加率字段。

接下来咱们就须要用到“筛选”一项，在小编的原始数据中，年份里包括2017和2018年，月份里有12个月。这里小编的要求是“2017年下半年”，所以须要将“year”和“month”字段都拖到筛选栏里，而且按照本身需求配置筛选。这几项配置完之后，出现了如图12所示界面：

图12

若是以为单单只看图形，不够清晰明了，咱们还能够将票房环比数据拖进标签栏，最终如图13所示：

图13

固然，你们也能够根据本身的喜爱配置柱状图颜色、标题颜色及大小以及坐标轴颜色等（图14）。

图14

点击右上角“保存”，小编就成功制做了一个Widget。固然，这个Widget也能够用折线图来表示（图15），彻底看我的需求~

图15

再例如，小编想试试用图表驱动里的折线图来展现一下2018年各月广告收入的同比增加率。这时候就要选择“yearGrowth”这个View了。而后将鼠标放在图表驱动的折线图图标上，咱们会发现要作这个折线图须要“1个维度”及“1到多个指标”。

一样，将“month”字段拖入维度栏，“广告收入同比增加率”字段拖入指标栏。

Hmmmmm，就完成了。（图16）

图16

是否是过于简单了？

可是你们有没有发现一个问题：在这个数据配置栏里并无“标签栏”，可是折线图中依然有数字。

原来这里的标签设置在样式配置中。

勾选样式配置中的“显示标签”，数字就出如今了折线图中（图17）。

图17

且慢！小编彷佛发现了折线图能够变换面貌。点击了一下，发现果真平滑的折线图更符合小编心意。因而最终的“2018年各月广告收入同比增加率”折线图制做完成！（图18）

图18

最后例如，小编想看一下2018年各月场次的增减与各月广告收入的多少有没有关系。透视驱动和图表驱动里的柱状图和折线图均可以表示，小编暂且选择透视驱动里的折线图。

一样仍是将需求所需字段拖入维度栏和指标栏 — “month”拖入维度栏，“广告收入”和“场次”拖入指标栏，把“year”拖入筛选栏，选择出2018年。完成！（图19）

图19

值得一提的是，在这里咱们还能够按照本身喜爱变换指标栏中的图形。（图20）

图20

因而，小编就这样靠着拖拉拽完成了不少Widget的制做。

3、Display

最终，咱们来到了展现界面。在展现界面，分别有Dashboard和Display两种展现方式。Dashboard里面有不少更为高级的功能，好比联动关系配置和钻取设置。

然而，肤浅的小编暂时被Display展现吸引住了，全部兴趣都挂在了Display上面，所以，本文中小编只介绍Display展现，Dashboard功能以后再作详细介绍。

下面咱们来介绍一下Davinci的Display展现功能。

其实也没有什么介绍的，直接上图吧！

图21 简约风

图22 漫画风

图23 科技风

如图所示，在Display的展现中，咱们能够本身更改背景颜色或上传背景图片。设置好背景以后，点击左上角的“Widgets”图标，上传本身想展现的图表，排列成本身喜欢的形状，风格任君选择，一个个大屏就这样制做完成！

以上即是小编用Davinci展现同比环比的过程。因为数据是本身编的，不免会有不符合实际之处，敬请你们谅解。

另外，Davinci一直在不断的成长中。将来，咱们仍是支持在Davinci Widget中直接计算出同比环比增加率这项功能，还请你们耐心等待，继续支持。

由于大家的支持，是咱们不断前进的动力！

本文Display设计方面很大一部分是借鉴了Davinci用户作出来的大屏，固然这里只copy到一点皮毛，要学习到大神所制Display的精髓还有很长的路要走。还请各位大神能不吝赐教，多多放上本身用Davinci制做出来的精美Display或者造成教程小文，让你们更多的学习精美大屏制做方法~