AntV_官方

AntV_官方 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

在探索用户体验设计与端工程技术的路上不断前行。

个人动态

AntV_官方 赞了文章 · 2020-04-13

精益 React 学习指南 (Lean React)- 1.1 React 介绍

书籍完整目录

1.1 React 介绍

图片描述

1.1.1 React 是什么

React IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
来自:React 官方网站

狭义来讲 React 是 Facebook 内部开源出来的一个前端 UI 开发框架,广义来讲 React 不仅仅是 js 框架本身,更是一套完整的前端开发生态体系,这套体系包括:

  1. React.js

  2. ReactRenders: ReactDOM / ReactServer / ReactCanvas

  3. Flux 模式及其实现(Redux , Fluxxor)

  4. React 开源组件

  5. React Native

  6. GraphQl + Relay

任何技术都是一样,技术本身的核心不会太复杂,但是围绕这个主体会有很多依附的知识点形成了体系化的技术栈。 所以我们谈学习 React 并不仅仅是学习 React 本身,而是学习这套开发体系,整个技术栈, 本书也是围绕这个技术栈系统的讲解。

本书中除了 React Native 以外都会进行系统的讲解,React Native 是相对于 WEB 来说另外一个较大的技术体系,本书会把重点放于 React Web 开发。

1.1.2 React 中的基本概念

我们先来认识一下 React 中的基本概念

React.js
React.js 是 React 的核心库,在应用中必须先加载核心库。

ReactDOM.js
ReactDOM.js 是 React 的 DOM 渲染器,React 将核心库和渲染器分离开了,为了在 web 页面中显示开发的组件,需要调用 ReactDOM.render 方法, 第一个参数是 React 组件,第二个参数为 HTMLElement。

JSX
JSX 是 React 自定义的语法,最终 JSX 会转化为 JS 运行于页面当中。

组件
组件是 React 中的核心概念,页面当中的所有元素都是通过 React 组件来表达, 我们将要写的 React 代码绝大部分都是在做 React 组件的开发。

VIRTUAL DOM
React 抽象出来的虚拟 DOM 树,虚拟树是 React 高性能的关键。

单向数据流:one-way reactive data flow
React 应用的核心设计模式,数据流向自顶向下

1.1.3 Hello React World

我也是性子急的人,按照技术界的惯例,在学习一个技术前,首先得说一句: “Hello World!”。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script data-original="http://facebook.github.io/react/js/react.js"></script>
    <script data-original="http://facebook.github.io/react/js/react-dom.js"></script>
    <script data-original="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
        var Hello = React.createClass({
          render: function() {
            return <div>Hello {this.props.name}</div>;
          }
        });

        ReactDOM.render(
          <Hello name="World" />,
          document.getElementById('example')
        );
    </script>
  </body>
</html>

读者可以复制代码到一个新的 HTML 文件中,并通过浏览器打开,上面的 html 中目前我们只用关心 script 标签内的代码,script 标签内的语法为 JSX 语法,ReactDOM 是 React 的 DOM 渲染器。

了解了基本概念以及看过 Hello World 后,读者可能会开始产生疑问了:

  1. jsx 语法怎么和 HTML 写法一样?

答:是的,看上去一样, 但jsx 和 HTML 本质的不同是 jsx 直接在函数中写 xml 标签。在 1.2 节中,会详细介绍 jsx 以及和 HTML 做更多的对比。

  1. 看上去 React 除了 jsx 以外,并没有什么特殊的地方,不就是将模板字符串渲染到 DOM 中吗?你能告诉我 React 和其他框架有什么不同之处吗?

答:答案见 1.1.4 节

  1. Hello World 也并不能看出 React 的能力,你能先告诉我 React 能做些什么吗?

答:答案见 1.1.5 节

1.1.4 React 的独特之处

相比其他前端框架,为什么 React 独树一帜,能够脱颖而出呢?

  1. 组件的组合模式

  2. 单向数据流的设计

  3. 高效的性能

  4. 分离的设计

1.1.4.1 组件的组合模式

组合模式:组合模式有时候又叫做部分-整体模式,它使我们树型结构的问题中,模糊了简单元素和复杂元素的概念,客户程序可以向处理简单元素一样来处理复杂元素,从而使得客户程序与复杂元素的内部结构解耦。

图片描述

React 就是基于组合模式, 无论是应用等级还是一个表单亦或是一个按钮都视为一个组件, 然后基于组件的组合构建整个应用,这样的结构一直是前端界想要却迟迟不来的 web component。

React 中组件的组合:

图片描述

