前言
数据可视化在当下信息时代曾经成为煊赫一时的话题，而 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 工业组态软件界面，领有两种不一样的主题格调所搭建，有趣味的小伙伴能够理解一下无关数据可视化的经典案例。
2019 咱们也更新了数百个工业互联网 2D/3D 可视化案例集，在这里你能发现许多离奇的实例，也能发掘出不一样的工业互联网：https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA
同时，你也能够查看更多案例及成果：https://www.hightopo.com/demos/index.html