數(shù)據(jù)可視化在當(dāng)下信息時(shí)代已經(jīng)成為炙手可熱的話題，而 B/S 化趨勢(shì)，也使得許多大屏應(yīng)用上在網(wǎng)頁(yè)端出現(xiàn)，今天給大家分享一套不一樣風(fēng)格的大屏頁(yè)面，與傳統(tǒng)深藍(lán)色不同，這次采用了暗紅色設(shè)計(jì)，搭配粉色及黃色，加入了一些工業(yè)元素，讓頁(yè)面有別具一格的效果。而 Hightopo 獨(dú)特的自適應(yīng)機(jī)制，也解決了大屏需要針對(duì)分辨率設(shè)計(jì)的困擾，達(dá)到了可以一頁(yè)用多屏的效果。

隨著工業(yè)4.0變革的推進(jìn)，逐步開始走向了利用信息化技術(shù)促進(jìn)產(chǎn)業(yè)變革的時(shí)代，也就是智能化時(shí)代。伴隨著時(shí)代的走向，工業(yè)互聯(lián)網(wǎng)和 5G網(wǎng)絡(luò)逐漸揭開了帷幕，數(shù)據(jù)不再是單純的數(shù)據(jù)信息源，數(shù)據(jù)可以結(jié)合一些可視化界面作為載體，實(shí)時(shí)地展示反饋出這個(gè)世界的變化。在諸多行業(yè)上，我們可以通過(guò)對(duì)數(shù)據(jù)的管控達(dá)到場(chǎng)景設(shè)備的維護(hù)效果，例如智慧園區(qū)、智慧樓宇的建設(shè)，水務(wù)系統(tǒng)的監(jiān)控以及一些公共設(shè)施風(fēng)力發(fā)電，數(shù)據(jù)中心可視化系統(tǒng)等等的搭建上，都可以通過(guò)可視化的搭載，進(jìn)行數(shù)據(jù)的展示和維控。

HT for Web 不止自主研發(fā)了強(qiáng)大的基于 HTML5 的 2D、3D 渲染引擎，為可視化提供了豐富的展示效果。今天我們就將使用 Hightopo（以下簡(jiǎn)稱 HT ）的 HT for Web 產(chǎn)品上的 web 組態(tài)跟大家介紹一下通過(guò)豐富的 2D 組態(tài)運(yùn)用以及動(dòng)畫效果融合搭建的大屏數(shù)據(jù)可視化系統(tǒng)。

界面上的圖紙是采用 HT 特有的設(shè)計(jì)，并沿用 HT 的響應(yīng)式布局來(lái)進(jìn)行劃分排版，在無(wú)限放大和縮小圖片的情況下依然能保持一致的精準(zhǔn)度，可以適應(yīng)不同分辨率的屏幕都不會(huì)模糊，不僅可以實(shí)現(xiàn)完美的跨平臺(tái)，在大屏展示上的效果就不言而喻了。而對(duì)相應(yīng)的數(shù)據(jù)節(jié)點(diǎn)以及動(dòng)畫節(jié)點(diǎn)做數(shù)據(jù)綁定，通過(guò)對(duì)接數(shù)據(jù)來(lái)展示數(shù)據(jù)可視化系統(tǒng)的運(yùn)行，加上HT的動(dòng)畫函數(shù)ht.Default.startAnim()來(lái)驅(qū)動(dòng)數(shù)據(jù)變動(dòng)和動(dòng)畫展示效果。

數(shù)據(jù)可視化的基本思想：數(shù)據(jù)可視化技術(shù)的基本思想，是將數(shù)據(jù)庫(kù)中每一個(gè)數(shù)據(jù)項(xiàng)作為單個(gè)圖元元素表示，大量的數(shù)據(jù)集構(gòu)成數(shù)據(jù)圖像，同時(shí)將數(shù)據(jù)的各個(gè)屬性值以多維數(shù)據(jù)的形式表示，可以從不同的維度觀察數(shù)據(jù)，從而對(duì)數(shù)據(jù)進(jìn)行更深入的觀察和分析。

數(shù)據(jù)可視化的基本手段：

1、數(shù)據(jù)可視化，是關(guān)于數(shù)據(jù)視覺(jué)表現(xiàn)形式的科學(xué)技術(shù)研究。其中，這種數(shù)據(jù)的視覺(jué)表現(xiàn)形式被定義為，一種以某種概要形式提取出來(lái)的信息，包括相應(yīng)信息單位的各種屬性和變量。它是一個(gè)處于不斷演變之中的概念，其邊界在不斷地?cái)U(kuò)大。主要指的是技術(shù)上較為高級(jí)的技術(shù)方法，而這些技術(shù)方法允許利用圖形、圖像處理、計(jì)算機(jī)視覺(jué)以及用戶界面，通過(guò)表達(dá)、建模以及對(duì)立體、表面、屬性以及動(dòng)畫的顯示，對(duì)數(shù)據(jù)加以可視化解釋。與立體建模之類的特殊技術(shù)方法相比，數(shù)據(jù)可視化所涵蓋的技術(shù)方法要廣泛得多。