基于组合模式的优点:

  1. 构建可重用的组件:组件的开发能够形成公司的组件库,每个业务的开发都能积累可重用的组件。

  2. 无学习障碍:天然符合 HTML 的结构, 对前端开发者来说几乎没有学习障碍。

  3. 具有弹性的架构:组合模式很简单却很有效,能够构建简单的页面也能构建大型的前端应用。

  4. 源码高可维护性:开发只是工作中的一部分,应用的上线才是噩梦的开始,很多大型应用因为复制的业务逻辑导致无法快速响应业务需求,可维护性低。

1.1.4.2 单向数据流的设计

我们都知道 Javascript 是脚本语言,不能像静态语言一样通过编译定位为题,想要清晰的定位到应用中的 bug 需要深入了解业务代码,对于大型前端应用来说,因为业务代码量很大且复杂,很难定位到 bug。 然而 React 的单向数据流的设计让前端 bug 定位变得简单, 页面的 UI 和数据的对应是唯一的,我们可以通过定位数据变化就可以定位页面展现问题。

单向数据流设计:

图片描述

1.1.4.3 高效的性能

这里要提一个概念, 可能你已经了解或听说了,就是 virtual dom。 React 之所以能够这样设计要归功于 Virtual DOM 算法, 基于算法可以让只有需要改变的元素才去重渲染。在后面的内部实现章节中会详细讲解 virtual DOM 算法的实现

1.1.4.4 分离的框架设计

React.js 现在的版本已经将源码分开为 ReactDOM 和 React.js . 这就意味着 React 不仅仅能够在 web 端工作, 甚至可以在服务端(nodejs),Native 端运行。

与此同时, 我们可以自定义自己的渲染器, 实现比如 Three.js, Pixi.js, D3.js 的 React 方式渲染。

1.1.5 React 应用范围

React 可应用的范围:

图片描述

  1. web 端应用

  2. 原生应用 - IOS、Android、Native 应用

  3. Node.Js 服务端渲染

1.1.5.1 Web 端应用

Web 应用是 React 的出发点,我们可以通过 React 构建从简单的 TODOAPP 到大型的电商购物网站应用。 同时除了能够处理 HTML 以外, 在 Web 端, 我们同样可以通过 React 来实现数据可视化, 图表展现,甚至是游戏开发:

1.1.5.2 原生应用

除了 Web 端以外,我们可以使用同样的 jsx 语法构建 IOS 或者 Android 应用, 这要归功于 facebook 开源的 React Native。 基于 React Native , 我们将可以使用 jsx 来实现具有原生应用性能的 UI 运行于 IOS 和 android 中,同时我们也可以通过 NW.js 或者 Electron 来实现基于 React 的桌面应用。

1.1.5.3 服务端渲染

React 除了在 Web 和 Native 环境以外, 也可以通过 React 实现在服务器端渲染出 HTML。

查看原文

赞 36 收藏 164 评论 10

AntV_官方 发布了文章 · 2020-03-23

进无止境,蚂蚁金服 AntV 统计图表 G2Plot 1.0 发布

banner2.jpg

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,为使用者屏蔽可视化专业知识,用户只需要引用相应的图表,指定数据和配置字段即可通过数据驱动的方式生成图表。

codeless.png

简约而不简单的精雕体验

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

图形

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

图形变化.png

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

1584210652306-45dc47c3-5f22-483e-b710-661797cb9ffa.png

交互

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

A_gd00QaD9110AAAAAAAAAAABkARQnAQ.gif

1584007749879-c74b5ce3-d2c4-44d5-a47e-88a5d19ff123.gif未标题-1.gif

图表联动、数据钻取与筛选

动画

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

A_cJIpS4PlAyMAAAAAAAAAAABkARQnAQ.gif1578106109655-eed7980f-4893-4d49-8778-b9d6e287059f.gif

更细腻的更新与入场动画

组件

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

responsive.png

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

组件1.png

未标题-3.gif未标题-2.gif

堆叠柱状图(联通区域组件)                                        热力图(滑动锚点图例)

体验对比

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

pie-label.png

treemap-label.png

默认好看与灵活配置并重

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

还要改.jpg

最后

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

查看原文

赞 1 收藏 0 评论 0

AntV_官方 发布了文章 · 2020-03-19

蚂蚁金服 AntV F2 3.6 发布,更强!更快!

编组 2.png

导读

F2,为移动端而生的可视化图表引擎。从 3.1 全新版本发布以来,我们一直朝着提供高性能,高扩展,开箱即用的生动图表的方向努力,同时面对移动端多样的环境,多端适配也一直是我们在努力追求的目标。这次 3.6 的升级,我们不仅在性能上取得了突破性的提升,同时在多端适配上,做到了真正意义上的一份代码多端运行

特性预览

💪更强

手势交互

在 F2 3.6 里,我们对缩放和平移进行了整体的重构,去掉了原先 hammerjs 对于浏览器特性的依赖,在内部实现了缩放,平移等手势动作,✨让手势完全突破端的限制,全端支持! ✨。

