賈莉媛
中央宣傳部電影數(shù)字節(jié)目管理中心,北京 100866
隨著大數(shù)據(jù)技術(shù)的飛速發(fā)展,數(shù)據(jù)可視化已成為一種必要的技術(shù)手段,幫助人們更好地理解數(shù)據(jù)、發(fā)現(xiàn)規(guī)律、做出決策。近年來,電影公益放映服務(wù)體系不斷升級,電影公益放映服務(wù)管理工作也進(jìn)入了新的發(fā)展階段。在農(nóng)村數(shù)字電影放映回傳監(jiān)管系統(tǒng)和基于GPS/GPRS 的全國農(nóng)村電影放映監(jiān)管平臺的基礎(chǔ)上,中央宣傳部電影數(shù)字節(jié)目管理中心以多年運營數(shù)據(jù)為基礎(chǔ),構(gòu)建了農(nóng)村電影大數(shù)據(jù)指標(biāo)體系。
全國農(nóng)村電影基層宣傳文化陣地圖以及全國農(nóng)村電影管理平臺的提出,為持續(xù)做好農(nóng)村電影公益放映的規(guī)范化服務(wù)管理工作,保障電影公益放映工作健康、有序發(fā)展,確保政府資金投入惠及于民起到重要作用,成為全流程掌握農(nóng)村電影放映服務(wù)情況的重要技術(shù)手段。全國農(nóng)村電影管理平臺(圖1)從陣地圖、放映計劃、放映回傳、滿意度情況等方面對農(nóng)村電影公益放映工作進(jìn)行了綜合性數(shù)據(jù)展示,從而全面綜合地了解農(nóng)村電影放映服務(wù)情況,為運營和管理人員提供數(shù)據(jù)支持。該平臺的數(shù)據(jù)可視化實現(xiàn)需要經(jīng)過以下流程:數(shù)據(jù)預(yù)處理、數(shù)據(jù)分析、可視化結(jié)果生成和用戶交互。
圖1 全國農(nóng)村電影管理平臺功能架構(gòu)圖
數(shù)據(jù)預(yù)處理是數(shù)據(jù)挖掘分析前非常重要的數(shù)據(jù)準(zhǔn)備工作。其一方面可以保證數(shù)據(jù)的準(zhǔn)確性和有效性,另一方面通過對數(shù)據(jù)格式和內(nèi)容的調(diào)整,使數(shù)據(jù)更符合挖掘需求[1]。本項目的數(shù)據(jù)預(yù)處理主要依據(jù)項目功能需求,對現(xiàn)有公益放映數(shù)據(jù)進(jìn)行關(guān)聯(lián)分析,剔除與目標(biāo)無關(guān)的冗余數(shù)據(jù),形成可用的結(jié)果數(shù)據(jù)。在對原始數(shù)據(jù)表進(jìn)行處理后得到結(jié)果表,大大提升了可視化結(jié)果生成的效率,同時減少數(shù)據(jù)更新時產(chǎn)生的錯誤。在數(shù)據(jù)格式方面,由于JSON 格式的數(shù)據(jù)易于創(chuàng)建、解析,便于轉(zhuǎn)換和傳輸,本項目最終會將所有結(jié)果表中的數(shù)據(jù)統(tǒng)一轉(zhuǎn)換成JSON 格式,從而完成對目標(biāo)數(shù)據(jù)的預(yù)處理。
數(shù)據(jù)可視化技術(shù)是將繁雜、不能直接讀取的數(shù)據(jù)信息,轉(zhuǎn)換成數(shù)據(jù)結(jié)果和結(jié)論的過程。通過圖表表達(dá),將數(shù)據(jù)、信息簡潔化,使用戶可以快速獲取信息、理解數(shù)據(jù),發(fā)現(xiàn)數(shù)據(jù)規(guī)律[2]。從呈現(xiàn)效果可將數(shù)據(jù)可視化分為靜態(tài)可視化、交互可視化、動態(tài)可視化:靜態(tài)可視化通常以二維數(shù)據(jù)為主,通過圖表和文字的組合展示某個主題的信息數(shù)據(jù);交互可視化是對多維數(shù)據(jù)的展示,將基礎(chǔ)數(shù)據(jù)圖表進(jìn)行組合,以人機(jī)交互為核心,通過鼠標(biāo)事件對數(shù)據(jù)節(jié)點的“下鉆”操作展示數(shù)據(jù)的內(nèi)部關(guān)聯(lián),這也是本項目的主要展現(xiàn)部分;動態(tài)可視化將多維數(shù)據(jù)信息進(jìn)行整合處理,以動態(tài)形式展示各維數(shù)據(jù)間的變化,最普遍的就是按照時間發(fā)展情況的動態(tài)展示數(shù)據(jù)。
數(shù)據(jù)可視化的基本流程主要包括數(shù)據(jù)采集與處理、數(shù)據(jù)挖掘與分析、數(shù)據(jù)到可視化的映射、可視化展示。
其中可視化映射是數(shù)據(jù)可視化的核心環(huán)節(jié)。不同數(shù)據(jù)對應(yīng)不同的可視化圖形,數(shù)據(jù)類型包括分類數(shù)據(jù)、時序數(shù)據(jù)和位置數(shù)據(jù)。在本項目中,主要存在以下數(shù)據(jù)類型映射:分類數(shù)據(jù)和位置數(shù)據(jù)。分類數(shù)據(jù)主要通過其屬性進(jìn)行分組,如不同影片的放映場次、不同地區(qū)的放映點數(shù)量等,主要表現(xiàn)形式為條形圖、柱狀圖或餅圖等。位置數(shù)據(jù)是以地圖形式展示的數(shù)據(jù),如全國放映點打點、放映回傳地理位置打點等,主要有地理散點圖、遷徙圖、熱力圖等。
ECharts 是一個使用 JavaScript 實現(xiàn)的開源可視化庫,可跨設(shè)備運行,具有良好的兼容性和可擴(kuò)展性,底層依賴矢量圖形庫 ZRender,提供簡明直觀、交互豐富、可高度個性化定制的數(shù)據(jù)可視化圖表。ECharts 提供了常規(guī)的折線圖、柱狀圖、散點圖、餅圖、K 線圖,以及用于統(tǒng)計的盒形圖,用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖,用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、樹形圖、旭日圖,多維數(shù)據(jù)可視化的平行坐標(biāo),還有用于商業(yè)智能(Business Intelligence, BI)的漏斗圖和儀表盤,且支持不同種類圖的組合應(yīng)用。Echarts 4.0 以上的版本能夠展現(xiàn)千萬級數(shù)據(jù)量,此數(shù)據(jù)量級依然能夠進(jìn)行流暢的縮放、平移等交互。
Ajax,即異步JavaScript 和XML(Asynchronous Javascript and XML) ,是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。服務(wù)器與后臺只需進(jìn)行少量的數(shù)據(jù)交換,便可在不重新加載整個網(wǎng)頁的情況下,對網(wǎng)頁進(jìn)行局部更新[3]。在頁面加載與更新時,用戶的請求并非直接全部提交給服務(wù)器,其中一些數(shù)據(jù)處理工作交給Ajax 引擎來完成,這就實現(xiàn)了用戶請求與服務(wù)器響應(yīng)的異步化。引入Ajax 可以很好地解決傳統(tǒng)Web 應(yīng)用加載速度慢的問題,可實現(xiàn)高速異步傳輸,減輕服務(wù)器的壓力和資源損耗。
可視化前的數(shù)據(jù)分析與處理是整個流程中的關(guān)鍵環(huán)節(jié),它是將預(yù)處理后的數(shù)據(jù)按照一定規(guī)則和方法進(jìn)行分析,為可視化展示提供直接的數(shù)據(jù)支撐。本項目可視化前的數(shù)據(jù)處理工作主要包括數(shù)值單位轉(zhuǎn)換、放映場次排序和分組,以及放映點分布、放映場次分布、放映場次占比等數(shù)據(jù)的處理;根據(jù)數(shù)據(jù)更新頻率和數(shù)據(jù)量的大小可選擇進(jìn)行前端處理或后端處理。前端處理可在頁面上直接通過Ajax 異步獲取數(shù)據(jù)進(jìn)行可視化展示,后端處理主要針對數(shù)據(jù)量較大的放映點地理坐標(biāo)數(shù)據(jù)、放映回傳數(shù)據(jù)或其他需要計算排序的數(shù)據(jù),如影片部數(shù)和場次數(shù)據(jù),通過后端數(shù)據(jù)變換或函數(shù)操作生成可視化展示的結(jié)果數(shù)據(jù)。
(1)數(shù)值單位轉(zhuǎn)換:放映點數(shù)據(jù)、累計放映場次數(shù)據(jù)隨著時間的發(fā)展可達(dá)到十萬或百萬,為使數(shù)據(jù)呈現(xiàn)更為直觀,對這些數(shù)據(jù)統(tǒng)一轉(zhuǎn)換為以“萬”為單位的數(shù)據(jù)。
(2)排序計算:經(jīng)過預(yù)處理生成的結(jié)果表中影片部數(shù)或場次等數(shù)據(jù)已經(jīng)是可以直接使用的數(shù)據(jù),此處的排序計算則是將結(jié)果數(shù)據(jù)根據(jù)可視化映射類型進(jìn)行處理。如需在前端對分類型數(shù)據(jù)進(jìn)行條形圖、餅圖展示時,通過sort 函數(shù)進(jìn)行排序計算后,生成可直接可視化展示的調(diào)用結(jié)果。
海量數(shù)據(jù)的加載與更新是本項目解決的關(guān)鍵技術(shù)難點之一。根據(jù)全國放映點填報數(shù)據(jù)顯示,截至2024 年2 月底,全國已有超61 萬個公益放映點(公益放映點數(shù)據(jù)動態(tài)變化),當(dāng)以數(shù)據(jù)地圖進(jìn)行數(shù)據(jù)展示時,將面臨十萬級以上數(shù)據(jù)加載與更新;同時按照近5 年農(nóng)村電影放映運營的數(shù)據(jù)反饋來看,年均訂購場次1000 萬左右,年均放映回傳數(shù)據(jù)在800 萬場左右,這就意味著在進(jìn)行累計數(shù)據(jù)展示時,最多時將面臨百萬級數(shù)據(jù)的加載更新。本項目在多個展示頁面中出現(xiàn)了地圖數(shù)據(jù)的繪制,如陣地圖、放映計劃、放映公示均有地圖展示整體的分布情況,為降低頁面加載時間,帶來更好的用戶體驗,主要從以下四個方面進(jìn)行處理:
(1)分步加載
本項目在進(jìn)行可視化設(shè)計時,采用了數(shù)據(jù)與圖表結(jié)合的方式進(jìn)行綜合性展示。為了提高加載速度,提升用戶使用大屏的體驗,我們對數(shù)據(jù)展示和圖表展示采用分步加載進(jìn)行呈現(xiàn)。對數(shù)值型展示數(shù)據(jù),如每日放映點、場次、影片數(shù)量等靜態(tài)數(shù)據(jù),利用Ajax 技術(shù)直接從后臺獲取,在前端頁面中即時賦值加載;對放映地圖、排行、趨勢類圖表數(shù)據(jù),經(jīng)過數(shù)據(jù)分析與處理后使用ECharts 進(jìn)行繪制。這樣可以在頁面刷新時,直接將一部分直觀數(shù)據(jù)呈現(xiàn),避免頁面出現(xiàn)空白的情況。
(2)ECharts 的渲染
ECharts 對百萬以上數(shù)據(jù)量的渲染場景提供了appendData 處理接口,例如地理數(shù)據(jù)的打點,往往需要分片加載數(shù)據(jù)量。appendData 接口提供了分片加載后增量渲染的能力,渲染新加入數(shù)據(jù)塊時不會清除原有已渲染部分。本項目中,對全國放映陣地地圖采用了appendData 渲染方式,加快了渲染速度,提升了用戶體驗。但值得注意的是,目前此接口只適用于散點圖和線圖。
除此以外,對柱狀圖、條形圖、散點圖、線圖、熱力圖等配置漸進(jìn)式渲染(Progressive Rendering)方式,支持每個系列單獨配置。
當(dāng)圖中有數(shù)千到幾千萬圖形元素時,同時繪制或交互重繪的時候可能會造成界面的卡頓甚至假死。ECharts 4.0以上版本全流程支持漸進(jìn)式渲染,渲染時會把創(chuàng)建好的圖形分到數(shù)幀中渲染,每一幀只渲染指定數(shù)量的圖形,避免了頁面卡頓或假死情況發(fā)生。progressive 參數(shù)用于設(shè)定一次渲染處理多少數(shù)據(jù),如“progressive:400”表示每次渲染處理400 個數(shù)據(jù)。progressiveThreshold 參數(shù)用于設(shè)定啟用漸進(jìn)式渲染圖形數(shù)量的閾值,意味著當(dāng)單系列圖形數(shù)量超過該閾值時啟用漸進(jìn)式渲染,如“progressive-Threshold:3000”表示已有渲染數(shù)據(jù)達(dá)到3000 個之后開始加載渲染后的圖案。這個配置項的默認(rèn)值是當(dāng)數(shù)據(jù)量大于3000 個時開啟,每次渲染400 個。漸進(jìn)式渲染配置的數(shù)據(jù)參數(shù),需要根據(jù)圖表圖形復(fù)雜度進(jìn)行適當(dāng)調(diào)整。若復(fù)雜度低,設(shè)置的數(shù)值可以大一些,若復(fù)雜度高,可以設(shè)置數(shù)值小一些,從而在不影響交互流暢性的前提下獲得更快的繪制速度。
(3)數(shù)據(jù)量壓縮
在放映回傳展示部分,我們以熱力圖形式進(jìn)行呈現(xiàn)。熱力圖的優(yōu)勢在于可直觀反映地域分布的密集程度,即可直觀展現(xiàn)出各地區(qū)放映點以及是否回傳的情況。但通過測試發(fā)現(xiàn),百萬千萬級的數(shù)據(jù)量通過熱力圖呈現(xiàn)時會造成過載的情況,影響各地區(qū)界線的呈現(xiàn)。綜合考慮可視化呈現(xiàn)數(shù)據(jù)處理情況,我們對回傳部分展示的數(shù)據(jù)進(jìn)行了壓縮,以達(dá)到更優(yōu)的展示效果。
通過對比3 種壓縮力度(不壓縮、10 倍壓縮、100倍壓縮)的結(jié)果,我們發(fā)現(xiàn),過大和過小的壓縮量均會對可視化呈現(xiàn)產(chǎn)生失真的影響,綜合考慮后,我們最終選擇壓縮10倍的數(shù)據(jù)。
(4)頁面加載提示
在用ECharts 繪制地圖時,我們在初始化加載地圖的同時添加了頁面加載提示,可直接調(diào)用ECharts的showLoading 方法顯示,還可為其設(shè)置樣式,從視覺上可有效提升用戶體驗。
本項目中的可視化圖表均使用ECharts 庫進(jìn)行實現(xiàn)。
3.3.1全國農(nóng)村電影基層宣傳文化陣地圖研發(fā)
全國農(nóng)村電影基層宣傳文化陣地圖是直觀展現(xiàn)全國農(nóng)村電影公益放映點填報情況的數(shù)據(jù)地圖,為更好地呈現(xiàn)出放映點分布情況,選用基于地理坐標(biāo)系構(gòu)建的散點圖進(jìn)行展示,主要通過ECharts 的geo地理坐標(biāo)系組件來實現(xiàn)。具體分以下幾個步驟:
(1)繪制地圖輪廓
ECharts 通過使用registerMap 接口將地圖數(shù)據(jù)注冊到ECharts 中以繪制地圖輪廓。地圖數(shù)據(jù)信息可通過geoJSON 和SVG 兩種方式引入。本項目地圖使用了互聯(lián)網(wǎng)地圖,通過geoJSON 的方式注冊地圖數(shù)據(jù)。
(2)繪制放映點數(shù)據(jù)
ECharts 中的series-scatter 配置項用來實現(xiàn)散點圖的繪制。其中用coordinateSystem 指定數(shù)據(jù)系列使用的坐標(biāo)系,“geo”即表示通過geoIndex 指定相應(yīng)的地理坐標(biāo)系組件。在series-scatter 中可以通過datasetIndex、dataGroupId、data 三種方式添加數(shù)據(jù),本項目中已將放映點的地理數(shù)據(jù)以JSON 形式存儲并賦值相應(yīng)的變量,即可直接使用data 對應(yīng)變量的方式添加放映點數(shù)據(jù)。
(3)繪制地圖樣式
在地圖樣式設(shè)置時,可使用geo 配置項,對地圖的位置、中心位置、長寬比、區(qū)域顏色、圖形顏色、描邊粗細(xì)及顏色、陰影等進(jìn)行設(shè)置。本項目中通過對geo 圖層的疊加實現(xiàn)立體地圖效果,在樣式設(shè)置中,底層地圖與上層地圖的樣式設(shè)置略有不同。
在設(shè)置放映點的樣式時,可使用series-scatter配置項,從而對點的大小、顏色、標(biāo)識等進(jìn)行樣式設(shè)置。全國農(nóng)村電影基層宣傳文化陣地圖呈現(xiàn)效果示例如圖2所示,圖上的黃色散點是放映點。
圖2 全國農(nóng)村電影基層宣傳文化陣地圖呈現(xiàn)效果示例
3.3.2 圖表可視化研發(fā)
(1)多圖表展示
在該項目中,“當(dāng)日放映情況”與“放映回傳情況”部分需多圖表綜合性展示,以更全面地反映放映公示填報與放映回傳的整體情況。
在可視化圖表的選擇上,排行類的圖表選用條形圖呈現(xiàn),分布類的圖表用餅圖呈現(xiàn),趨勢類的則用折線圖呈現(xiàn)。
在創(chuàng)建了ECharts 繪制容器后,可通過grid 來設(shè)置不同圖表的位置和大??;grid 將構(gòu)建一個直角坐標(biāo)系網(wǎng)格,最多支持2 個x 軸和2 個y 軸,可通過具體參數(shù)設(shè)置將圖表定位到grid 的特定位置。
條形圖、柱狀圖、折線圖等由直角坐標(biāo)系構(gòu)建的圖表,用grid 進(jìn)行布局設(shè)置后,通過xAxis(x 軸)和yAxis(y 軸)配置詳細(xì)的圖表樣式并填入相應(yīng)的數(shù)據(jù)以完成繪制。
(2)放映點特效展示
ECharts中不僅支持標(biāo)準(zhǔn)散點圖,也支持帶有漣漪特效動畫的散點圖(Effect Scatter),可應(yīng)用動畫特效將某些數(shù)據(jù)進(jìn)行突出視覺展示。如對當(dāng)前有放映公示計劃的放映點進(jìn)行突出展示時,對effectScatter 的rippleEffect中的相關(guān)樣式進(jìn)行設(shè)置即可。
3.3.3 放映公示與天氣情況呈現(xiàn)
根據(jù)目前填報的電影公益放映點具體情況可知,當(dāng)前大部分公益放映點仍為室外放映點。室外放映在一定程度上受到天氣情況的制約,如在大風(fēng)、雨雪、沙塵暴、炎熱等天氣條件下不利于開展室外公益放映。在放映公示地圖的基礎(chǔ)上,加入天氣影響因素參考,對做好公益放映服務(wù)管理工作,完善放映公示計劃填報管理具有積極作用。
本文通過與互聯(lián)網(wǎng)天氣應(yīng)用編程接口(API)進(jìn)行對接,得到了全國范圍內(nèi)的實況天氣數(shù)據(jù),通過post 方式從后臺天氣綜合表中獲取天氣判斷指標(biāo)數(shù)據(jù)。
(1)天氣數(shù)據(jù)的處理
通過對實況天氣數(shù)據(jù)的采集和綜合性分析,對采集的天氣數(shù)據(jù)中有關(guān)觀測時間、溫度、體感溫度、風(fēng)力等級、風(fēng)速、當(dāng)前小時累計降水量、能見度數(shù)據(jù)進(jìn)行提取,形成天氣參考指標(biāo)。該天氣API 支持的實況天氣更新頻率為15分鐘,根據(jù)系統(tǒng)需要,我們將更新頻率設(shè)置為采集數(shù)據(jù)量/小時。
(2)天氣數(shù)據(jù)指標(biāo)的設(shè)置
鑒于天氣情況對放映工作會產(chǎn)生實際影響,我們對提取的天氣數(shù)據(jù)進(jìn)行計算后形成不利天氣指標(biāo):將累計降水量作為是否降雨的參考依據(jù),設(shè)置“降雨量>0”即為有雨;將實況風(fēng)力等級作為是否大風(fēng)的參考依據(jù),設(shè)置“實況風(fēng)力等級>5”即為大風(fēng);將實況溫度作為是否低溫的參考依據(jù),設(shè)置“實況溫度≤10”即為低溫;以上三項只要有任一不利天氣出現(xiàn)便定義為“不適宜放映”。
(3)天氣地圖的可視化呈現(xiàn)
天氣地圖的可視化呈現(xiàn)使用了ECharts 的視覺映射,通過visualMap 組件來實現(xiàn)。視覺映射分為連續(xù)型和分段型。連續(xù)型是通過指定數(shù)據(jù)的最大值和最小值來確定映射范圍;分段型具有更豐富的模式,支持?jǐn)?shù)據(jù)平均分段、自定義分段以及類別分段。通過處理后的天氣數(shù)據(jù)設(shè)置為不同的可視化樣式,呈現(xiàn)在地圖上。
3.3.4 用戶交互研發(fā)
在本項目中,各頁面都存在與用戶的交互,除頁面本身的交互外,通過圖表進(jìn)行的交互主要可分為兩大類:事件交互和圖表交互。事件交互如點擊省份名稱切換省份地圖,在全國地圖上點擊相應(yīng)的省份“下鉆”到省份地圖查看詳細(xì)信息;圖表交互主要為放映點詳細(xì)信息的展示。
事件交互以“下鉆”省份地圖為例,通過ECharts鼠標(biāo)操作觸發(fā)。例如綁定一個鼠標(biāo)點擊操作,圖表交互主要通過ECharts 的tooltip 組件彈出提示框,展示放映點詳細(xì)信息。tooltip 組件可以設(shè)置在全局,也可以設(shè)置在grid、series、data 中。需要判斷我們所交互的內(nèi)容是針對哪一部分,如我們將鼠標(biāo)放置在放映點上彈出提示框,就是在系列中設(shè)置tooltip。tooltip 的屬性也可對提示框的外觀樣式、觸發(fā)類型進(jìn)行設(shè)置。
本文介紹了全國農(nóng)村電影管理平臺數(shù)據(jù)可視化解決方案,通過Ajax 和 ECharts 的綜合應(yīng)用實現(xiàn)了數(shù)據(jù)圖表的高效實時動態(tài)呈現(xiàn),重點解決了十萬級乃至百萬級數(shù)據(jù)可視化展示時加載與更新的難題。繪制的放映陣地圖、放映公示地圖、放映回傳熱力地圖直觀鮮明地展示了我國電影公益放映點的分布、放映公示及放映回傳情況。
本項目基于電影公益放映實際情況進(jìn)行設(shè)計,已可滿足當(dāng)前運營管理服務(wù)需求,但對標(biāo)實時更新的信息技術(shù)與不斷發(fā)展的電影公益放映事業(yè),還需進(jìn)一步升級完善。從技術(shù)上看,數(shù)據(jù)可視化技術(shù)、智能化技術(shù)的進(jìn)一步發(fā)展,Echarts 圖表庫的逐漸豐富,將為完善細(xì)化電影公益放映數(shù)據(jù)綜合服務(wù)拓展新視角、提供新思路。從服務(wù)中國電影事業(yè)產(chǎn)業(yè)發(fā)展來看,持續(xù)豐富的公益放映場景,放映智能新終端、移動播控的投入使用,數(shù)據(jù)的實時傳輸,將為未來更多維度的數(shù)據(jù)精準(zhǔn)化服務(wù)提供技術(shù)支撐。不斷積累的電影公益放映數(shù)據(jù)已具備為各級各類管理機(jī)構(gòu)和需求方提供多樣化數(shù)據(jù)服務(wù)的能力,電影公益放映大數(shù)據(jù)體系也將持續(xù)深化,助力城鄉(xiāng)電影公共文化服務(wù)體系一體化建設(shè),推動電影公益放映高質(zhì)量發(fā)展。?