還在爲大屏分辨率困擾？圖撲提供響應式（自適應）可視化大屏

時間 2020-07-09

原文原文鏈接

前言

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

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

HT for Web 不止自主研發了強大的基於 HTML5 的 2D、3D 渲染引擎，爲可視化提供了豐富的展現效果。今天咱們就將使用 Hightopo（如下簡稱 HT ）的 HT for Web 產品上的 web 組態跟你們介紹一下經過豐富的 2D 組態運用以及動畫效果融合搭建的大屏數據可視化系統。算法

界面簡介及效果預覽

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

系統分析

數據可視化的基本思想：

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

數據可視化的基本手段：

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

二、數據可視化主要旨在藉助於圖形化手段，清晰有效地傳達與溝通訊息。可是，這並不就意味着數據可視化就必定由於要實現其功能用途而使人感到枯燥乏味，或者是爲了看上去絢麗多彩而顯得極端複雜。爲了有效地傳達思想概念，美學形式與功能須要齊頭並進，經過直觀地傳達關鍵的方面與特徵，從而實現對於至關稀疏而又複雜的數據集的深刻洞察。然而，設計人員每每並不能很好地把握設計與功能之間的平衡，從而創造出華而不實的數據可視化形式，沒法達到其主要目的，也就是傳達與溝通訊息。函數

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

效果實現

1、主題風格的多樣化

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

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

2、響應式（自適應）佈局

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

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

3、動畫效果的過渡

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

其中動畫效果上的實現，能夠匹配本身的需求在 HT 原有的動畫函數上進行封裝，例如實現淡入淡出、裁剪、搖晃、旋轉以及數值的跳動等實現效果，咱們能夠在動畫的函數封裝上下功夫。

而這些動畫主要是經過封裝了一個 setValue() 方法來設定動畫效果實現的時候，經過屬性參數變化的值設定動畫運做的效果。其中經過一些參數值的傳入，而且根據對 data 節點的類型判斷來對應地去設定屬性值：

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

經過設定動畫屬性值的封裝後，咱們能夠封裝一些動畫效果來調用以上 setValue() 的方法來實現許多動畫效果。

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

動畫的用處是爲了使變更的數據視覺上感官，擁有溫馨的感受。而數據的搭載是數據可視化系統最關鍵的部分，一個解決方案的實施是對於一套行業上用戶數據的管理和維護的體現，因此在數據對接的部分是相當重要的，而 HT 的數據搭載能夠適應如今全部主流開發的數據對接的方案，不用過多地擔憂數據對接的問題，只需經過後端平臺所採集的數據進行系統數據的接入，就可使數據可視化嵌入靈魂。

總結

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

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