做可交互的统计图表,这套图形语法不容错过

简介: “一图胜千言”,是最直观的数据可视化魅力。以图表来传达和沟通信息,其效率远超枯燥乏味的数据表达。

选好可视化

“一图胜千言”,是最直观的数据可视化魅力。以图表来传达和沟通信息,其效率远超枯燥乏味的数据表达。

有需求就有市场。数据可视化崭露头角后,各个厂商出备的产品、解决方案,开发者自研的可视化工具、操作平台都如雨后春笋般冒了出来。

受众不同,个人的选择就会不同;需求不同,特色的选择就会不同。但选择繁多,很多开发者和企业就会头疼:有数据可视化的需求,但工具到底该如何选择?

AntV-G2是阿里巴巴2018年推出的开源项目,是一套基于可视化编码的图形语法,具有高度的易用性和扩展性。无需关注繁琐的实现细节,一条语句即可构建出各种各样的可交互统计图表。它具备以下特性:

  • 简单、易用:从数据出发,仅需几行代码就能轻松获得想要的图表展示效果
  • 完备的可视化编码:以数据驱动,提供从数据到图形的完整映射
  • 强大的扩展能力:任何图表,都可以基于图形语法灵活绘制,满足无限创意

作为一个非常全面的图表库,AntV G2库有折线图、柱状图、条形图、雷达图、箱体图、面积图、饼图、热力图、仪表盘… …几乎满足了所有基本的图表类需求。

G2_1

另外,G2还是一个使用WebGL/canvas技术实现的基础图表库,因此既可以在原生js环境下使用,也可以使用任意的js框架。基于G2封装的组件框架有BizCharts和Viser,所以如果使用angular、react、vue的话可以直接使用其封装的组件,和自行动手封装G2组件是一样的效果。

G2的构成

一个可视化框架需要四部分:

  • 数据处理模块,对数据进行加工的模块,包括一些数据处理方法。例如:合并、分组、排序、过滤、计算统计信息等
  • 图形映射模块,将数据映射到图形视觉通道的过程。例如:将数据映射成颜色、位置、大小等
  • 图形展示模块,决定使用何种图形来展示数据,点、线、面等图形标记
  • 辅助信息模块,用于说明视觉通道跟数据的映射关系,例如:坐标轴、图例、辅助文本等

1

test  在数据处理模块上,dataSet主要通过state状态管理多个dataview视图,实现多图联动,或者关联视图。dataView则是对应的是每一个数据源,通过connector来接入不同类型的数据,通过tranform进行数据的转换或者过滤。最后输出我们理想的数据,dataSet是与g2分离的,需要用到的时候可以加载;
test  在图形映射模块上,度量 Scale,是数据空间到图形空间的转换桥梁,负责原始数据到 [0, 1] 区间数值的相互转换工作,从原始数据到 [0, 1] 区间的转换我们称之为归一化操作。我们可以通过chart.source或者chart.scale('field', defs)来实现列定义,我们可以在这对数据进行起别名,更换显示类型(time,cat类型等);
test  辅助信息,就是标记数据,方便理解数据;
test  图形展示chart图表是一个大画布,可以有多个view视图,geom则是数据映射的图形标识,就是指的点,线,面,通过对其操作,从而展示图形。

大体步骤如下:

2

G2 经典新生

目前AntV-G2已更新到3.4版本。通过这次升级,G2往经典的“图形语法”理论注入了新的生命,为大家带来“交互语法” — 一套简洁高效的交互式可视化解决方案。同时,G2的底层渲染进行了升级,实现 SVG 和 Canvas 自由切换。

简洁灵活的交互语法

G2将经典的图形语法理论扩展为“交互语法”,一方面开放 220+ 种交互事件,支持定制最小粒度的图表元素交互,另一方面封装了各类复杂的、常用的交互场景,使丰富灵活的图表交互仅需一行代码实现。

1

渲染引擎自由切换

G2的绘图引擎开始支持 SVG 和 Canvas 双引擎,以适应更多业务场景。并在拾取、动画管线、碰撞检测等方面进行了优化,G2的绘图能力变得更自由、更流畅。

3
两种引擎在不同场景的性能对比

256+58的试炼

通过256 plots计划和58+业务模板计划,来向用户提供更丰富的场景,也由此检验G2图表的数据表达能力。

  • 通过256 plots计划,G2挑战了d3.js、R语言社区等经典图表绘制,检验并刺激了G2框架图形能力的更新。

4_jpeg

  • 58+业务模板源自真实的业务,由基础的线、柱、饼图表改造而起,进而辐射到分面、迷你图等更复杂的场景,能更好的帮助用户找到理想的可视化解决方案。

2

DataV数据可视化

AntV-G2功能虽然强大,但对于需要开箱即用、直接适用业务的企业而言,距离可视化还缺少一个成熟的产品。幸运的是,阿里云.DataV数据可视化完美承担了这样的一个角色。DataV只需通过拖拽式的操作,使用数据连接、可视化组件库、行业设计模板库、多终端适配与发布运维于等功能,就能让非专业的人员快速地将数据价值通过视觉来传达。

DataV具有丰富的图表库,并外接有国内两大第三方图表组件库——Echarts和今日的主角:AntV-G2。在强大的图表库支持下,DataV可以制作出丰富多样的可视化页面,随心所欲自由搭配图表来做组合。

_


有任何问题,我们欢迎开发者进数据智能群交流讨论。

一:钉钉搜索数字进入交流群:23116044
二:钉钉扫描二维码进交流群:
test

相关实践学习
基于Hologres轻量实时的高性能OLAP分析
本教程基于GitHub Archive公开数据集,通过DataWorks将GitHub中的项⽬、行为等20多种事件类型数据实时采集至Hologres进行分析,同时使用DataV内置模板,快速搭建实时可视化数据大屏,从开发者、项⽬、编程语⾔等多个维度了解GitHub实时数据变化情况。
阿里云实时数仓实战 - 用户行为数仓搭建
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求:熟练掌握 SQL 语法熟悉 Linux 命令,对 Hadoop 大数据体系有一定的了解   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
相关文章
|
数据可视化 算法 数据挖掘
基于python的笔记本电脑购买意愿影响因素分析,包括情感分析和聚类分析
本文通过Python大数据技术对笔记本电脑评论数据进行情感分析和聚类分析,揭示了产品性能、外观设计和用户地区等因素对购买意愿的重要影响,并为企业提供了优化产品设计和销售策略的参考。
636 2
|
6月前
|
搜索推荐 数据处理 UED
1688新品上架没流量?这套“打标爬升”法则,让你的产品快速被看见的实用指南!
本文详解1688新品运营策略,通过“新品标签快速形成”与“四阶段数据爬升”,助力店铺实现新品快速曝光与转化。涵盖精准选品、老客破零、四阶段执行计划及成长积分规则,全面提升新品竞争力。
|
11月前
|
人工智能 自然语言处理 API
AI-Compass Agent智能体技术生态:整合AutoGPT、LangGraph、CrewAI等前沿框架,构建自主决策工具调用的AI智能体系统
AI-Compass Agent智能体技术生态:整合AutoGPT、LangGraph、CrewAI等前沿框架,构建自主决策工具调用的AI智能体系统
|
10月前
|
JSON 缓存 API
孔夫子旧书网 API 实战:古籍与二手书数据获取及接口调用方案
孔夫子旧书网作为国内知名古籍与二手书交易平台,其数据对图书收藏、学术研究及电商系统具有重要价值。本文详解其API调用方法,涵盖认证机制、搜索参数、数据解析及反爬策略,并提供可直接使用的Python代码,助力开发者合规获取数据。
|
10月前
|
人工智能 自然语言处理 JavaScript
Github又一AI黑科技项目,打造全栈架构,只需一个统一框架?
Motia 是一款现代化后端框架,融合 API 接口、后台任务、事件系统与 AI Agent,支持 JavaScript、TypeScript、Python 多语言协同开发。它提供可视化 Workbench、自动观测追踪、零配置部署等功能,帮助开发者高效构建事件驱动的工作流,显著降低部署与运维成本,提升 AI 项目落地效率。
825 0
|
安全 API 数据安全/隐私保护
速卖通AliExpress商品详情API接口深度解析与实战应用
速卖通(AliExpress)作为全球化电商的重要平台,提供了丰富的商品资源和便捷的购物体验。为了提升用户体验和优化商品管理,速卖通开放了API接口,其中商品详情API尤为关键。本文介绍如何获取API密钥、调用商品详情API接口,并处理API响应数据,帮助开发者和商家高效利用这些工具。通过合理规划API调用策略和确保合法合规使用,开发者可以更好地获取商品信息,优化管理和营销策略。
|
安全 Java 大数据
SpringBoot+Mybatis 实现动态数据源切换方案
SpringBoot+Mybatis 实现动态数据源切换方案
1629 1
|
IDE Java Linux
Java一分钟之-JavaFX:构建桌面GUI应用
JavaFX是Java用于构建桌面应用的强大力量,提供丰富的UI组件、动画、媒体播放和跨平台能力。本文简要介绍JavaFX,讨论环境配置、布局混乱和事件处理等常见问题及其解决方案。通过学习官方文档、实践和使用IDE辅助,开发者能避免这些问题。示例代码展示了一个简单的JavaFX应用,展示如何创建UI、处理事件和构建布局。
1059 1
|
数据安全/隐私保护
windows10 手动忘记wifi密码重置wifi密码
windows10 手动忘记wifi密码重置wifi密码
551 0
|
存储 算法 计算机视觉
FPGA在数字信号处理中的应用与实践
FPGA在数字信号处理中的应用与实践