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

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

HT for Web不止自主研發了強大的基于 HTML5 的2D、3D渲染引擎，為可視化提供了豐富的展示效果。引擎機制上Hightopo獨創了自己的矢量 json 格式，并支持數據綁定，讓動態的矢量圖片展示成為了可能。今天我們就將使用Hightopo（以下簡稱HT）的HT for Web產品上的web組態跟大家介紹一下通過豐富的2D 組態運用以及動畫效果融合搭建的大屏數據可視化系統。

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

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

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

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

3、數據可視化與信息圖形、信息可視化、科學可視化以及統計圖形密切相關。當前，在研究、教學和開發領域，數據可視化乃是一個極為活躍而又關鍵的方面。“數據可視化”這條術語實現了成熟的科學可視化領域與較年輕的信息可視化領域的統一。而 HT 擁有一套完整豐富的 2D 組態可供用戶快速上手搭建，展示上擁有獨特的主題風格設計，在各種比例下不失真，加上布局機制，解決了不同屏幕比例下的展示問題。通過數據對接的載入，可以搭建出一套完整的數據可視化系統的解決方案，應多各種行業上數據展示的需求。

一、主題風格的多樣化

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

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

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

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

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

三、動畫效果的過渡

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

其中動畫效果上的實現，可以匹配自己的需求在 HT 原有的動畫函數上進行封裝，例如實現淡入淡出、裁剪、搖晃、旋轉以及數值的跳動等實現效果，我們可以在動畫的函數封裝上下功夫。而這些動畫主要是通過封裝了一個 setValue() 方法來設定動畫效果實現的時候，通過屬性參數變化的值設定動畫運作的效果。其中通過一些參數值的傳入，并且根據對 data 節點的類型判斷來對應地去設定屬性值。通過設定動畫屬性值的封裝后，我們可以封裝一些動畫效果來調用以上 setValue() 的方法來實現許多動畫效果。

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

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

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

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

fqj