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或者造成教程小文，讓你們更多的學習精美大屏製做方法~