14

生生不息,AntV 统计图表 G2Plot 1.0 发布

 3 years ago
source link: https://zhuanlan.zhihu.com/p/113909412
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

生生不息,AntV 统计图表 G2Plot 1.0 发布

G2Plot 是一个开箱即用、易于配置、体验优雅的统计图表库,致力于帮助用户以最小成本生成高质量统计图表。

G2Plot 最初诞生于阿里经济体 BI 产品真实场景的业务诉求。动态、高度不确定是 BI 产品和中台系统业务数据的一个普遍特征,而这种特征对统计图表的功能和体验提出了巨大的挑战。如何能够帮助报表系统和一线前端在复杂数据条件下快速高效地创建统计图表,同时保证图表在各种显示空间和数据状态下的可读性和可用性? 为解决这两个痛点问题,AntV 与 DeepInsight、QuickBI 和 FBI,阿里经济体三个优秀 BI 产品技术团队联手打造了 G2Plot。

自去年 11 月发布 0.x 试用版后,G2Plot 经历了 20 多个小版本的迭代优化,图表类型已从最常用的 7 个扩展到 40 多个,在核心 BI 产品真实场景上线验证后终于带来 1.0 正式版。希望我们在数据可视化业务,特别是 BI 产品中的开发和设计经验能够帮助到更多用户轻松制作优雅的统计图表。

图形语法是统计图表的奠基理论,具有完备、灵活、无限可能的可视表达能力,全球顶级 BI 系统的可视分析实现基本都以此理论为基础,G2 可以说是 JavaScript 领域最完备的图形语法实现,也因此成为很多专业可视分析应用的首选技术方案。然而,对于应对大部分常规应用,对于大部分工程师、设计师和产品经理来说,学习理解“视觉通道”、“坐标系变换”、“数据映射”等专业可视化概念需要付出相当高的学习和时间成本。在统建阿里数据可视化基础设施的大背景下,AntV 与阿里经济体多个团队联合共建 G2Plot 应运而生,构建在 G2 强大的可视表达能力之上,采用大家熟悉的配置化、描述性 API,为使用者屏蔽可视化专业知识,用户只需要引用相应的图表,指定数据和配置字段即可通过数据驱动的方式生成图表。

简约而不简单的精雕体验

今年1月4日在杭州西湖文体中心,第三届 SEE Conf 蚂蚁金服体验科技大会上,AntV 核心研发工程师,同时也是 DeepInsight 的数据可视化方向负责人小为给大家带来了精雕细琢,打造极致可视化图表体验的精彩分享,还没看过的同学强烈推荐看看。分享中已经提前剧透了 G2Plot 的大量体验优化细节,G2Plot 每一个线上图表都经过了细心雕琢,我们会在关注图表自身特点的基础上,根据不同的使用场景、显示空间、数据特点针对图表的细节和体验进行精心打磨。

继承 G2 无限可能的特性,G2Plot 拥有丰富多样的图形扩展。

通过对数据进行剪枝处理和相关点简化算法,对大数据量和极小显示空间等特殊场景进行图形优化。

我们把一些常用的复杂交互进行了内置,用户不需要再自行封装,只需调用相关配置项即可使用。同时,我们还把细粒度的事件机制,画布、图形、组件交互能力全方位透出以方便用户高度个性化定制。

v2-037143102f463a1fbf6fa0431653a32d_b.jpg
图表联动交互

v2-7c123698e9810ef6cbf141fd8aca6728_b.jpg
数据钻取交互
v2-36d2329bab13030503bfd46e02cc93a9_b.jpg
数据筛选交互

我们根据每一个图表自身的特点和使用场合,精心设计了一些动画效果,让图表更加灵活生动。这些复杂动画效果都已内置,可以通过配置项和图表方法直接调用。同时,我们还提供了细粒度的动画配置,用户可以通过指定动画类型、时间、缓动效果,自由控制图表的入场、消失和数据更新动画效果。

v2-3b623266cd29f3da2539e40e4d0d22cf_b.jpg
更新动画
v2-b4c23791ecddb89d2577e56654dbb087_b.jpg
"你追我赶"的入场动画