H5 上的手势交互

折线图柱状图
Kapture 2020-03-10 at 16.20.16.gifKapture 2020-03-10 at 21.18.09.gif

小程序上的手势交互

折线图柱状图
Kapture 2020-03-12 at 14.44.04.gifKapture 2020-03-12 at 14.46.55.gif

演示示例见:f2-wx-demo

React Native 上的图表及手势交互

折线图柱状图
Kapture 2020-03-12 at 19.58.32.gifKapture 2020-03-12 at 20.03.04.gif

演示示例可见:f2-rn-gcanvas-demo

其他环境下的 F2

我们的目标是全端,我们后面会提供整一套 native 下的图表解决方案,让你在 native 上也能用 F2 轻松实现可视化图表,让你实现一份代码全端运行!
如果想要在Nodejs端绘制,F2也能搞定,具体实现可以参考 f2-node-demo

🚀更快

在复杂手势的基础上,我们对 F2 的性能进行了专项的优化,并且对内部实例的生命周期进行了更细粒度的控制,让图表二次渲染的性能得到大幅度的提升,尤其是对图表手势交互的体验有明显的提升!

各机型性能表现

下面是各个机型在渲染 2200 个数据点的对比效果:

iphone 7p 上的性能表现

3.5 版本3.6 版本
Kapture 2020-03-13 at 0.16.39.gifKapture 2020-03-10 at 14.27.54.gif

👍iphone 7p下流畅度提升明显,绘制整体绘制耗时缩短了40%,满帧跑毫无压力!

HTC M8st (低端机) 上的性能表现

3.5 版本3.6 版本
Kapture 2020-03-13 at 0.13.07.gifKapture 2020-03-12 at 23.12.42.gif

👍在低端机型上 3.5 几乎不可用,而 3.6 版本使用基本无问题!

代码演示

3.5 版本3.6版本
代码示例: https://codesandbox.io/s/35-pinch-pan-i9nzz代码示例: https://codesandbox.io/s/36-pinch-pan-0yg73
二维码预览
image.png
二维码预览
image.png

关于未来

正如前面 AntV 架构演进-F2 篇里提到的,F2 也将迈入 4.0 时代,F2 、G2 也将会有更多的互通,但是我们的目标还是不变,依然是为移动端带来高性能、高扩展,且能开箱即用的可视化图表解决方案,敬请期待~

如何升级

这次的 3.6 版本的主功能是全兼容升级,可以放心使用,缩放和拖拽是全新实现,且默认内置,只用把之前按需引用的方式去掉就可以体验了,当然如果有问题,请通过下面的任意渠道联系我们,或者直接给我们提 PR。

最后

非常感谢你的阅读,如果你对 F2 感兴趣,别忘记了在 GitHub 上三连(watch, star 及 fork),欢迎随时交流!

image.png

查看原文

赞 1 收藏 1 评论 0

AntV_官方 发布了文章 · 2020-03-12

AntV 推出全新的图编辑引擎 X6,让你们久等了

X6.jpg

X6 是蚂蚁金服 AntV 旗下的图编辑引擎,X 象形图编辑场景的关系链接,同时 X6 又是 G6 的孪生兄弟,所以沿用了 G6 中的 6,深究一下,6 源于《六度分隔理论》,表达了我们对关系数据、关系网络的敬畏和着迷。

X6 脱胎于蚂蚁实际的业务场景,在此基础上,我们完善了图编辑场景的常用扩展,如小地图、网格系统、对齐线、框选、redo/undo等,内置了图编辑场景的常规交互和设计,如群组、链接桩、节点缩放、旋转、连线交互,并提供了基于 HTML 和 React 低成本定制节点能力。

特性预览

快速上手

只需要掌握创建画布、添加节点/边、更新节点/边、删除节点/边这几个 API 即可开始使用 X6,并且我们已将 X6 所有特性提取到画布的配置项中,系统默认的配置文件 preset.ts  包含 50 多个配置项 300 多行配置代码,您可以基于 X6 的配置能力快速定制出自己的画布。

www.yuque.com_antv_blog_x6-preview-release.png

节点、连线与画布,图编辑核心能力

易定制节点

X6 预置了一些常用节点样式,创建节点时通过 shape 来指定使用哪种图形来渲染节点即可直接使用,而且绝大部分节点样式和交互都可被自定义。

image.png

然而,实际业务场景中的节点可能要更复杂,预置样式不满足需求?没关系,我们还提供了两种灵活的自定义节点的方式。一种使用 HTMLElement 或 HTML 代码片段来定义节点(使用时将 shape 指定为 html 即可);另一种还可以使用 React 组件来渲染节点(使用 X6 注册节点 API 注册 @antv/x6-react-shape 配合咱家 antd 更是天生一对哦)。

20200310181914.jpg

丰富连线和箭头样式

内置了直线、曲线、拐线、正交线、关系线、循环线等常见连线样式和 10 多种箭头样式。

image

网格系统与无限画布

网格是节点在画布中定位时最小像素单元,例如当节点的位置是 {x: 12, y: 18} 网格大小为 5 时,那么节点渲染到画布的实际位置将是 {x:10, y: 20}。X6 默认提供了 linedot 两种风格的网格,并且支持自定义网格大小和颜色。

Kapture 2020-03-06 at 13.59.45.gif

infinite 选项设置为 true 开启无限大画布,当节点/边移动到画布边缘时画布会自动扩充画布大小。

2020-03-09 18-12-58.2020-03-09 18_15_44.gif

交互能力与配套组件,图编辑不可或缺

链接桩与锚点

通过父子节点和 isPort 选项可以将指定的 cell 设置为链接桩,使其具备可连接性。锚点是沿节点边框布局的固定连接点,内置矩形/圆形/椭圆/三角形等边框布局,支持定制锚点的数量和位置,当鼠标 hover 到节点是才显示锚点,在锚点上按下鼠标可以触发连线。

点选和框选

点击节点/边时选中节点,按下 Cmd/Ctrl 连续点击可以同时选中多个节点,通过 rubberband  配置项来开启框选能力,同时支持 selectionPreview 选项配置选中节点/边的样式。

对齐线

对齐线是移动节点排版的辅助工具,默认禁用,可以通过 guide 配置项开启和定制对齐线的样式。

2020-03-11 14-25-02.2020-03-11 14_25_41.gif

小地图

支持渲染粒度定制和样式定制,即是否在小地图中渲染节点/边,默认只渲染节点。在小地图中并不会绘制完整的节点,而是用一个色块代替节点,色块颜色支持自定义。

2020-03-09 17-57-11.2020-03-09 18_08_44.gif

UI 组件

搭建一个复杂的图编辑应用还需要用到 Menubar、Toolbar、Dropdown、ContextMenu、Splitbox 等 UI 组件,我们在 x6-components 中提供了一些这样的 React 组件,可以搭配 antd 使用。

Kapture 2020-03-06 at 13.08.32.gif    2020-03-06 13-33-56.2020-03-06 13_34_38.gif

2020-03-06 13-37-15.2020-03-06 13_39_11.gif    2020-03-06 13-41-57.2020-03-06 13_44_08.gif

最后

非常感谢你的耐心阅读,X6 还是个新生儿,虽然内测版早已在内部数据研发(ER图)、运维中台(流程图)等多个产品应用上线,但相信还有很多问题有待完善,欢迎在 GitHub 给我们反馈问题。如果你对 X6 或者 AntV 旗下的其他产品感兴趣,可以通过以下渠道关注我们:

原文链接:https://www.yuque.com/antv/blog/x6-preview-release

查看原文

赞 2 收藏 0 评论 1

AntV_官方 发布了文章 · 2020-03-02

蚂蚁金服数据可视化引擎 G2 4.0 正式版发布!

banner.jpg

G2 是一套面向常规统计图表,以数据驱动的高交互可视化图形语法。

经历了为期半年的大规模底层重构和开发迭代,G2 4.0 终于和大家见面了。作为继 2017 年 11 月 22 日 G2 3.0 正式开源发布以来 G2 的第二次大版本发布,4.0 版本仍坚守着『打造数据驱动的高交互图形语法』的初心,在图形语法的基础上,新增了交互语法,同时在产品的功能、体验、易用性和灵活性等各个方面进行了全面提升。

全新的 4.0

首先欢迎一波 star ~~~~

严格意义上来说,这并不是一次重构,而是一次大规模的重写,我们自底向上,从代码到文档,构建了全新的 G2。

全面拥抱 TypeScript

我们使用 TypeScript 重写了 G2 以及其相关的所有模块,并提供了完整的类型定义文件

Group 3.png

绘图引擎升级,多引擎切换

G 是 AntV 旗下一款易用、高效、强大的 2D 可视化渲染引擎,提供 Canvas、SVG 等多种渲染方式的实现。

随着 AntV 底层渲染引擎 G 4.0 的发布,为 G2 4.0 带来了Canvas、SVG 多渲染模式支持局部刷新动画体验增强等多种利好。

2020-02-28 10-06-29.2020-02-28 10_09_57.gif

更新机制引入

在 G2 之前的版本中,数据初始化和数据更新的流程本质上一样,区别仅在于后者需要把之前的图形清理掉,所以在数据更新之后,图形元素都是重新创建的,与数据更新前的图形元素无法进行关联,这就对动画、以及交互的一致性造成了影响。所以我们在 4.0 中引入了更新机制,包括:

  1. Geometry 的数据更新,为此我们引入了 Element 概念;
  2. 可视化组件的更新。

示例一:在图表发生数据更新后,数据更新前的图形元素并没有被销毁,我们仍然可以对更新前取到的 Element 实例进行操作。

2020-02-28 11-09-27.2020-02-28 11_10_38.gif

示例二:更新机制的加入,细化了数据的处理流程,为图表的细粒度动画提供了基础。以下动态条形图,当每次数据发生更新时,坐标轴文本 Axis、图形文本标注 Label、几何图形 Geomtry等图表元素,均可在更新阶段定制对应的动画。

2020-02-28 11-20-25.2020-02-28 11_22_16.gif

可视化组件体系升级

结合 AntV 下各个产品:G2、F2、G6、L7 的需求,我们重新设计了图表组件,形成了功能更强,自由度更高,扩展性更好,面向交互的可视化组件体系。在兼容 3.x 功能的基础上,增加了动画、约束性布局以及交互等功能。

图例及坐标轴文本自适应Tooltip 坐标系自适应
111.gif222.gif

强大的 View 模块

View 是拥有独立数据源,并且能够绘制多个图形的容器。相比于 3.x,4.0 中 Chart 和 View 的职责发生了一些变化:View 是 G2 的画布容器,负责子 View、几何标记以及可视化组件的管理,而 Chart 是继承 View,直接暴露给开发者的便捷使用入口,在 4.0 中,用户可以根据自己业务的定制需求,使用 View 去开发个性化的数据多维分析图形。另外我们还支持了 View 嵌套以及组件自动布局。

支持各种场景下的自动布局:数据更新、图表尺寸变化、坐标系变换以及图表组件位置更新等。

2020-02-24 20-15-20.2020-02-24 20_56_47.gif

全新的交互语法

G2 4.0 开始,我们从底层的 G 4.0 开始重构事件的实现,可视化组件层统一接口和事件机制,G2 层 Geometry 拆分出 Element 以适应新的交互机制,当这一切就绪,交互语法的新篇章终于开启

image.png

我们将交互行为拆分成一个个交互环节,而每个交互环节又由一个个触发对象和反馈对象组成,通过对触发对象和反馈对象的拼装组合,我们就可以搭建出各种各样的交互行为,而交互行为之间又可以进行叠加使用。

以鼠标 hover 图形,图形高亮为例,该交互行为由两个交互环节组成:

  1. 交互环节 1:鼠标滑入图形元素,图形元素高亮
  2. 交互环节 2: 鼠标滑出图形元素,图形元素恢复原始状态

对以上描述,我们可以分析出每个交互环节的触发对象、触发事件、反馈对象以及结果,如下:

image.png

于是我们就可以使用交互语法进行组装:

11.png22.gif

通过这一套交互语法,我们为 G2 组装配置了丰富的交互行为,方便用户快速上手使用。

ie8.gifie5.gif2.gif
12.gif13.gifA_s-JWTrKjUP4AAAAAAAAAAABkARQnAQ.gif

将来我们将会尝试让交互语法会更加自然化,让用户可以通过更加符合文法的方式进行使用。

细粒度的动画

得益于更新机制的引入,G2 4.0 的动画配置更加细粒度,在原有 Geometry 动画的基础上,用户还可以对图表组件(Axis、Annotation 等)及 Label 文本标注进行动画配置。于此同时,我们还优化了各个 Geometry 的内置动画。

a1.gifa2.gif2020-02-28 13-38-01.2020-02-28 13_38_28.gif
2020-02-28 13-34-51.2020-02-28 13_35_29.gifpath.gifa3.gif

『暗黑』主题

在图表主题上,G2 4.0 做了一次设计的升级,同时新增了 'dark' 主题。

image.png

灵活的扩展机制

G2 4.0 重新设计并统一了各个核心模块的扩展机制,相比 3.x 版本,粒度更新,机制更灵活,用户可以基于最核心的模块,按需加载需要的功能模块,包括自定义 Shape、主题、交互、组件、动画等,具体使用请阅读按需引用教程。

除了以上变化之外,我们还对 API 进行了大量的优化,在最大程度兼容 3.x 语法的基础上,提供了对用户更加友好,更易理解的函数命名以及更合理的配置项结构,同时还对教程及 API 文档进行了重构。欢迎访问 G2 官网了解更多细节内容。

如何升级

为了尽可能简化升级,G2 4.0 保持了最大程度上的兼容,但是仍然有一部分 breaking change 需要注意,具体请参考 G2 4.0 升级指南

最后

非常感谢您的耐心阅读,如果你对 G2 感兴趣,可以通过以下渠道关注我们:

相关链接
查看原文

赞 0 收藏 0 评论 0

AntV_官方 发布了文章 · 2019-11-27

9102 年,蚂蚁金服前端是怎么写图表的?

相信很多开发者都有过被图表搞得很抓狂瞬间:业务压力大,想快速上个图表,折腾半天配出来却丑的不能看;Demo 里明明看着很美,换成真实数据立刻变成买家秀了.....  很长一段时间里,这些问题也在困扰着蚂蚁的前端,写个轻量级图表,怎么就那么难?

为了让图表开发过程变得更加简单、愉悦,蚂蚁金服可视化团队结合阿里经济体内外 20000+ 业务系统和日均千万级 UV 产品中提炼出来的业务场景和图表需求,提炼出一套通用统计图表库— G2Plot

有了它,蚂蚁金服前端使用图表的日常是这样的:

前端小K今天收到了一个时间比较紧的业务需求 — 在系统快速搭建一个面板,用图表展示某个产品的销售情况。小K跟 PD 过了一下,决定使用 G2Plot 比较经典的面积图、条形图、环图这三个图表类型。


美丽直观的面积图

面积图是小K要制作的第一个图表,他将使用 堆叠面积图 来展现多个指标的时间变化趋势。

Step1: 引入图表类型

import { StackArea } from '@antv/g2plot';

Step2: 准备数据
G2Plot 的数据源格式是 JSON 数组,数组的每个元素是一个标准 JSON 对象。
下面这份数据描述了 2016年-2018 年,每个地区每季度的销售额。展示空间有限,仅以一个季度为例展示数据样本。

const data = [
  { time: '2018季1', area: '东北', value: 190567 },
  { time: '2018季1', area: '华北', value: 80122 },
  { time: '2018季1', area: '华东', value: 223720 },
  { time: '2018季1', area: '西北', value: 157845 },
  { time: '2018季1', area: '中南', value: 60343 },
  { time: '2018季1', area: '西南', value: 98810 },
];

Step3: 生成图表  挂载数据源,使用数据中的 'time' 字段作为 X 轴,'value' 字段作为 Y 轴,以 'area' 字段将数据分组并堆叠。

const area = new StackArea(
  document.getElementById('area-container'), // 获取图表容器
  {
    data,
    xField: 'time',
    yField: 'value',
    stackField: 'area'
  } // 图表配置项
);
area.render();

屏幕快照 2019-11-27 上午8.03.19.png

Done!  只需要7行代码!AntV 强大的设计体系加持下,可以看到默认渲染出的图表质量已经相当高了。

不过小K是个精益求精的前端,他还要对图表的一些细节做进一步优化:

step4:  加个标题
为图表添加 标题和描述 能够帮助用户更直观的获得图表要表达的主题信息。

const area = new StackArea(document.getElementById('area-container'), {
  title: {
    visible: true,
    text: '地区销售趋势',
  },
  data,
  xField: 'time',
  yField: 'value',
  stackField: 'area'
});
area.render();

屏幕快照 2019-11-27 上午8.12.23.png

step5:  坐标轴优化**
正待完工之际,PD 和设计师一齐表示他们还有话要说。两人都觉得图表Y轴有优化空间:设计师认为 Y 轴的刻度太密,4 个刻度在视觉上比较美观,而 PD 觉得 Y 轴的标签用千分位显示更标准。面对这些需求,小K表示自己情绪稳定。

const area = new StackArea(document.getElementById('area-container'), {
  title: {
    visible: true,
    text: '地区销售趋势',
  },
  data,
  xField: 'time',
  yField: 'value',
  stackField: 'area',
  yAxis: {
    tickCount: 4,
    label: {
      formatter: (v) => {
        return Math.floor(v / 1000) + 'k';
      },
    },
  },
});
area.render();

屏幕快照 2019-11-27 上午8.32.36.png

完工,只需要不到 20行 代码,轻松生成堆叠面积图。

言简意赅的条形图

接下来要制作的第二个图表是 堆叠条形图 ,它将用来展示各产品品类在地区间的销量对比。生成图表的前置步骤跟堆叠面积图一样,我们直接来到核心环节:

引入图表类型

import { StackBar } from '@antv/g2plot';

生成图表:挂载数据源,配置标题,指定数据中的 'count' 字段作为 X 轴,'area' 字段作为 Y 轴,以 'cat' 字段进行堆叠。一些影响体验的小细节已经默认做好: 图形标签显示空间不够时自动隐藏、根据底色自动调整字体颜色以保证可读性等等。

const bar = new StackBar(document.getElementById('bar-container'), {
  data,
  xField: 'count',
  yField: 'area',
  stackField: 'cat',
});
bar.render();

屏幕快照 2019-11-27 上午8.55.50.png

更换色板
设计师认为这个图表比较的是品类数据,而不是地区数据,所以在色彩上不应该跟堆叠面积图使用一个色板。没有问题,换色板也很轻松:

color: ['#945fb9', '#1e9493', '#ff9845']

屏幕快照 2019-11-27 上午8.37.55.png

灵活生动的环图

环图 是本次小K要制作的最后一个图表,中心的镂空部分和能够与图形交互的指标卡是它的优势所在。

引入图表类型

import { Ring } from '@antv/g2plot';

生成图表:指定数据中的 'bill' 字段决定环图的切片大小,'area' 字段决定切片的颜色。

const ring = new Ring(document.getElementById('ring-container'), {
  data,
  angleField: 'bill',
  colorField: 'area',
});

屏幕快照 2019-11-27 上午9.30.48.png

加入环图中心的指标卡:
triggerOn 配置项定义了指标卡与图形联动的方式。

statistic:{
  visible: true,
    triggerOn:'mouseenter'
  }
});


屏幕快照 2019-11-27 上午9.48.33.png**


屏幕快照 2019-11-27 上午8.44.33.png

至此,小K的图表面板制作完成了,使用 G2Plot 只用了不到 50 行代码。省下的时间学点东西打个游戏撸撸猫不好吗?

G2Plot 一直以开源的方式持续迭代,除了服务蚂蚁金服众多业务之外,还希望这套经过企业级场景打磨锤炼出的图表库能够帮助更多的人解决制作图表的痛点问题。  

最后

关于 G2Plot 的更多技术细节、详细进展,请通过以下途径关注我们👇。也欢迎大家来给点点 Star,让更多人看到这个开源项目:

查看原文

赞 3 收藏 1 评论 0

AntV_官方 发布了文章 · 2018-10-17

蚂蚁金服可视化图形语法 G2 3.3 发布:琢·磨

landscape

更好的阅读体验,请移步语雀

G2 是蚂蚁金服数据可视化解决方案 AntV 的一个子产品,是一套数据驱动的、高交互的可视化图形语法。

经过两个多月密锣紧鼓的开发,400+次提交,G2 3.3版本今天终于和大家见面了。自上次3.2版本发布以来,我们收到不少图表组件相关的需求和吐槽,团队的工程师们和设计师们倾力合作,为大家带来更丰富、体验更好的图表组件。同时,3.3版本为 G2 带来新的图表成员:小提琴图,并为大家带来官方精选的图表案例。

图表组件整体升级

G2 3.3版本里,我们重构了所有图表组件,包括图例(legend)、提示信息(tooltip)、文本标签(label)、坐标轴(axis)和辅助信息(guide),梳理并简化了组件的生命流程,以此为基础为组件带来更优化的样式和交互,并扩充了更多功能。以下提到的组件升级都可以在官网 demo 里看到。

标签(label)的痛点改进和增强

针对性地对地图、散点图和 treemap 做了 label placement 相关防覆盖的处理。

label-1label-2label-3
文本防覆盖强调回调函数灵活定位

提示信息(tooltip)增强

tooltip 此前都是 HTML 版本,本次补充了 G(Canvas 和 SVG)版本,也就是支持导出的版本。另外,HTML 版本也做了进一步加强,可以更轻松地定制出更多效果。

tooltip-1tooltip-2
G 版本HTML Content
tooltip-3tooltip-4
固定位置Mini Tooltip

图例(legend)的扩展

legend 做了大量的功能扩展和样式调整,比较值得一提的是 color / size / html 和翻页 legend。

legend-1legend-2legend-3legend-4
ColorSizeHTML翻页

坐标轴(axis)的新功能

axis 组件的 label 目前增加了两个方向的 offset 支持,因此,在小型图表中,可以实现坐标轴文本内嵌了。

axis-label

6个精品案例

根据业务的关联性和复用性,我们提炼了大量的精品 demo 案例,后续会逐步开放,这一期更新了6个折线图。

demo-1demo-2
demo-3demo-4
demo-5demo-6

致敬和探索

3.3版本里,geom 的大家庭里又多了一位成员,小提琴图(violin)。向 vega、ggplot2 两位前辈致敬,希望 G2 实现的版本也能为统计世界里这个经典的图表带来不一样的体验:链接

violin

另一方面基于3.3提供的更完善的图形语法能力,这段时间我们做了可视化 storytelling 案例《泰坦尼克号数据集可视分析》。我们把这个案例录制成了视频:链接

storytelling

另一个案例是这次3.3发布前我们用 webpack-visualizer 对 G2 的打包模块进行了可视化分析,排查 Webpack 打包过程中存在的重复、冗余的依赖库。最终我们用 G2 实现了一个版本:链接

webpack-visualizer

特别感谢

3.3版本的迭代中,我们很欣喜地看到,有越来越多开源社区的小伙伴加入到了 G2 的贡献者行列中来。感谢大家的鼎力支持,G2 非常荣幸能和大家一路同行!(以下贡献者排名不分先后)

user-1user-2user-3user-4
liunanLi Ruo Nan赖小赖zzzzy

更要感谢广大用户对 G2 的青睐,据不完全统计,自 G2 17年11月22开源至今,使用 G2 的系统数字已经由1.1k+增长到目前的8.5k+,G2 在 github 上的 star 数也由0.7k+增长到目前的6.3k+。大家的信任,让我们倍感喜悦,同时肩上也背负起沉甸甸的责任。希望未来的日子里,我们继续互相激励互相提携,做出更优秀的可视化产品来。

欢迎共建

G2 是一套数据驱动的、高交互的可视化图形语法。是目前 JavaScript 社区对《The Grammar of Graphics》书中理论还原度最高的实现。感兴趣的小伙伴们欢迎通过以下途径关注和联系我们!

AntV 是蚂蚁金服全新一代数据可视化解决方案,主要子产品包括 G2、G6、F2,欢迎共建!

原文链接

查看原文

赞 0 收藏 0 评论 0

AntV_官方 分享了头条 · 2018-09-04

开源至今,G6 的使用量高速增长,短短三个月活跃系统数从 100 个飙升至近 1000 个。我们取得了一定的成绩同时,也暴露出了不少问题。本次 2.1 发布为大家带来: 1.更详尽、更专业的文档;2.支持 SVG 渲染;3.箭头拓展机制;4.新增 7 个图分析插件;

赞 0 收藏 0 评论 0

AntV_官方 发布了文章 · 2018-08-28

蚂蚁金服移动端可视化解决方案 F2 3.2 正式发布

F2,一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(node, 小程序,weex)。完备的图形语法理论,满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。

特性

专注移动,体验优雅

在“准确、有效、清晰、美”的可视化原则的基础之上,结合移动设备特性(规格不一,计算能力不足和触摸界面)以及人们对移动设备的使用习惯,我们从设计、性能以及多端异构三个角度出发,为用户提供移动端图表的最佳实践。

  • 轻量化呈现,自然反馈:在设计上我们以人为本,追求自然简单易懂,有吸引力的表达效果,让用户在碎片化的时间里更快更高效得获取图表信息。同时在可视化的操作我们追求内容和操作有机融合,符合人的自然行为反应,让交互操作更自然。

  • 轻巧流畅:性能我相信是移动端长期关注的问题,虽然移动设备硬件以及计算能力一直在不断提升,但是可以肯定地说,大多数用户并没有使用最新和最强大的移动设备。因此,F2 一直致力于追求极致的性能,针对移动设备做了大量的优化,在支持丰富(50+)图表的基础上同时保持代码量的小巧(不带交互版本 Gzip 压缩后 44k,带所有交互版本 56k),同时提供模块化的设计以支持动态加载,提供更优的大小。
  • 多端异构:在完美支持 H5 环境的同时,同时兼容 Node.js支付宝小程序微信小程序React Native 以及 Weex 端的渲染,一份代码,多设备多环境渲染。

图表丰富,组件完备

与传统的图表库不同,抛弃了特图特做的封装思路,基于强大的图形语法理论,以数据驱动,通过图形语法的组合灵活构建各类图表,目前可绘制 50+ 图表类型(当然,还可以更多),覆盖各类场景。在提供基础的图表可视化能力外,我们还提供了丰富图表功能组件,满足各种功能需求。

扩展灵活,创意无限

我们在提供最佳实践的同时,还为开发者提供了灵活的扩展机制,包括 Shape、动画以及交互的自定义能力,当然还有图表样式的个性化定制,满足各种个性化的图表要求。

一直在路上

F2 3.2,因你而动

自 F2 3.1 启航之后,我们从未停止前行,非常感谢朋友们对 F2 的支持信任!以下是最新版本 F2 3.2 所做出的努力,更详细的内容可阅读《F2 3.2,因你而动》发布稿。

拥抱开源

自 F2 开源以来,收到了很多有价值的意见和反馈,同时开源社区也基于 F2 进行了各种封装,非常感谢大家的支持信任,也欢迎更多的有志之士一起加入我们。

实例赏析

F2 现已服务于阿里系各大 app:蚂蚁财富、支付宝、淘票票(专业版)等,每日经受着千万级 pv 的考验。

感谢

感谢并期待与你一起同行。

最后

感兴趣的小伙伴们欢迎通过以下途径关注我们!联系我们!!加入我们!!!

原文链接

查看原文

赞 3 收藏 3 评论 0

AntV_官方 分享了头条 · 2018-08-28

F2,一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(node, 小程序,weex)。完备的图形语法理论,满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。

赞 0 收藏 0 评论 0

认证与成就

  • 获得 12 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-06-05
个人主页被 859 人浏览