阿里巴巴蚂蚁金服可视化技术：G2图形可视化的实现

Java架构师Array 2023-01-12 22:52:14

课时名称	课时知识点
阿里巴巴蚂蚁金服可视化技术：G2图形可视化的实现	阿里巴巴蚂蚁金服可视化技术：G2图形可视化的实现

...全文

159 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

数据图表根据蚂蚁金服 AntV 数据可视化设计语言构建。参见： • 设计规范：https://antv.alipay.com/vis/doc/design/index.html • g2-mobile：https://antv.alipay.com/g2-mobile/demo/index.html • g2：https://antv.alipay.com/g2/demo/index.html 使用方法： • 将此文件放至 Axure RP 元件库目录。

什么是 G2G2(The Grammar Of Graphics) 是一个由纯 javascript 编写、强大的语义化图表生成工具，它提供了一整套图形语法，可以让用户通过简单的语法搭建出无数种图表，并且集成了大量的统计工具，支持多种坐标系绘制，可以让用户自由地定制图表，是为大数据时代而准备的强大的可视化工具。G2 的特性1. 专业的数据可视化理论基础，从一个更高的视角来审视图表的构成进而提供了一套强大的图形语法，专注于数据到图形的映射，由数据驱动的方式生成可视化形式。2. 语法简单且语义化。G2 的图形语法为我们提供了一种非常自由简洁的创建图表体验，可以说是一句话画图，相比于市面上众多的配置项生成式图表引擎，G2 只需简简单单一句话，下面以绘制常见的柱状图为例var data = [ {action: '访问', visitor: 500}, {action: '浏览', visitor: 400}, {action: '交互', visitor: 300}, {action: '下单', visitor: 200}, {action: '付款', visitor: 100} ]; var chart = new G2.Chart({ id: 'c1', width : 800, height : 400 }); // 创建图表 chart.source(data); // 载入数据源 chart.interval().position('action*visitor').color('action'); // 使用图形语法绘制柱状图 chart.render();除去创建对象和载入数据的过程，其核心语法就是如下这句：绘制一张柱状图，以属性 'action' 的值为横轴，属性 'visitor' 为纵轴，然后根据不同的 action 属性值区分柱子的颜色。3. G2 并不是一个特定几个图表的生产库，而是一个绘图工具，提供的是一种自由绘图、组合创造的能力，所有的可视化结果都是由几何图形对象、映射、度量、统计、坐标系等基本图形语法元素排列组合而成，这就决定了用户可以使用这些图形语法元素进行各种各样的组合，创造出属于自己的图表。目前 G2 已经可以绘制出数不清的图表，其中包含了 30 余种常见的图表，还有更多我们都叫不上名字的图表，详见数据图表：其中所有的图表均使用 G2 绘制，也可以在图表中查看我们的 demo 示例。4. 更简单的可视化改变形式，对于使用者来说，仅仅改变非常少的配置就可以实现不同图表之间的切换。比如从柱状图到玫瑰图，用户只需要更改一个坐标系配置。可视化形式的轻松改变可以帮助数据分析人员更加容易地找到适用于其数据的可视化形式，进而发现数据中的规律。chart.coord('polar') chart.coord('rect')5. 灵活的皮肤定制机制：详见皮肤。6. 灵活易扩展的插件机制：详见 Plugins。更多效果图：标签：蚂蚁金服 阿里巴巴

蚂蚁金服 SEE Conf 2018 ppt - 05 AntV返璞归真幻化万千可视化表达_绝云&御术.pdf

Java架构师Array的课程社区_NO_5

1

社区成员

678

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章