2、數(shù)據(jù)可視化主要旨在借助于圖形化手段，清晰有效地傳達(dá)與溝通信息。但是，這并不就意味著數(shù)據(jù)可視化就一定因?yàn)橐獙?shí)現(xiàn)其功能用途而令人感到枯燥乏味，或者是為了看上去絢麗多彩而顯得極端復(fù)雜。為了有效地傳達(dá)思想概念，美學(xué)形式與功能需要齊頭并進(jìn)，通過(guò)直觀地傳達(dá)關(guān)鍵的方面與特征，從而實(shí)現(xiàn)對(duì)于相當(dāng)稀疏而又復(fù)雜的數(shù)據(jù)集的深入洞察。然而，設(shè)計(jì)人員往往并不能很好地把握設(shè)計(jì)與功能之間的平衡，從而創(chuàng)造出華而不實(shí)的數(shù)據(jù)可視化形式，無(wú)法達(dá)到其主要目的，也就是傳達(dá)與溝通信息。

3、數(shù)據(jù)可視化與信息圖形、信息可視化、科學(xué)可視化以及統(tǒng)計(jì)圖形密切相關(guān)。當(dāng)前，在研究、教學(xué)和開發(fā)領(lǐng)域，數(shù)據(jù)可視化乃是一個(gè)極為活躍而又關(guān)鍵的方面。“數(shù)據(jù)可視化”這條術(shù)語(yǔ)實(shí)現(xiàn)了成熟的科學(xué)可視化領(lǐng)域與較年輕的信息可視化領(lǐng)域的統(tǒng)一。

而HT擁有一套完整豐富的 2D 組態(tài)可供用戶快速上手搭建，展示上擁有獨(dú)特的主題風(fēng)格設(shè)計(jì)，在各種比例下不失真，加上布局機(jī)制，解決了不同屏幕比例下的展示問(wèn)題。通過(guò)數(shù)據(jù)對(duì)接的載入，可以搭建出一套完整的數(shù)據(jù)可視化系統(tǒng)的解決方案，應(yīng)多各種行業(yè)上數(shù)據(jù)展示的需求。

一、主題風(fēng)格的多樣化

HT 的設(shè)計(jì)上擁有獨(dú)特的設(shè)計(jì)風(fēng)格，擁有多種主題可供選擇，大體上不僅有清新簡(jiǎn)潔的淡色風(fēng)格，也有酷炫科技的深色風(fēng)格，搭配上用戶的項(xiàng)目需求，可以打造出用戶獨(dú)有專屬設(shè)計(jì)。在動(dòng)畫交互上，HT 的實(shí)現(xiàn)跟風(fēng)格設(shè)計(jì)上同樣地出彩，結(jié)合風(fēng)格上的主題展示，融合出一套適用于各種屏幕下，風(fēng)格主體鮮明以及動(dòng)畫交互舒適的數(shù)據(jù)可視化大屏展示。

主題風(fēng)格的實(shí)現(xiàn)，是建立在 HT 特有的圖紙?jiān)O(shè)計(jì)機(jī)制下，在數(shù)據(jù)可視化系統(tǒng)實(shí)施的過(guò)程中，可以應(yīng)用于各種屏幕的分辨率下。比如系統(tǒng)設(shè)計(jì)過(guò)程中，可以在個(gè)人電腦的顯示器下進(jìn)行圖紙的設(shè)計(jì)和程序代碼的調(diào)試開發(fā)，而當(dāng)開發(fā)階段完成后，在現(xiàn)場(chǎng)大屏的布置搭建或者在用戶展示的時(shí)候，不用去擔(dān)心關(guān)于分辨率的變化會(huì)出現(xiàn)的失真模糊的問(wèn)題，從而在項(xiàng)目的開發(fā)和搭建上，用戶的使用相對(duì)地會(huì)簡(jiǎn)單很多。加上 HT 自身研發(fā)的開發(fā)插件 API 也同樣地易于上手，可以實(shí)現(xiàn)解決許多行業(yè)上的數(shù)據(jù)可視化系統(tǒng)的應(yīng)用。

二、響應(yīng)式（自適應(yīng)）布局

布局功能一直是數(shù)據(jù)可視化大屏的重要功能點(diǎn)之一，舒適的布局界面，可以使人擁有煥然一新的感覺(jué)，擁有響應(yīng)式（自適應(yīng)）布局的話，可以兼顧各種比例大小下的屏幕，不會(huì)因?yàn)楸壤淖兓沟谜w的排版錯(cuò)亂。布局功能不僅適用于大屏的整體排版上，在三維場(chǎng)景數(shù)據(jù)可視化系統(tǒng)搭配的左右系統(tǒng)數(shù)據(jù)面板上，依然可以使用 2/3D 融合嵌套的形式完成，而在面板的排列上也可以使用響應(yīng)式（自適應(yīng)）布局，可以將搭載的數(shù)據(jù)充分地顯示出來(lái)。

