数无形时少直觉,形无数时难入微。——华罗庚
我们都尝试去观察生活,但是有时却缺少了总结生活;有时我们太着眼细节,忽略了大局。数据和可视化似乎是两个好兄弟,就像仰望星空与脚踏实地的两种状态。
数据是可视化的第一步,这里和大家提一提数据处理。
用户使用软件,浏览网页、APP会不间断产生各种数据。如果我们任由数据增长而不使用,那就是暴殄天物,但就算我们有了使用数据的意识,却也不一定能发挥数据的价值,所以将数据进行分析是使数据发挥价值的第一步。复杂的业务带来的后果是不同产品间用户数据相互隔离,我们称之为”数据孤岛“,让数据用起来的第一步便是将该孤岛连接,将凌乱数据归类为数据资产,这里面临的问题就是数据的来源太多,我们必须针对多种数据源做适配处理,离线将数据通过预设算法宝进行处理,建立标签系统,根据业务不同纬度生成处理数据,最终通过可视化手段、标签体系、已训练模型,支撑业务。同时业务又反过来提供源源不断的数据,形成闭环。
我们能够感知到,可视化是数据处理的应用上层。至于对于数据的处理,其实底层是很复杂的,从__数据采集__到__数据存储__到__数据加工__变为数据资产,进而使用数据资产拓展上层应用,可视化是其中一种。
一般优先选用系统内置字体,当然如果有定制字体则可选用定制字体,数据信息相关字号一般14px以上,这样大屏观看时,更清晰。
分辨率 | html font-size |
---|---|
1366*768 | 12px |
1920*1080(1080p) | 16px |
2560*1440(2k) | 22px |
3840*2160(4k) |
基于以上考虑,我们可以设计一种基于网格形式大屏开发方案。
适当动画可提升大屏趣味性,但一定要注意主次。更具实际需要确定交互方式。
大屏需求大多数可借助封装的组件库、工具库较快完成,部分需求需要使用偏底层技术实现,一般用到的技术点如下:
我们也可以使用半成品进行定制,SVG相关:SVG.js、snap,Canvas 2D有:zrender、ocanvas、EaselJS 等。
图表库 | 绘图库 | 动画库 |
---|---|---|
ECharts | three | anime |
HightCharts | D3 | mo |
Chart | SVG | Popmotion |
Chartist | Snap | Bounce |
AntV系列 | Raphaël | Tween(补间动画) |
部署方式 | 特点 | 优势 | 劣势 |
---|---|---|---|
私有部署 | 项目完全部署在客户服务器上 | 数据更安全、架构易调整 | 扩容不易、初建成本高 |
云部署 | 项目完全部署在云端 | 使用灵活、按需付费 | 数据有风险 |
混合部署 | 重要内容在客户服务器,部分在云端 | 使用更为灵活 | 提高程序复杂 |
本文分享自 JavaScript全栈 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!