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

选好可视化

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

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

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

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

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

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

G2_1

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

G2的构成

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

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

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则是数据映射的图形标识,就是指的点,线,面,通过对其操作,从而展示图形。

大体步骤如下:

G2 经典新生

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

简洁灵活的交互语法

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

1

渲染引擎自由切换

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


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

256+58的试炼

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

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

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

2

DataV数据可视化

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

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

_


原文链接
本文为云栖社区原创内容,未经允许不得转载。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/518769.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Centos7 docker 安装 zookeeper

# 默认下载最新版本 docker pull zookeeper# 指定版本下载 docker pull zookeeper:3.5.8# 创建zk容器 docker run -di -p 2181:2181 --namezk zookeeper:3.5.8# 查看正在运行的容器 docker ps# 防火墙开放2181端口firewall-cmd --zonepublic --add-port2181/tcp --permanent# 重…

10分钟带你逆袭kafka之路

作者:故事凌 1. kafka概述 ##1.1 kafka简介 Apache Kafka 是一个快速、可扩展的、高吞吐的、可容错的分布式“发布-订阅”消息系统, 使用 Scala 与 Java 语言编写,能够将消息从一个端点传递到另一个端点,较之传统的消息中 间件…

漫谈分布式计算框架

如果问 mapreduce 和 spark 什么关系,或者说有什么共同属性,你可能会回答他们都是大数据处理引擎。如果问 spark 与 tensorflow 呢,就可能有点迷糊,这俩关注的领域不太一样啊。但是再问 spark 与 MPI 呢?这个就更远了。…

UI2CODE再进化!结合Redux的框架升级!

背景 UI2CODE的目标是通过分析视觉稿得到对应的代码,让AI提高开发效率。然而过去静态化页面的产出,不能得到业务场景的需求。针对于此,我们以UI2CODE自动化开发为基底,结合Redux的消息机制,将自动化生成的维度提升到页…

8080:The Tomcat connector configured to listen on port 8080 failed to start 的解决办法

问题再现: 控制台最后会显示Application启动失败,如下: ...*************************** APPLICATION FAILED TO START ***************************Description:The Tomcat connector configured to listen on port 8080 failed to start. …

数据库连接池的原理没你想得这么复杂

来源 | 犀牛饲养员的技术笔记封图| CSDN 下载于视觉中国背景介绍数据库连接池和线程池等池技术存在的意义都是为了解决资源的重复利用问题。在计算机里,创建一个新的资源往往开销是非常大的。而池技术可以统一分配,管理某一类资源,它允许我们…

CICD联动阿里云容器服务Kubernetes实践之Bamboo篇

本文档以构建一个 Java 软件项目并部署到 阿里云容器服务的Kubernetes集群 为例说明如何使用 Bamboo在阿里云Kubernetes服务上运行Remote Agents并在agents上运行Build Plans。 1. 源码项目 本示例中创建的GitHub源码项目地址为: https://github.com/AliyunConta…

拔掉数据库的电源会怎样?阿里云数据库新型灾备架构,让云端容灾有“备”无患

拔掉数据库的电源会怎样? 假设我们拔掉数据库的电源会怎样? 在日前举行的阿里云“企业级”云灾备解决方案发布会上,阿里云智能技术战略总监陈绪就来了一场现场“断电”演示,拔掉了数据库的电源。 (直播回放&#xf…

高可用 kubernetes 集群部署实践

前言 Kubernetes(k8s) 凭借着其优良的架构,灵活的扩展能力,丰富的应用编排模型,成为了容器编排领域的事实标准。越来越多的企业拥抱这一趋势,选择 k8s 作为容器化应用的基础设施,逐渐将自己的核…

还不知道 AWS 是什么?这 11 个重点带你认识 AWS !

作者 | Sajan Agrawal译者 | 天道酬勤 责编 | 徐威龙封图| CSDN 下载于视觉中国云计算的出现使软件行业受益匪浅。大多数公司已经改变了策略,将现有的项目转移到云上,并在此基础上构建新的项目。今天,让我们了解一个名为亚马逊网络服务云&…

KeeperErrorCode = Unimplemented for /test

使用Curator时报错,原因是因为版本问题 zookeeper版本:zookeeper-3.4.8 cuartor版本:3.2.0 看Curator官网的声明: 地址:http://curator.apache.org/ The are currently two released versions of Curator, 2.x.x and 3…

Java-用户交互Scanner

next方式 public class Demo01 {public static void main(String[] args) {// 创建一个 扫描器对象,用于接收键盘数据Scanner scanner new Scanner(System.in);System.out.println("使用next 方式接收:");// 判断用户有没有输入字符串if (sc…

【ECS最佳实践】基于多块云盘构建LVM逻辑卷

一、LVM简介 LVM是逻辑盘卷管理(Logical Volume Manager)的简称,它是Linux环境下对磁盘分区进行管理的一种机制,LVM是建立在硬盘和分区之上的一个逻辑层,来提高磁盘分区管理的灵活性。 LVM最大的特点就是可以对磁盘进行…

剧情反转:今年AI要凉!薪资碾压全行,但人才缺500万!

最近关于AI有两个消息,一个好的,一个坏的。先说好消息。德勤发布《全球人工智能发展白皮书》,预计到2025年,世界人工智能市场规模将超过6万亿美元!2017年至2025年复合增长率达30%。毫无疑问,目前AI还是一个…

maven 报错一站式解决方案

文章目录一、本地maven玩耍三部曲1. 先确认项目引用默认的maven配置是否正确2. 查看IntelliJ IDEA查看maven配置是否正确3. 重新导入maven依赖二、本地maven报错5步走2.1. 配置maven阿里云仓库2.2. 删除本地仓库中不完整的jar2.3. 连接外网2.4. 在线下载依赖2.5. 重新导入maven…

如果测试没有梦想,那跟咸鱼有什么区别?

软件质量不是测出来的,但为什么又有这么多测试工程师为了质量而工作?测试是一个成本部门,测试创造的价值是什么?研发的模式在不断地变化,测试的定位如何不断去定义,未来的测试又会是什么形态?今…

使用阿里云极速型NAS构建高可用的GitLab

使用阿里云文件存储NAS构建GitLab高可用环境 GitLab简介 GitLab是一个利用 Ruby on Rails 开发的开源应用程序,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目。Ruby on Rails 是一个可以使你开发、部署、维护 web 应用程序变得…

The following SDK components were not installed: extra-google-m2repository and platform-tools

安装android studio到最后一步的时候遇见了这个问题 。 android studio安装详见Android Studio 安装 经过查阅多篇博客 把他们的解决方案放在一起一顿操作猛如虎,然后就成了。。。 2篇原文链接我放在这里: Android Studio新建工程时SDK缺少extra-an…

数据库中间件漫谈——看看云时代,它会走向何方

来源 | 阿丸笔记封图| CSDN 下载于视觉中国前言随着业务的发展,MySQL数据库中的表会越来越多,表中的数据量也会越来越大,相应地,数据操作的开销也会越来越大;另外,无论怎样升级硬件资源,单台服务…

即插即用,基于阿里云Ganos快速构建云上开源GIS方案

对于轻量级GIS应用,选择具备时空能力的云上数据库再搭配开源GIS软件,能够快速构建稳定、廉价、实用的GIS解决方案。Ganos是阿里云自研时空基础设施(PaaS层)的核心引擎,该引擎整合了云上异构计算并行加速、OSS大规模存储…