但自動(dòng)布局不是銀彈，復(fù)雜的情況還是需要手工布局，或業(yè)務(wù)上做必要的妥協(xié)，甚至根據(jù)業(yè)務(wù)編寫特殊的排布算法才能達(dá)到最佳效果，HT 自身?yè)碛幸惶走m應(yīng)各種場(chǎng)合的布局機(jī)制，可供用戶在一些特殊的布局效果上完成特定的布局。

三、動(dòng)畫效果的過(guò)渡

不同的動(dòng)畫會(huì)添加更多有趣的交互體驗(yàn)，一個(gè)舒適的面板交互，也必然離不開動(dòng)畫的實(shí)現(xiàn)。優(yōu)秀的數(shù)據(jù)可視化系統(tǒng)亦然如此，通過(guò)面板搭載數(shù)據(jù)的呈現(xiàn)，一方面數(shù)據(jù)的變動(dòng)驅(qū)使動(dòng)畫交互來(lái)體現(xiàn)，另一方面動(dòng)畫交互還可以依附在懸浮、點(diǎn)擊以及雙擊等用戶體驗(yàn)上來(lái)表現(xiàn)，從而達(dá)到用戶視覺(jué)和體檢的最大限度提升。

其中動(dòng)畫效果上的實(shí)現(xiàn)，可以匹配自己的需求在 HT 原有的動(dòng)畫函數(shù)上進(jìn)行封裝，例如實(shí)現(xiàn)淡入淡出、裁剪、搖晃、旋轉(zhuǎn)以及數(shù)值的跳動(dòng)等實(shí)現(xiàn)效果，我們可以在動(dòng)畫的函數(shù)封裝上下功夫。通過(guò)設(shè)定動(dòng)畫屬性值的封裝后，我們可以封裝一些動(dòng)畫效果來(lái)調(diào)用以上 setValue() 的方法來(lái)實(shí)現(xiàn)許多動(dòng)畫效果。

例如，我們通過(guò)封裝一個(gè)裁剪的動(dòng)畫函數(shù)，只需要傳入動(dòng)畫節(jié)點(diǎn) data、用戶自定義函數(shù) easing 以及時(shí)間 duration 來(lái)驅(qū)使裁剪屬性 clip.percentage 在動(dòng)畫設(shè)定值的方法調(diào)用，就能完成裁剪動(dòng)畫的實(shí)現(xiàn)。而在其他的交互動(dòng)畫下也是依靠 HT 的動(dòng)畫函數(shù)來(lái)封裝對(duì)應(yīng)交互動(dòng)畫。

動(dòng)畫的用處是為了使變動(dòng)的數(shù)據(jù)視覺(jué)上感官，擁有舒適的感覺(jué)。而數(shù)據(jù)的搭載是數(shù)據(jù)可視化系統(tǒng)最關(guān)鍵的部分，一個(gè)解決方案的實(shí)施是對(duì)于一套行業(yè)上用戶數(shù)據(jù)的管理和維護(hù)的體現(xiàn)，所以在數(shù)據(jù)對(duì)接的部分是至關(guān)重要的，而 HT 的數(shù)據(jù)搭載可以適應(yīng)現(xiàn)在所有主流開發(fā)的數(shù)據(jù)對(duì)接的方案，不用過(guò)多地?fù)?dān)心數(shù)據(jù)對(duì)接的問(wèn)題，只需通過(guò)后端平臺(tái)所采集的數(shù)據(jù)進(jìn)行系統(tǒng)數(shù)據(jù)的接入，就可以使數(shù)據(jù)可視化嵌入靈魂。

身處大數(shù)據(jù)時(shí)代的我們，有著許多的數(shù)據(jù)集等著我們?nèi)グl(fā)掘，通過(guò)一系列的數(shù)據(jù)分析，可以明白很多事件發(fā)展的趨勢(shì)走向，不僅可以帶來(lái)更好的生活體驗(yàn)，也能通過(guò)數(shù)據(jù)預(yù)測(cè)事件發(fā)生的方向。在信息時(shí)代發(fā)展迅速的前提下，數(shù)據(jù)是當(dāng)今重要的信息載體，可以通過(guò)數(shù)據(jù)的捕獲，通過(guò)監(jiān)管和維護(hù)去了解一個(gè)行業(yè)下關(guān)于工業(yè)管控下的數(shù)據(jù)可視化系統(tǒng)。

HT在許多行業(yè)的經(jīng)驗(yàn)積累下，以及自主研發(fā)并通過(guò)不斷完善的產(chǎn)品，實(shí)現(xiàn)了一套又一套精美的數(shù)據(jù)可視化解決方案，例如：換熱站最酷設(shè)計(jì)—— Web SCADA 工業(yè)組態(tài)軟件界面，擁有兩種不一樣的主題風(fēng)格所搭建，有興趣的小伙伴可以了解一下有關(guān)數(shù)據(jù)可視化的經(jīng)典案例。

fqj