前言

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

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

HT for Web 不止自主研發了強大的基於 HTML5 的 2D、3D 渲染引擎，為視覺化提供了豐富的展示效果。今天我們就將使用 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 節點的型別判斷來對應地去設定屬性值：

data：動畫執行的節點；accessType：動畫所涉及的屬性型別；name：屬性名稱；value：數值的設定；

透過設定動畫屬性值的封裝後，我們可以封裝一些動畫效果來呼叫以上 setValue() 的方法來實現許多動畫效果。

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

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

總結

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

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