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

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

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

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

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

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

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

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

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

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

一、主題風格的多樣化

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

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

二、響應式（自適應）布局

布局功能一直是數(shù)據(jù)可視化大屏的重要功能點之一，舒適的布局界面，可以使人擁有煥然一新的感覺，擁有響應式（自適應）布局的話，可以兼顧各種比例大小下的屏幕，不會因為比例的變化而使得整體的排版錯亂。布局功能不僅適用于大屏的整體排版上，在三維場景數(shù)據(jù)可視化系統(tǒng)搭配的左右系統(tǒng)數(shù)據(jù)面板上，依然可以使用 2/3D 融合嵌套的形式完成，而在面板的排列上也可以使用響應式（自適應）布局，可以將搭載的數(shù)據(jù)充分地顯示出來。

但自動布局不是銀彈，復雜的情況還是需要手工布局，或業(yè)務上做必要的妥協(xié)，甚至根據(jù)業(yè)務編寫特殊的排布算法才能達到最佳效果，HT 自身擁有一套適應各種場合的布局機制，可供用戶在一些特殊的布局效果上完成特定的布局。

三、動畫效果的過渡

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

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

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

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

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

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

fqj