资讯专栏INFORMATION COLUMN

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

TZLLOG / 2628人阅读

摘要:更好的阅读体验,请移步语雀是蚂蚁金服数据可视化解决方案的一个子产品,是一套数据驱动的高交互的可视化图形语法。欢迎共建是一套数据驱动的高交互的可视化图形语法。

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

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

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

图表组件整体升级

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

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

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

文本防覆盖 强调回调函数 灵活定位
提示信息(tooltip)增强

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

G 版本 HTML Content
固定位置 Mini Tooltip
图例(legend)的扩展

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

Color Size HTML 翻页
坐标轴(axis)的新功能

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

6个精品案例

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

致敬和探索

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

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

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

特别感谢

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

liunan Li 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》书中理论还原度最高的实现。感兴趣的小伙伴们欢迎通过以下途径关注和联系我们!

GitHub https://github.com/antvis/g2

官网 https://antv.alipay.com/zh-cn...

邮件 antv@antfin.com

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

原文链接

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98438.html

相关文章

  • 蚂蚁金服新一代数据视化引擎 G2

    摘要:新公司已经呆了一个多月,目前着手一个数据可视化的项目,数据可视化肯定要用到图形库如等,经决定我的这个项目用阿里旗下蚂蚁金服所开发的图表库。数据提示框内提示的信息还可以通过格式化函数动态指定。 新公司已经呆了一个多月,目前着手一个数据可视化的项目,数据可视化肯定要用到图形库如D3、Highcharts、ECharts、Chart等,经决定我的这个项目用阿里旗下蚂蚁金服所开发的G2图表库。...

    animabear 评论0 收藏0
  • 蚂蚁金服移动端视化解决方案 F2 3.2 正式发布

    摘要:,一个专注于移动,开箱即用的可视化解决方案,完美支持环境同时兼容多种环境小程序,。专业的移动设计指引为你带来最佳的移动端图表体验。基于,移动端可视化图表库。 showImg(https://segmentfault.com/img/remote/1460000016176811?w=1600&h=440); F2,一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多...

    sydMobile 评论0 收藏0
  • 12个值得关注的顶级视化JS库 涉及图表、动画、时间处理,表格操作

    摘要:本文是译文,原文是我在原文的基础上加了百度的图表库,这个也是毫不逊色其他图表库的。更新记录图表类数据驱动文档通常被称为最强大的开源可视化库。是迄今为止最好的图表库。在顶级功能支持,使任何元素可拖动,可旋转或可滑动滚动和快速性能的能力。 本文是译文,原文是https://da-14.com/blog/top-11...我在原文的基础上加了百度的Echats图表库,这个也是毫不逊色其他图表...

    JinB 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<