响应式组件,在现实的图表应用场景中,一个棘手的难题是图表的展示空间往往并不足够显示图表的数据量,造成极值情况下文本的重叠遮挡内容无法自适应内容裁剪等问题。G2Plot 借鉴宽容性设计的思想,在图表的信息密度过高时,对图表组件信息进行抽稀、省略、调整,保证图表主要信息的展示和基本可读性

内置统计分析高级组件,在一图一做、细致打磨的过程中,我们根据每一个图表的特点,将使用图表进行统计分析时常用的组件进行了封装,内置进G2Plot。

v2-7636b945d21b4c661f25c206787c3ccc_b.jpg
堆叠柱状图(联通区域组件)
v2-e84ab9a44b94f8734b88b6d6bb95736c_b.jpg
热力图(滑动锚点图例)

下面是 G2Plot 与几种常用图表库的效果对比:



默认好看与灵活配置并重

基于 AntV 设计语言,一套提炼自企业级产品的视觉语言和设计规范,G2Plot 根据每一个图表自身的特点沉淀出一套默认配置,保证每个图表在开箱状态下,呈现给用户的就是最规范、最优雅的状态。Good by Default 的同时,G2Plot 开放细粒度的图表配置,无论图形样式、各类图表组件、文本显示还是图表事件,用户都可以根据自己的业务场景生产个性化图表。

非常感谢你的耐心阅读,G2Plot 发布 1.0 版本只是一个开始,虽然已经在 DeepInsight 等 BI 产品中应用上线,但相信还有很多问题有待打磨和完善,欢迎在 GitHub 给我们反馈问题。如果你对 G2Plot 或者 AntV 旗下的其他产品感兴趣,可以通过以下渠道关注我们:


Recommend

  • 28

    In modern web development, data visualization could a significant job for front-end developers, such as charts, maps, graph and data analytics. In this field, there are plents of great players like

  • 23
    • zhuanlan.zhihu.com 3 years ago
    • Cache

    🚢 G2Plot 2.0 全新来袭...

    G2Plot 官网 | GitHub 开源地址

  • 8
    • zhuanlan.zhihu.com 3 years ago
    • Cache

    「利业·立业」- AntV 与业务的故事

    「利业·立业」- AntV 与业务的故事支付宝(中国)网络技术有限公司 数据技术专家▍导读AntV 是一个数据可视化项目,也...

  • 3
    • www.leixuesong.com 3 years ago
    • Cache

    阿里统计图表库G2Plot

    阿里统计图表库G2Plot WEB前端 JS开发 2020年7月2日 G2Plot中的 G2...

  • 10

    经常有同学问 G2、G2Plot、Ant Design Charts 什么关系,我该选择哪个 ?下面我们就来介绍下三者和他们直接的关...

  • 9

    如何使用 G2Plot 实现超强二维码能力?> TL;DR  G2Plot 是一个基于 G2 图形语法(the Grammar of Graphics)的通用统计图表库。基于 G2 栈,可以实现各种意想不到到的效果和能力。 二维码是什么,草...

  • 9

    AntV 图可视分析解决方案(设计篇)— SEE Conf 分享不过认真划水的设计师

  • 6
    • www.chenwenguan.com 3 years ago
    • Cache

    AntV Chart绘制内存和CPU曲线

    AntV Chart绘制内存和CPU曲线 2021年3月14日 | 最近更新于 下午7:04AntV G2是蚂蚁金服数据可视化团队开发的一套基于可视化编码的图形语法,以数据驱动,具有高度的易用性和扩展性,用户无需关注各种繁琐的实现细节,一条语句即可构建出各...

  • 7
    • segmentfault.com 3 years ago
    • Cache

    可视化引擎antv系列(一)

    5年前的时候,接触过一点可视化开发,因为要做用户画像,那个时候很自然了选择了百度的echarts,感觉很酷炫,很好用,纯配置写法。当时可选择的可视化引擎大概有echarts,d3,hightcharts等,相比,echarts文档最全,最易上手,功能也最强大。不过大概也就是用...

  • 2
    • segmentfault.com 2 years ago
    • Cache

    蚂蚁金服AntV-S2重磅发布

    蚂蚁金服AntV-S2重磅发布S2 是 AntV 团队推出的数据表可视化引擎,旨在提供高性能、易扩展、美观、易用的多维表格。不仅有丰富的分析表格形态,还内置丰富的交互能力, 帮助用户更好地看数...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK