開源|Davinci用戶體驗(yàn)：你離數(shù)據(jù)可視精美大屏只差一個(gè)Davinci！

導(dǎo)讀：同比和環(huán)比是衡量企業(yè)某個(gè)數(shù)據(jù)周期性增長速度變化的重要指標(biāo)，但是一味的看數(shù)據(jù)，我們很難對(duì)增長率的大小做出比較，這個(gè)時(shí)候就需要可視化工具來幫助我們。小編這次又“編造”了另外一組數(shù)據(jù)，利用Moonbox寫出SQL求同比環(huán)比增長率，最后借用Davinci展示出來。具體請(qǐng)看正文~

Davinci介紹：Davinci是一個(gè)DVAAS（Data Visualization as a Service）平臺(tái)解決方案。Davinci面向業(yè)務(wù)人員/數(shù)據(jù)工程師/數(shù)據(jù)分析師/數(shù)據(jù)科學(xué)家，致力于提供一站式數(shù)據(jù)可視化解決方案。既可作為公有云/私有云獨(dú)立使用，也可作為可視化插件集成到三方系統(tǒng)。用戶只需在可視化UI上簡單配置即可服務(wù)多種數(shù)據(jù)可視化應(yīng)用，并支持高級(jí)交互/行業(yè)分析/模式探索/社交智能等可視化功能。

特別鳴謝

感謝萬能的 Wormhole一姐王小燕同學(xué) & Moonbox大神王浩同學(xué) 提供SQL技術(shù)支持！

一、Introduction

環(huán)比指本期統(tǒng)計(jì)數(shù)據(jù)與上期統(tǒng)計(jì)數(shù)據(jù)做對(duì)比，如2018年2月的數(shù)據(jù)與2018年1月的數(shù)據(jù)做對(duì)比。

同比指本期的統(tǒng)計(jì)數(shù)據(jù)與往年同期的統(tǒng)計(jì)數(shù)據(jù)做對(duì)比，如2018年1月與2017年1月的數(shù)據(jù)做對(duì)比。

同比和環(huán)比都反映變化速度，但側(cè)重點(diǎn)不同：利用環(huán)比，我們會(huì)看到數(shù)據(jù)的短期趨勢(shì)，但是這個(gè)數(shù)據(jù)可能是因?yàn)槭艿郊竟?jié)等因素的影響；而同比則更加側(cè)重反映長期的大趨勢(shì)，這樣我們分析數(shù)據(jù)也就規(guī)避了季節(jié)的因素。

圖1是小編隨意編造的一組很簡單的數(shù)據(jù)，表頭包括年、月、場次、觀眾人數(shù)、票房及廣告收入，用英文表示是為了之后寫SQL的時(shí)候方便一些。

(圖1)

暫且稱這組數(shù)據(jù)為“ABD虛擬影院相關(guān)數(shù)據(jù)”，接下來，就是借助Davinci展示同比環(huán)比的時(shí)刻啦！

二、Process

Step 1：增加數(shù)據(jù)源

點(diǎn)擊Source界面右上角“+”，在Source List里新增數(shù)據(jù)源（圖2），上傳CSV文件至指定數(shù)據(jù)庫中（圖3），小編使用的數(shù)據(jù)庫為MySQL。

（圖2）

（圖3）

上傳完CSV文件之后，就來到了我們特別重要的一步：寫SQL、求出同比環(huán)比增長率。

計(jì)算同比環(huán)比可借助SQL里的window窗口函數(shù)實(shí)現(xiàn)。MySQL數(shù)據(jù)庫8.x版本才支持window函數(shù)，然而小編所用數(shù)據(jù)庫版本為5.x，升級(jí)比較麻煩，所以小編在這里使用Moonbox計(jì)算同比環(huán)比增長率。步驟如下：

（1）把 CSV文件對(duì)應(yīng)數(shù)據(jù)源掛載到Moonbox計(jì)算引擎中。

(圖4)

（2）在Source界面繼續(xù)添加來自Moonbox的數(shù)據(jù)源，小編將其命名為“growthSource”，連接Url寫Moonbox jdbc服務(wù)地址（例：jdbc:moonbox://localhost:10010/growthSource），注意將Moonbox jdbc 驅(qū)動(dòng)放至Davinci lib包下。

(圖5)

點(diǎn)擊保存，就新增了一個(gè)JDBC類型的數(shù)據(jù)源。

Step 2：添加View

點(diǎn)擊View界面右上角“+”，出現(xiàn)圖6界面?！綱iew是 Davinci 中非常重要的概念，所有的 SQL 邏輯都需要在這里創(chuàng)建，所有在圖表上展示的數(shù)據(jù)都是通過這里的 SQL 獲取，可視化建模和團(tuán)隊(duì)數(shù)據(jù)權(quán)限控制也在這里進(jìn)行。（引自Davinci用戶手冊(cè)）】

(圖6)

點(diǎn)擊圖6左上角的“選擇一個(gè)Source”，選擇上一步中新增的“growthSource”數(shù)據(jù)源，接著就是寫SQL語句了，求同比與環(huán)比增長率的SQL語句分別如代碼塊7、代碼塊8所示。

<span >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) asbox_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) asscreening_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) aslast_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) aslast_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;<br></span>

(代碼塊7)

<span >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) asadvertising_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) asaudience_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 byg.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;<br></span>

(代碼塊8)

注：這里小編增加了兩個(gè)“View”，分別是yearGrowth和monthGrowth。另外，為了方便計(jì)算，在寫SQL時(shí)，四列主數(shù)據(jù)的后面生成了一列新數(shù)據(jù)，用來表示去年同月或同年上月的數(shù)據(jù)。

點(diǎn)擊右下角“Execute”執(zhí)行SQL語句，yearGrowth和monthGrowth里面的數(shù)據(jù)分別發(fā)生如下變化：

(圖9)

(圖10)

點(diǎn)擊“Model”進(jìn)行可視化建模，也就是數(shù)據(jù)中，哪幾項(xiàng)用作維度，哪幾項(xiàng)用作指標(biāo)。更改完畢后，點(diǎn)擊“保存”。在這兩個(gè)View中，小編僅用年、月作為維度，其余都作為指標(biāo)。

Step 3：制作Widget

可視化組件Widget是 Davinci 中功能最強(qiáng)大也最復(fù)雜的部分。同一個(gè)數(shù)據(jù)視圖可以被多個(gè)可視組件使用，并用不同的圖形展現(xiàn)。

在展示同比環(huán)比數(shù)據(jù)方面，我們一般會(huì)用柱狀圖或者折線圖來表示，而在Davinci所支持的透視驅(qū)動(dòng)和圖表驅(qū)動(dòng)里，都有柱狀圖和折線圖。它們具體有什么區(qū)別呢？讓我們?cè)趯?shí)例中感受一下吧~

注：想了解透視驅(qū)動(dòng)和圖表驅(qū)動(dòng)？請(qǐng)參考Davinci用戶手冊(cè)：

https://edp963.github.io/davinci/widget_guide.html

點(diǎn)擊Widget界面右上角“+”，選擇一個(gè)View。選擇完畢后，出現(xiàn)圖11所示界面。

(圖11)

其中，分類型字段對(duì)應(yīng)View中設(shè)置的是維度的字段，數(shù)值型字段對(duì)應(yīng)指標(biāo)字段。當(dāng)鼠標(biāo)懸停在圖形圖標(biāo)上，系統(tǒng)提示圖形的配置要求，滿足條件生成圖形。

例如，小編想要了解一下2017年下半年各月票房的環(huán)比增長率趨勢(shì)，用透視驅(qū)動(dòng)中的柱狀圖表示。在這個(gè)需求中，簡簡單單拖拽幾個(gè)字段就能配制出小編想要的圖表。

選擇“monthGrowth”這個(gè)View，將鼠標(biāo)放在柱狀圖圖標(biāo)上，我們會(huì)發(fā)現(xiàn)要做這個(gè)柱狀圖會(huì)需要“0到多個(gè)維度”及“1到多個(gè)指標(biāo)”。既然小編想看的是各月環(huán)比增長率，那維度這里我們就需要放上“month”字段（點(diǎn)擊字段下拉菜單可以排序），指標(biāo)則是票房環(huán)比增長率字段。

接下來我們就需要用到“篩選”一項(xiàng)，在小編的原始數(shù)據(jù)中，年份里包括2017和2018年，月份里有12個(gè)月。這里小編的要求是“2017年下半年”，因此需要將“year”和“month”字段都拖到篩選欄里，并且按照自己需求配置篩選。這幾項(xiàng)配置完以后，出現(xiàn)了如圖12所示界面：

(圖12)

如果覺得單單只看圖形，不夠清晰明了，我們還可以將票房環(huán)比數(shù)據(jù)拖進(jìn)標(biāo)簽欄，最終如圖13所示：

(圖13)

當(dāng)然，大家也可以根據(jù)自己的喜好配置柱狀圖顏色、標(biāo)題顏色及大小以及坐標(biāo)軸顏色等（圖14）。

