前端er必须掌握的数据可视化技术
又是一月结束,打工人准时准点的汇报工作如期和大家见面啦。提到汇报,必不可少的一部分就是数据的汇总、分析。
作为一名合格的社会人,我们每天都在工作、生活、学习中和数字打交道。小到量化的工作内容,大到具体的工作指标,车间生产、批发零售各行各业都充斥着大量数据。在互联网诞生之后,网络把我们紧紧相连,也让数据更为密集地汇聚。 扯远了……当前,正在写月报的葡萄面对的是,后端发来铺天盖地的两万条数据。
这个数据能用吗? 能用,但不是完全能用。 毕竟做报告的时候,我们不能把两万条数据直接甩到领导的脸上,让他自己想办法看看。 这时万一领导说,看看哪个省销量最多,我们岂不是就当场就抓瞎了。 但是如果变成这样一张图:
就可以清晰明了地看出各个省份之间的销量差距了。 拿着这张图,我们就可以秒回领导:浙江省、天津市、江西省位居销量前三。 而领导也可以满意地拿着这张图向他的领导汇报。 这样一个数据处理的过程,就叫做“数据可视化”,使我们能够对数据进行加工和处理。 而对于一个优秀的前端而言,我们更加关注如何实现数据可视化。这里面涉及的知识领域其实很多,包括数据源整合、数据抽取、数据清洗、数据建模、数据可视化展示等等内容。 本篇文章主要为大家介绍下在前端领域,作为前端开发的我们需要掌握哪些可视化技术,来帮助我们更好地实现数据可视化展示。
一、基础开发技术
1、SVG
SVG是一种XML语言,类似XHTML,可以用来绘制矢量图形。SVG可以通过定义必要的线和形状来创建一个图形,也可以修改已有的位图,或者将这两种方式结合起来创建图形。
以下是MDN上的一个例子:
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> </svg>
绘制了一个矩形(rect标签)、圆圈(circle标签)和文字(text标签)。一般如果画布比较大,有缩放、平移等高频的交互的场景,常见的饼图、柱状图、流程图之类的开发,可以考虑使用 SVG 。关于SVG的具体使用教程可以移步文档:https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial
2、Canvas
Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等领域。
Canvas绘制的图形不会出现在DOM结构中,一般小画布、大数据量的场景适合用Canvas,性能更好。 以下是一个简单例子: HTML部分:
<canvas id="canvas"></canvas>
JavaScript代码部分:
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 150, 100);
关于Canvas的具体使用教程可以移步文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial
3、WebGL
WebGL 使得在支持HTML 的 canvas 标签的浏览器中,不需要安装任何插件,便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行2D和3D渲染。如果您有一些3D绘制的需求,可以采用webGL方案。尤其是3d地图、3d地球等绘制都需要用到webGL技术。
webGL是基于Canvas的绘图技术。要使用webGL进行3D渲染,首先得在页面中创建一个canvas元素,通过这个canvas元素来初始化WebGL上下文。其中细节大家可以移步文档使用学习:https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial
二、可视化组件和工具
1、ZRender
ZRender是一个轻量级的Canvas类库,是一个二维绘图引擎,它提供 Canvas、SVG、VML 多种渲染方式,并提供类 Dom 事件模型。同时,ZRender 也是 ECharts 的渲染器。 使用ZRender并不复杂,我们需要引入相应的JavaScript文件,利用其所提供的API初始化一个Dom容器,在这个容器里绘制您所需要的图形。以下是一个简单例子,创建了一个圆心在[150,50],半径为40的圆:
var circle = new zrender.Circle({ shape: { cx: 150, cy: 50, r: 40 }, style: { fill: 'none', stroke: '#F00' } }); zr.add(circle);
关于更多图形的画法可以参考ZRender的官方文档 https://ecomfe.github.io/zrender-doc/public/ 在此不再赘述。
2、Echarts
如果需要做可视化方面的工作,那么你对Echarts一定不陌生。Echarts是百度开源的一个javaScript可视化图库,可以流畅地在 PC 和移动设备上运行,兼容当前绝大部分浏览器,底层依赖矢量图形库 ZRender,提供直观、交互丰富、可高度个性化定制的数据可视化图表。同时,Echarts的学习和使用也相对容易,通过几个简单的option配置项就可以很快地绘制出一个图表出来。比如一个折线图,只需要十来行配置搞定:
option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] };
除了2D图表,echarts也提供了Echarts-gl,它能实现对三维图表和地球的展示,这点其他开源库基本没有。虽然2D图也可以实现仿三维效果,但只有 Echarts-gl 是基于 WebGL 做的真三维,可以配置光照、材质、阴影,还有独家的后期特效等功能。 关于Echarts的更多配置使用可以移步Echarts文档:https://echarts.apache.org/zh/option.html#title
除了Echarts官方提供的资源外,Echarts的资源社区Gallery才是真正的主力军。这个社区上有非常丰富的图表资源,都是用户个人上传的,还可以进行筛选查询,这些图表基本上可以满足绝大多数应用场景。
3、AntV
AntV 是一个数据可视化项目,也是一个团队,即蚂蚁集团的数据可视化团队。AntV 目前覆盖了统计图表、移动端图表、图可视化、地理可视化、2D 绘图引擎和智能可视化等多个领域,主要包含 G2栈、F2栈、G6栈、X6栈、L7栈、AVA 以及一套完整的图表使用和设计规范。
其中G2主要致力于通用图表库,用更简化的语法构建出各种各样的可交互统计图表。F2是一个专注于移动、开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(node, 小程序,weex等)。L7 是一个基于 WebGL 的开源大规模地理空间数据可视分析开发框架。关于AntV的各类图表使用,大家可以去官网自行查询:https://antv.vision/zh
4、Wyn Enterprise
Wyn Enterprise 是一款强大的嵌入式数据可视化工具,提供了灵活的数据交互和探索分析能力,以及 OEM 白标集成的方式,全面满足行业应用软件的数据分析需求。它具备多源数据整合、报表设计、数据可视化、自助式BI分析、以及数据填报等功能,帮助用户挖掘数据的潜在价值,为管理者制定决策提供数据支撑。
https://www.grapecity.com.cn/solutions/wyn
5、D3
D3.js库是一个开源项目,作者是纽约时报的工程师。准确来说,D3.js实际是一个JavaScript函数库,不是图表库,比较适合于做数据可视化。D3有丰富的数学函数处理数据转换和物理计算,可以把数据和 HTML 结构或者 SVG 文档对应起来,这种特性让我们可以更方便的操作DOM绘制图表。它可以说是 “可视化界的jQuery”,因为D3的api和jQuery非常类似,可以看以下的例子:
d3.select('#chart') .selectAll("div") .data([4, 16, 23, 42]) .enter() .append("div") .style("height", (d)=> d + "px")
如果只是想绘制常见图表,倒是没必要直接用 D3,可以看看那些基于 D3 的图表库,比如Ploty.js、nivo等。这里贴出d3的GitHub项目地址:https://github.com/d3/d3
6、Vega
使用Vega不需要写前端代码,它做到了只需要 JSON 就能完成所有图表相关的开发,包括数据的加载、转换、交互等。由于Vega致力于通过一些JSON配置项实现图表的绘制,导致在生成一些基础简单的图表时,也需要很多行的配置。比如最简单的柱状图就需要95行配置,所以它提供了更简明的语法Vega-Lite,用于快速生成可视化以支持分析。以下是一个柱状图的示例:
这里给大家贴出vega-lite的官网供大家学习:https://vega.github.io/vega-lite/
三、结语
到这里给大家介绍了几种比较热门的可视化技术或图库,以上介绍的都是可以免费使用的,当然市面上也有一些商业图表库,比如HighCharts、AnyChart、Wyn Enterprise、FusionCharts 等,大家有兴趣可以自行了解下。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
隐私计算软硬件结合是产业发展趋势
导读 隐私计算赛道正在崛起,今年也是隐私计算落地元年,涌现出了大量隐私计算相关的公司、产品与应用场景。在刚刚结束的《陆家嘴》杂志“隐私计算”交流机会上,蚂蚁集团可信原生技术总监、可信硬件与内核负责人秦承刚受邀分享了“软硬件结合将加速隐私计算行业发展”的行业趋势。 秦承刚认为:在隐私计算领域中,软硬件结合能够解决数据全生命周期的安全保障和密码学算力加速的问题,是隐私计算技术能够大规模落地的重要保障。 以下为秦承刚分享内容。 一.隐私计算几个问题 看到隐私计算这4个字,大家会首先想到多方安全计算、联邦学习、可信执行环境。但隐私计算本质上需要解决数据流转过程中的数据安全问题。从这个角度看,隐私计算不仅仅是“隐私”,也不仅仅是“计算”,而应是贯穿全数据生命周期的安全保障方案。 图1.近期全球典型数据泄露事件 从2020年到2021年,全球范围发生了很多有较大影响的的数据安全事件。这些事件告诉我们一个事实,把数据安全真正做好是一件很难的事情。各家公司在数据安全上的投入与技术也是千差万别的,我们很难能够把大家在安全水位上拉平。所以,数据全生命周期安全保障是第一个问题。 隐私计算天然与密码学紧密结...
- 下一篇
全链路在线生产数据库压测利器:Apache ShardingSphere 影子库特性升级
作者介绍 侯阳 SphereEx 中间件研发工程师,Apache ShardingSphere Contributor。 目前专注于 ShadowDB 及全链路压测相关的设计和研发。 什么是全链路压测 随着互联网行业的快速发展,业务也进入了快速扩张阶段,多变的用户需求对整个系统的稳定性冲击可想而知。比如外卖平台大量用户产生的订单集中分布在中午和傍晚两个时间段,再比如电商平台的购物节、秒杀活动等。 每种业务都由一系列不同的业务系统来提供服务,每个业务系统都分布式地部署在不同的机器上。“流量规划” 既能保障系统稳定性、又能节约成本对于技术团队来说是一重大难题,为了精准地获取到单台机器的服务能力,压力测试要在生产环境进行。既能保证环境的真实性,也能保证流量的真实性,大大提高“流量规划”的准确性。 影子库与全链路压测 但在线上业务系统做压测,风险不言而喻,比如数据污染问题或是性能问题。试想一下,如果压测结束后用户发现自己订单丢失了或是凭空多出一批待支付的订单,是否极大影响用户体验? 全链路在线压测是一项复杂而庞大的工作,需要各个微服务、中间件之间配合完成。Apache ShardingSphe...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- Mario游戏-低调大师作品
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS7,CentOS8安装Elasticsearch6.8.6
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- CentOS6,CentOS7官方镜像安装Oracle11G
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2配置默认Tomcat设置,开启更多高级功能