(圖14)

點(diǎn)擊右上角“保存”，小編就成功制作了一個(gè)Widget。當(dāng)然，這個(gè)Widget也可以用折線圖來表示（圖15），完全看個(gè)人需求~

(圖15)

再例如，小編想試試用圖表驅(qū)動(dòng)里的折線圖來展示一下2018年各月廣告收入的同比增長率。這時(shí)候就要選擇“yearGrowth”這個(gè)View了。然后將鼠標(biāo)放在圖表驅(qū)動(dòng)的折線圖圖標(biāo)上，我們會(huì)發(fā)現(xiàn)要做這個(gè)折線圖需要“1個(gè)維度”及“1到多個(gè)指標(biāo)”。

同樣，將“month”字段拖入維度欄，“廣告收入同比增長率”字段拖入指標(biāo)欄。

Hmmmmm，就完成了。（圖16）

(圖16)

是不是過于簡單了？

但是大家有沒有發(fā)現(xiàn)一個(gè)問題：在這個(gè)數(shù)據(jù)配置欄里并沒有“標(biāo)簽欄”，但是折線圖中依然有數(shù)字。

原來這里的標(biāo)簽設(shè)置在樣式配置中。

勾選樣式配置中的“顯示標(biāo)簽”，數(shù)字就出現(xiàn)在了折線圖中（圖17）。

(圖17)

且慢！小編似乎發(fā)現(xiàn)了折線圖可以變換面貌。點(diǎn)擊了一下，發(fā)現(xiàn)果然平滑的折線圖更符合小編心意。于是最終的“2018年各月廣告收入同比增長率”折線圖制作完成?。▓D18）

(圖18)

最后例如，小編想看一下2018年各月場次的增減與各月廣告收入的多少有沒有關(guān)系。透視驅(qū)動(dòng)和圖表驅(qū)動(dòng)里的柱狀圖和折線圖都可以表示，小編暫且選擇透視驅(qū)動(dòng)里的折線圖。

同樣還是將需求所需字段拖入維度欄和指標(biāo)欄 — “month”拖入維度欄，“廣告收入”和“場次”拖入指標(biāo)欄，把“year”拖入篩選欄，選擇出2018年。完成！（圖19）

(圖19)

值得一提的是，在這里我們還可以按照自己喜好變換指標(biāo)欄中的圖形。（圖20）

(圖20)

于是，小編就這樣靠著拖拉拽完成了很多Widget的制作。

三、Display

最終，我們來到了展示界面。在展示界面，分別有Dashboard和Display兩種展示方式。Dashboard里面有很多更為高級(jí)的功能，比如聯(lián)動(dòng)關(guān)系配置和鉆取設(shè)置。

然而，膚淺的小編暫時(shí)被Display展示吸引住了，所有興趣都掛在了Display上面，因此，本文中小編只介紹Display展示，Dashboard功能之后再做詳細(xì)介紹。

下面我們來介紹一下Davinci的Display展示功能。

其實(shí)也沒有什么介紹的，直接上圖吧！

(圖21 簡約風(fēng))

(圖22 漫畫風(fēng))

(圖23 科技風(fēng))

如圖所示，在Display的展示中，我們可以自己更改背景顏色或上傳背景圖片。設(shè)置好背景之后，點(diǎn)擊左上角的“Widgets”圖標(biāo)，上傳自己想展示的圖表，排列成自己喜歡的形狀，風(fēng)格任君選擇，一個(gè)個(gè)大屏就這樣制作完成！

以上便是小編用Davinci展示同比環(huán)比的過程。由于數(shù)據(jù)是自己編的，難免會(huì)有不符合實(shí)際之處，敬請(qǐng)大家諒解。

另外，Davinci一直在不斷的成長中。未來，我們還是支持在Davinci Widget中直接計(jì)算出同比環(huán)比增長率這項(xiàng)功能，還請(qǐng)大家耐心等待，繼續(xù)支持。

因?yàn)槟銈兊闹С?，是我們不斷前進(jìn)的動(dòng)力！

本文Display設(shè)計(jì)方面很大一部分是借鑒了Davinci用戶做出來的大屏，當(dāng)然這里只copy到一點(diǎn)皮毛，要學(xué)習(xí)到大神所制Display的精髓還有很長的路要走。還請(qǐng)各位大神能不吝賜教，多多放上自己用Davinci制作出來的精美Display或者形成教程小文，讓大家更多的學(xué)習(xí)精美大屏制作方法~

作者：李玲 王小燕

來源：宜信技術(shù)學(xué)院